当前位置:首页 > 自学前端 > CSS > CSS教程 设置一个导航栏

CSS教程 设置一个导航栏

刘广法2022年04月12日 11:34:59CSS2950
CSS教程 设置一个导航栏-第1张图片-刘广法IT博客

CSS教程 设置一个导航栏

一、通过把块元素转化成行内元素

二、通过浮动然后按下浮动

三、通过固定来控制

一、把块状元素转化成行内元素:

1、list-style-tyoe:nome;    列表符号类型,可以转换成有序列表,也可以省略列表符号。

2、text-decoration:none;    用于a连接去点装饰,也就是去掉下划线。

3、:hover{}    鼠标滑动时候显示

4、display: inline-block;    装换成行内块状元素

5、vertical-align: middle;    y轴居中

6、单行省略号:

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.header{
				
				background-color: pink;
			}
			.header>ul{
				margin: 0;
				padding: 0;
			}
			.header>ul>li{
				list-style-type: none;
				display: inline-block;
				padding: 10px;
			}
			.header>ul>li>a{
				text-decoration: none;
			}
			.header>ul>li:hover{
				background-color: red;
			}
			.header>ul>li:hover>a{
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">产品介绍</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
	</body>
</html>

二、通过浮动然后按下浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.header{
				background-color: rgba(100, 100, 100, 0.5);
			}
			.header>ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			.header>ul>li{
				display: block;
				float: left;
				padding: 5px;
			}
			.header>ul>li>a{
				text-decoration: none;
			}
			.header>ul::after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<ul>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">产品介绍</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</div>
	</body>
</html>

三、通过固定来控制

通过固定可以控制位置:



文章原创作者:刘广法,感谢转载,网站地址:https://liuguangfa.com/

扫描二维码推送至手机访问。

版权声明:本文由刘广法博客发布,如需转载请注明出处。

本文链接:https://liuguangfa.com/css/170.html

分享给朋友:

“CSS教程 设置一个导航栏” 的相关文章

CSS教程 CSS的选择器

CSS教程 CSS的选择器基础选择器:1、标记选择器:直接标记即可2、id选择器:用定义的id3、类选择器:用定义的类,一个标记可以使用多个类4、模糊选择器:全选选择器,一般不单独使用。高级选择器:(a 和 b 都是基础选择器)1、子代选择器:a>b,选中某个元素的子元素2、后代选择器:a b...

CSS教程 css常用的单词和css中常用的样式

CSS常用的样式:块元素:width,宽度。height:高度,单位可以是px,也可以是百分比。background-color:背景色。color:前景色 font-weight:字重,表示字体的粗细,一般常用normal,bold text-decoration:overli...

CSS教程合集

css学习教程CSS教程 关于css的相关基础知识点     CSS教程 颜色的选择CSS教程 CSS的选择器CSS教程 css常用的单词和css中常用的样式CSS教程 三个重点(盒模型、浮动、固定)     CSS教程 设置一个导航栏&n...

CSS教程 三个重点(盒模型、浮动、固定)

CSS教程 三个重点(盒模型、浮动、固定)

css教程 三个重点:1、盒模型box-modelMargin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) -...

CSS教程 等分的两种方法

CSS教程 等分的两种方法一、通过增加一个边框进行设置:可以匹配低版本css二、通过calc()进行函数运算:一、通过增加一个边框进行设置:可以匹配低版本css<!DOCTYPE html> <html> <head> <meta&nb...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。