第8章利用CSS制作导航菜单

最新推荐文章于 2025-05-03 22:33:57 发布
最新推荐文章于 2025-05-03 22:33:57 发布
阅读量1k 收藏 22
点赞数 8
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81650721/article/details/144730784
版权

8.1 水平顶部导航栏
水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。

8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
<nav>标签是HTML5新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区域。

例如，在<nav>的首尾标签之间使用无序列表<ul>标签配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接，用户可根据实际情况改成具体的URL地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 8.1 水平顶部导航栏 */
			/* 8.1.1 简单水平导航栏的设计与实现 */
			/* 8.1.1.1导航栏的创建 */
			/* 8.1.1.2 列表样式的设计 */
			/* 8.1.1.3 超链接样式的设计 */
			/* 8.1.1.4 鼠标事件 */
			/* 8.1.2 下拉子菜单导航栏的设计与实现 */
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 */
			/* 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
			/* 8.2 纵向侧边导航栏 */
					
		</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航</h3>
		</center>
		<hr>
		<nav>
			<ul>
			<li><a href="#">前端</a></li>
			<li><a href="#">后台</a></li>
			<li><a href="#">移动应用</a></li>
			<li><a href="#">数据库</a></li>
			<li><a href="#">操作系统</a></li>
			<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.1.2 列表样式的设计
此时会带有<ul>元素的默认样式，即每一列表选项前面有实心点标记，可以利用CSS在<head>标签中进行声明，对列表样式进行改变。

使用 list-style-type 属性去掉默认标记，为了预防不同的浏览器会出现预设值，设置 margin 和 padding 属性为0，避免最终布局效果可能产生的误差，为了使列表效果在同一行显示，为<li>列表选项定义浮动效果。


 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 8.1 水平顶部导航栏 */
			/* 8.1.1 简单水平导航栏的设计与实现 */
			 /* 8.1.1.1导航栏的创建 */
			 /* 8.1.1.2 列表样式的设计 */
			 ul{
				 list-style-type: none;
			 }
			 li{
				 float: left;
			 }
			/* 8.1.1.3 超链接样式的设计 */
			/* 8.1.1.4 鼠标事件 */
			/* 8.1.2 下拉子菜单导航栏的设计与实现 */
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 */
			/* 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航</h3>
		</center>
		<hr>
		<nav>
			<ul>
			<li><a href="#">前端</a></li>
			<li><a href="#">后台</a></li>
			<li><a href="#">移动应用</a></li>
			<li><a href="#">数据库</a></li>
			<li><a href="#">操作系统</a></li>
			<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.1.3 超链接样式的设计

利用CSS为超链接重新设置样式，例如，对超链接的 a：link 和 a：visited 进行设置，表示超链接未被访问和已访问状态。然后将其 display 属性设置为 block ，使得超链接成为块级元素，这样才可以为超链接设置像素的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 8.1 水平顶部导航栏 */
			/* 8.1.1 简单水平导航栏的设计与实现 */
			 /* 8.1.1.1导航栏的创建 */
			 /* 8.1.1.2 列表样式的设计 */
			 ul{
				 list-style-type: none;
			 }
			 li{
				 float: left;
			 }
			/* 8.1.1.3 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
			}
			/* 8.1.1.4 鼠标事件 */
			/* 8.1.2 下拉子菜单导航栏的设计与实现 */
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 */
			/* 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航</h3>
		</center>
		<hr>
		<nav>
			<ul>
			<li><a href="#">前端</a></li>
			<li><a href="#">后台</a></li>
			<li><a href="#">移动应用</a></li>
			<li><a href="#">数据库</a></li>
			<li><a href="#">操作系统</a></li>
			<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>


8.1.1.4 鼠标事件

利用CSS为 a:hover 和 a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 8.1 水平顶部导航栏 */
			/* 8.1.1 简单水平导航栏的设计与实现 */
			 /* 8.1.1.1导航栏的创建 */
			 /* 8.1.1.2 列表样式的设计 */
			 ul{
				 list-style-type: none;
			 }
			 li{
				 float: left;
			 }
			/* 8.1.1.3 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #ff0000;
				color: #ffffff;
			}
			a:hover,a:active{
				background-color: #ffffff;
				color: #ff0000;
			}
			/* 8.1.1.4 鼠标事件 */
			/* 8.1.2 下拉子菜单导航栏的设计与实现 */
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 */
			/* 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>简单水平菜单导航</h3>
		</center>
		<hr>
		<nav>
			<ul>
			<li><a href="#">前端</a></li>
			<li><a href="#">后台</a></li>
			<li><a href="#">移动应用</a></li>
			<li><a href="#">数据库</a></li>
			<li><a href="#">操作系统</a></li>
			<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>


8.1.2 下拉子菜单导航栏的设计与实现

8.1.2.1导航栏的创建

仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有列表<al>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接就址当前设置为空链接。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.2 列表样式的设计
此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CS5在deab签中进行声明，对列表样式进行改变。
同样，使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0，为<li>选项定义浮动效果，设置 text-decoration属性 none。这里使用通配符“*”整体设置。
 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    /* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			/* 8.3.5 鼠标事件 */
			a:link,a:visited{
					background-color: #0000ff;
					color: #ffff00;
			}
			a:hover,a:active{
					background-color: #ffff00;
					color: #0000ff;
			}
			/* 8.3.3 菜单固定底部的设计 */
			.fix-footer{
				position: fixed;//底部菜单栏固定
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3.4 超链接样式的设计

利用CSS 为超链接重新设置样式，对超链接的a:link 和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    /* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			/* 8.3.5 鼠标事件 */
			/* 8.3.3 菜单固定底部的设计 */
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3.5 鼠标事件

利用CSS为a:hover 和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    /* 8.3.1 导航栏的创建 */
			/* 8.3.2 列表样式的设计 */
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			/* 8.3.4 超链接样式的设计 */
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			/* 8.3.5 鼠标事件 */
			a:link,a:visited{
					background-color: #0000ff;
					color: #ffff00;
			}
			a:hover,a:active{
					background-color: #ffff00;
					color: #0000ff;
			}
			/* 8.3.3 菜单固定底部的设计 */
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.4 综合案例——优名养生馆
利用链接，列表，DIV，和CSS设计制作网页。

8.4.1 封面页的设计与实现
（1）封面页页面布局较简单，要求有正文和底部两块区域，用于放图片信息和底部导航信息，而底部导航又根据优先级分上层的圆球菜单和下层的水平菜单。

（2）利用超链接为底部区域先添加圆球导航，并设置相应的CSS样式。

（3）利用列表为底部区域后添加水平导航，并设置相应的CSS样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(img/bg.JPG)
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				width: 25%;
				float: left;
				line-height: 50px;
			}
			img{
				margin-top: 70px;
				margin-right: 40px;
			}
			.footer{
				height: 50px;
				width: 100%;
				background-image: url(img/footer-bg.jpg);
				border-top: 3px solid gray;
				text-align:center;
				z-index: 9998;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.footer-top{
				height: 90px;
				width: 90px;
				text-align: center;
				line-height: 90px;
				z-index: 9999;
				position: fixed;
				bottom: 0;
				left: 45%;
			}
			.footer-top a{
				border-radius: 90px;
			}
			.footer-top a:link,a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
				border-top: 3px solid gray;
				background-image: url(img/footer-top-bg1.jpg);
			}
			.footer-top a:hover{
				background-image: url(img/footer-top-bg2.jpg);
				color: white;
			}
			.footer a:link,a:visited{
				display: block;
				font-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
			}
			.footer a:hover{
				background-color: darkgray;
				border-left: 2px solid white;
				border-right: 2px solid white ;
				font-size: 16px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<marquee direction="right" scrollamount="20">
				<img src="img/marquee1.jpg"/>
				<img src="img/marquee2.jpg"/>
				<img src="img/marquee3.jpg"/>
			</marquee>
		</div>
		<nav>
			<div class="footer-top">
				<a href="index.html">进入官网</a>
			</div>
			<div class="footer">
				<ul>
					<li><a href="#">奇幻世界</a></li>
					<li><a href="#">主题风采</a></li>
					<li><a href="#">加盟相关</a></li>
					<li><a href="#">友情推荐</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.4.2 主页的设计与实现
主页页面布局要求有页头、正文和页脚三块区域。页头完成背景图片的添加和店名的输人;正文分左右两部分，分别完成侧边纵向导航和图文信息的添加;页脚完成版权信息。页头、正文和页脚三块区域均包含在div-all区域内。
（1）为页头区域添加背景图片，并加人嵌套的div，添加店名信息，最后设置相应的 CSS 样式。

（2）为正文区域左边添加纵向导航信息，并设置相应的CSS样式。

（3）为正文区域右边添加·图文信息，并设置相应的CSS样式。

（4）为页脚区域添加版权信息，并设置相应的CSS样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style>
			body{
				background-image: url(img/bg.JPG);
			}
			.all{
				margin: 0px auto;
				width: 900px;
			}
			.top{
				width: 900px;
				height: 225px;
				background-image: url(img/top-bg.jpg);
			}
			.cent{
				width: 320px;
				margin-left: auto;
				margin-right: auto;
				font-size: 58px;
				font-family: "楷体";
				color: lemonchiffon;
				font-style: italic;
			}
			.nav{
				width: 200px;
				float: left;
				margin-top: 30px;
				font-size: 20px;
				font-weight: bold;
				color: saddlebrown;
			}
			.main{
				width: 700px;
				height: 300px;
				float: left;
				margin-top: 10px;
			}
			.footer{
				font-size: 14px;
				font-weight: bold;
				color: brown;
				text-align: center;
				clear: both;
				background-image: url(img/footer-bg.jpg);
			}
			p{
				color: brown;
				font-size: 16px;
			}
			img{
				margin: 15px;
			}
			ul{
				list-style-type: none;
			}
			li{
				height: 22px;
			}
			a:link{
				font-size: 16px;
				text-decoration: none;
				color: brown;
			}
			a:hover{
				background-color: burlywood;
				 color: white;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<br>
				<div class="cent">优名养生馆</div>
			</div>
			<nav>
				<div class="nav">
					<table>
						<tr>养生之道</tr>
						<tr>
							<ul>
								<li><a href="#">运动养生</a></li>
								<li><a href="#">四季养生</a></li>
								<li><a href="#">健康检测</a></li>
							</ul>
						</tr>
						<tr>中医养生</tr>
						<tr>
							<ul>
								<li><a href="#">经络养生</a></li>
								<li><a href="#">体质养生</a></li>
								<li><a href="#">特色疗法</a></li>
							</ul>
						</tr>
					</table>
				</div>
			</nav>
			<div class="main">
				<img src="img/main.jpg" align="left"/>
				<p>&emsp;&emsp;古人云：善养生者，上养神智、中养形态、下养筋骨。</p>
				<p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则，运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法，以期达到保养、调养、颐养生命，实现人类健康、长寿的目的。</p>
				<p>&emsp;&emsp;养生，是养护保养生命，已达长寿。养生是指有目的的通过各种手段护养人体生命的行为，即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生，注重身体机能的维护和康复；也包括心理层面的养生，腔调内在精神的平衡和祥和。按照层次划分，生理层面的养生也包括养颜、养体、养老；心理层面的养生包括养心、养性、养神。</p>
			</div>
			<hr/>
			<div class="footer">版权所有&copy;优名养生馆</div>
		</div>
	</body>
</html>

2301_81650721
关注
第八章 利用CSS制作导航栏菜单
whitesandcnm的博客
09-26 3917
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
第八章 利用CSS制作导航栏
2301_81876587的博客
11-11 1125
响应式设计是指网页能够根据不同设备屏幕尺寸和分辨率自适应调整布局和样式，以确保在手机、平板和桌面等设备上都能提供良好的用户体验。
第八章 利用CSS制作导航菜单
2302_81144906的博客
11-13 929
利用CSS为超链接重新设置样式，对超链接的a: link和a：visited进行设置，表示超链接未被访问和已访问状态。同样，使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0，为列表选项定义浮动效果，设置 text-decoration属性 none。此时会带有元素的实心点标记，及元素的阿拉伯序号，可以利用CS5在标签中进行声明，对列表样式进行改变。同时，利用CSS为a：hover和a：active 进行样式设置，表示鼠。
第八章 利用css制作导航菜单
2402_83184791的博客
11-12 1319
利用CSS为超链接重新设置样式，对超链接的a:link和 a:visited进行设置，表示超链接未被访问和已访问状态。利用CSS为列表超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。利用CSS为超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<ol>标签，配合列表选项<li>创建菜单选项。
第8章 利用CSS制作导航菜单
2401_84059676的博客
11-12 746
水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，结合下拉子导航使用。
HTML·第八章 利用CSS制作导航栏菜单
MortalTom的博客
11-19 2903
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
CSS基础_@拉钩教育【笔记】
m0_65273147的博客
04-30 450
划重点：RGB颜色6位16进制，每2位分别控制红/绿/蓝,例如:#00ff00 绿色#ff0000 红色#ff00ff 紫色 #红、蓝都参一点。
jQuery UI CSS 框架 API
csbysj2020
04-29 413
jQuery UI 是一个开源的 JavaScript 库，它基于 jQuery，提供了一套丰富的用户界面组件和交互效果。CSS 框架 API 是 jQuery UI 的核心之一，它允许开发者通过简单的 CSS 样式来定制和美化网页界面。jQuery UI CSS 框架 API 为开发者提供了丰富的样式和交互效果，可以帮助我们创建美观、交互性强的网页界面。通过本文的介绍，相信大家对 jQuery UI CSS 框架 API 有了一定的了解。
CSS 优化与渲染性能调研
欢迎来到我的博客，希望你能有所收获！
05-03 734
优化与渲染性能调研
CSS布局
yjs20135869的博客
05-03 706
CSS布局技术帮助我们精确控制网页中元素的位置和排列方式。常规文档流：最基础的布局方式。浮动布局：主要用于排版，但需要一些技巧来清除浮动。定位布局：通过position控制元素的精确位置。Flexbox布局：一维布局模型，简单且灵活。Grid布局：二维布局模型，适合复杂的页面结构。多列布局：适用于文本内容的分列显示。通过合理选择不同的布局方式和工具，我们可以创建各种响应式、灵活且美观的网页布局。
CSS的三大特性：层叠、继承与优先级
m0_74488469的博客
04-29 993
三大特性协同工作，赋予CSS强大的表现力。更精准控制元素样式减少冗余代码量提升样式可维护性快速定位样式冲突问题理解这些底层原理，是写出高质量CSS代码的关键所在。随着CSS新特性的不断演进（如层叠层@layer），这些基础理论依然保持着核心地位。
react-10样式模块化（./index.module.css， ＜div className={welcome.title}＞Welcome＜/div＞）
岂不闻
04-30 444
React样式模块化（./index.module.css， <div className={welcome.title}>Welcome</div>）
如何用CSS实现HTML元素的旋转效果
爱编程的鱼的博客
05-01 951
（本文为科普文章，请勿标记为付费）在网页制作中，为元素设置旋转效果可使其更灵动，提升用户体验。本文将深入浅出地介绍如何利用实现 HTML 元素的旋转效果，从基础到高级，助你全面掌握相关技巧。
CSS元素动画篇：基于当前位置的变换动画（合集篇）
最新发布
wuhen_n的博客
05-03 566
本文主要从位移效果类、旋转效果类、缩放效果类、透明度效果类四个角度，介绍了日常开发中常见的几种的基于当前位置的元素变换动画。
如何用CSS实现HTML元素的旋转效果：从基础到高阶应用
爱编程的鱼的博客
05-03 478
CSS旋转是增强网页动态交互的核心技术之一。通过灵活使用。
Tailwind CSS 实战：基于 Kooboo 构建企业官网页面（三）
Kooboo_china的博客
04-29 1183
经过前三章的实战，相信你已经掌握了构建企业网站的方法，并对 tailwind css 更加的熟悉
清除浮动的重要性及解决办法
2302_81312344的博客
04-29 776
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。父元素高度塌陷： 如果父元素内部的所有子元素都浮动了，并且没有设置明确的高度，父元素可能会因为子元素脱离文档流而坍塌为零高度，导致父元素的背景、边框等样式无法显示。 后续元素布局错乱： 浮动元素会影响后续元素的布局，可能导致后续元素环绕浮动元素，或者出现垂直重叠等问题。
WEBSTORM前端 —— 第2章：CSS —— 第4节：盒子模型
2401_82750246的博客
04-29 1062
③padding与margin多值写法：（2个属性名的属性写法，含义一样）（2）内减模式：box-sizing：border-box。（1）手动做减法，减掉border/padding的尺寸。（bd+方位名词首字母，如：bdl）①默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸。①作用：设置内容与盒子边缘之间的距离。①作用：控制溢出元素的内容的显示方式。（2）现象：取两个margin中的。（1）作用：设置元素的外边框为圆角。①作用：布局网页，摆放盒子和内容。（2）现象：导致父级一起向下移动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值