第八章总结

最新推荐文章于 2025-06-09 13:31:24 发布
原创 最新推荐文章于 2025-06-09 13:31:24 发布
· 676 阅读 · 24 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #html

8.1 水平顶部导航栏

水平导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强几乎所有类型的网站都可以使用，设计难度较低。
如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，结合
下拉子导航使用。

8.1.1.1导航栏的创建
<na>标签是 HIML5 新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区域。
例如，在<nav>的首尾标签之间使用无序列表<ul>标签配合列表选项<li>创建菜单选项。
其中选项内容使用超链接的形式，链接地址当前设置为空链接，用户可根据实际情况改成具
体的 URL 地址。

简答代码示例:

<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>

8.1.1.2 列表样式的设计

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

代码示例:

<style type="text/css">
			ul{
				list-style-type: none;
			}
			li{
				float: left;
			}
		</style>

8.1.1.3 超链接样式的设计


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

<style type="text/css">
			ul{
				list-style-type: none;
			
			}
			li{
				float: left;
				
			}
			a{
				display: block;
				width: 80px;
				text-align: center;		
				text-decoration:none;
			}
		</style>

8.1.1.4 鼠标事件

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

a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			a:link,a:visited{
				background-color: #ff0000;
				color: #ffffff;
			}
			a:hover,a:active{
				background-color: #ffffff;
				color: #ff0000;
}

 


8.1.2.1导航栏的创建

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航栏的创建</title>
		<style type="text/css">
			
		</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>元素的阿拉伯序号，可以利用 CSS 在<head>
标签中进行声明，对列表样式进行改变。
同样，使用 list-style-type 属性去掉默认标记，设置 margin 和 padding 属性为 0，为<li>
列表选项定义浮动效果，设置 text-decoration 属性 none。这里使用通配符“*”整体设置 

<style type="text/css">
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			
			}
			ul li ol li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
		</style>

  

8.1.2.3 二级菜单的隐藏和显示设计 

a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
				
			}

ul li a{
				background-color: #ff0000;
				color: #dddddd;
			}
			ul li ol li a{
				background-color: #dddddd;
				color: #ff0000;;
			}
			ul li a:hover,ul li a:active{
				border-bottom: #22aaff solid 5px;
			}
			ul li ol li a:hover,ul li ol li a:active{
				background-color: #ff0000;
				color: #dddddd;
				border-bottom: none  ;
			}

8.1.2.4 DIV样式的设计

完成以上关键步骤后，对内容所处的 div 样式进行设置，包括宽度、高度、边框和对其方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DIV样式的设计</title>
		<style type="text/css">
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul,li{
				float: left;
			}
			ul  li  ol  li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			#nav{
				width: 600px;
				height: 40px;
				background-color: lightcyan;
				border: 5px solid blue;
				margin: 0 auto;
			}
		</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.5 超链接样式的设计
利用 CSS 为列表超链接重新设置样式，例如，对超链接的 a：link 和 a： visited 进行设
置，表示超链接未被访问和已访问状态。然后将其 display 属性设置为 block，使得超链接成
为块级元素，这样才可以为超链接设置 80 像素的宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>超链接样式的设计</title>
		<style type="text/css">
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul,li{
				float: left;
			}
			ul  li  ol  li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			#nav{
				width: 600px;
				height: 40px;
				background-color: lightcyan;
				border: 5px solid blue;
				margin: 0 auto;
			}
			ul li a:link,a:visited{
				display: block;
				width: 80px;
				font-weight: 700;
				color: black;
				padding: 10px;
				text-align: center;
			}
		</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.6 鼠标事件

利用 CSS 为无序列表选项 1i： hover 和有序列表的 a：hover 进行样式设置，表示鼠标是停状态时的样式变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标事件</title>
		<style type="text/css">
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul,li{
				float: left;
			}
			ul  li  ol  li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			#nav{
				width: 600px;
				height: 40px;
				background-color: lightcyan;
				border: 5px solid blue;
				margin: 0 auto;
			}
			ul li a:link,a:visited{
				display: block;
				width: 80px;
				font-weight: 700;
				color: black;
				padding: 10px;
				text-align: center;
			}
			ul li a:hover,ul li a:active{
				border-bottom: #22aaff solid 5px;
			}
			ul li ol a:hover,ul li ol li a:active{
				background-color: #ff0000;
				color: #dddddd;
				border-bottom: none;
			}
		</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.2 纵向侧边导航栏


侧边菜单导航栏是网站设计中应用频率仅次于水平导航栏的导航设计，一般放置在首页
的左上角，普遍使用文字链接作为导航项，可以容纳很多链接。
如果导航菜单太长会增加用户的浏览难度，因此，侧边导航栏通常会跟出式子导航结合
使用，商城网站建设大多应用这种复合的导航设计

 

 


8.2.1.1导航栏的创建
普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级
元素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
在<an>的首尾标签之间使用<div>标签创建莱单范围，结合无序列表<ul>标签和列表选
项<b标签创建菜单选项。这里的超链接地址暂时设置为空链接，用户可根据实际情况改成
具体的 URL.地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏的创建</title>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>

 

 

8.2.1.2 DIV样式的设计

对导航栏所处的 div样式进行设置，包括宽度、边框和背景，同时对大标题文字的 CSS
进行设置，包括高度、行高、颜色和对齐方式。

	<style type="text/css">
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
			}
		</style>

 

 

8.2.1.3 列表样式的设计

此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用 list-3tyle-type 属性去掉
默认标记，设置 margin 和 padding 的属性值。并同时给列表选项添加背景颜色，使大小标题
容易区分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式的设计</title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #dddddd;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			ul li{
				border: #aaaaaa solid 2px;
				text-align: center;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<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>
			</div>
		</nav>
	</body>
</html>

 

8.2.1.4 超链接样式的设计
利用 CSS 为超链接重新设置样式，对超链接的a： 1hink 和a：visited 进行设置，表示超链
接未被访问和已访问状态。同时，利用 CSS 为 a： hover 和 a：active 进行样式设置，表示删
标悬停和活动链接状态时的样式变化。并且，将 display 属性设置为 block，使得超链接成为
块级元素，以及字体 CSS 样式的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向导航栏</title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #5555ff;
				padding: 10px;
			}
			h3{
				text-align: center;
				
			}
			ul{
				margin: 0;
				padding: 0;
				list-style: none;
				
			}
			ul li{
				border: #aaffff solid 2px;
				text-align: center;
				line-height: 40px;
			}
			a{
				display: block;
				/* border: #aaaaaa solid 2px; */
				text-align: center;
				line-height: 40px;
				background-color: #dddddd;
				color: #ff0000;
				text-decoration: none
			}
			a:hover,a:active{
				/* background-color: #ff0000;
				color: #dddddd; */
				background: url(../img/bg.JPG) no-repeat;
			}
		</style>
	</head>
	<body>
		<nav>
		<div id="nav">
		<h3 class="tit">所有商品分类</h3>
		<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>
		</div>
		</nav>
	</body>
</html>

 

 

 

 

8.2.2 出式子菜单导航栏的设计与实现

出式子莱单导航跟下拉子菜单导航一样，是网站设计中常见的子导航设计，只是出式子
莱单多用于侧边纵向导航栏。这种子菜单适用于多级别、内容庞杂的网站，可以让整个网站
设计更加整洁有序。

8.2.2.1 导航栏的创建

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航栏的创建</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.2.2.2 DIV样式的设计

对导航栏所处的 nav和文字的CSS样式进行设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DIV样式的设计</title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffa500;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

 

 

8.2.2.3 二级菜单的隐藏和显示设计
为了使有序列表的二级菜单隐藏起来，需要设置 display 属性为 none。
为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的 display 属性为block。
为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜
单的相对定位

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>二级菜单的隐藏与显示</title>
		<style type="text/css">
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffa500;
			}
			ul li {
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				left: 150px;
			}
			ul li ol a{
				display: block;
				width: 120px;
				background-color: #eeeeee;
				color: #00cc33;
			}
			ul li:hover ol{
				display: block;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

 

8.2.2.4 列表样式的设计

此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号，需要使用
list-style--type 属性去掉默认标记，设置 margin 和 padding 的属性值。并同时给列表选项添加
背景颜色，使大小标题容易区分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表样式设计</title>
		<style type="text/css">
			ul li {
				list-style-type: none;
			}
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffa500;
			}
			ul ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li {
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li ol a{
				display: block;
				width: 120px;
				background-color: #eeeeee;
				color: #00cc33;
			}
			ul li:hover ol{
				display: block;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.2.2.5 超链接样式的设计
利用 CSS 为超链接重新设置样式，对超链接的a： link 和a：visied 进行设置，表示超链
接未被访问和已访问状态。同时，利用 CSS 为a：hover和a：actie 进行样式设置，表示鼠
标悬停和活动链接状态时的样式变化。并且，将 display属性设置为 block，使得超链接成为
块级元素，以及字体 CSS 样式的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>超链接样式设计</title>
		<style type="text/css">
			ul li {
				list-style-type: none;
			}
			#nav{
				width: 150px;
				background-color: #aaccff;
				padding: 10px;
			}
			h3{
				text-align: center;
				color: #ffa500;
			}
			ul ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li {
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
			}
			ul li ol{
				display: none;
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li ol a{
				display: block;
				width: 120px;
				background-color: #eeeeee;
				color: #00cc33;
				text-decoration: none;
			}
			ul li:hover ol{
				display: block;
			}
			ul li a{
				display: block;
				width: 150px;
				text-decoration: none;
				background-color: #ffffff;
				color: #00cc33;
			}
			ul li a:hover,ul li a:active{
				background: url(img/bg2.JPG);
			}
			ul li ol a:hover,ul li ol a:active{
				background: #00cc33;
				color: #ffffff;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<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>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3 底部固定导航栏
底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不
是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不是
在PC端中，而是在移动端。如果在 PC 端中采用底部导航的形式，一般都是采用固定的
成。底部导航可以减少用户的使用成本，但对于结构复杂有二级或三级导航的网站，就不是
很合适。而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计
比较挑战用户的使用习惯。所以，很多网站在设计的时候首页导航会放在底部，其后的导航
就会固定到顶部。


8.3.1 导航栏的创建

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏的创建</title>
		<style type="text/css">
			
		</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.2 列表样式的设计

此时会带有<ul>元素的默认实心点标记，可以利用 list-style-type 属性去掉，同时设
置 mangin 和 padding属性。列表选项设置 float 属性，让列表元素能够在同一行显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式的设计</title>
		<style type="text/css">
		ul{
			list-style-type: none;
			margin: 0;
			padding: 0;
		}	
		li{
			width: 25%;
			float: left;
			line-height: 50px;
		}
		</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.3 菜单固定底部的设计
为了美化文字内容的外观，可以设置 div 的高度、宽度、背景、边框和文本对齐方式
等。为了使导航莱单始终处于页面的最上层，需要设置 z-index 属性的优先值。为了使导航
莱单固定于页面底部，需要设置位置属性 position 和各个方向的位置值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			a{	
				display: block;
				width: 80px;
				text-decoration: none;
				text-align: center;
				
			}
			/* 鼠标事件 背景色及文字颜色*/
			a:link,a:visited{
				background-color: #000000;
				color: #ffffff;
				
			}
			/* 鼠标移上去及 访问之后*/
			a:hover,a:active{
				background-color: #ffffff;
				color: #000000;
			}
			/* 底部导航栏 */
			.fix-footer{
				position: absolute;
				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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />v
		<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>
				<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">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			a{	
				display: block;
				width: 80px;
				text-decoration: none;
				text-align: center;
				
			}
			/* 鼠标事件 背景色及文字颜色*/
			a:link,a:visited{
				background-color: #000000;
				color: #ffffff;
				
			}
			/* 鼠标移上去及 访问之后*/
			a:hover,a:active{
				background-color: #ffffff;
				color: #000000;
			}
			/* 底部导航栏 */
			.fix-footer{
				position: absolute;
				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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />v
		<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>
				<li><a href="#"> 操作系统</a></li>
				<li><a href="#"> 服务器</a></li>
			</ul>
			</div>
		</nav>
	</body>
</html>

 

8.3.5 鼠标事件

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
			a{	
				display: block;
				width: 80px;
				text-decoration: none;
				text-align: center;
				
			}
			/* 鼠标事件 背景色及文字颜色*/
			a:link,a:visited{
				background-color: #000000;
				color: #ffffff;
				
			}
			/* 鼠标移上去及 访问之后*/
			a:hover,a:active{
				background-color: #ffffff;
				color: #000000;
			}
			/* 底部导航栏 */
			.fix-footer{
				position: absolute;
				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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />v
		<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>
				<li><a href="#"> 操作系统</a></li>
				<li><a href="#"> 服务器</a></li>
			</ul>
			</div>
		</nav>
	</body>
</html>

 

 

 

 

 8.4 综合案例——优名养生馆

<!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;
				 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:valid{
				 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: wheat;
			 }
			 .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="rifht" 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 主页的设计与实现 

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

 

 

 

小程序第八章总结
weixin_74878822的博客
05-10 1214
在“test” 表中添加id、title、content、image列,Bmob提供Number、String、Boolean、Date、File、Geopoint、Array、Object、Pointer、Relation共10种字段类型。首先需要获取更新后的Bmob. Object对象，将值修改后保存数据就可以了。从前端获取的数据添加到服务端数据表中，主要用Bmob提供的SDK对象实现。skip方法可以做到跳过查询的前多少条数据来实现分页查询的功能。为了获取某个数据表中的所有数据，我们可以通过。
微信小程序开发与运营第八章总结
2301_79625377的博客
05-11 759
Bmob 后端云专注于为移动应用提供一整套后端云服务，能帮助开发者免去几乎所有服务器端的编码工作，大幅度降低开发成本和开发时间。Bmob 提供了小程序软件开发工具包（ Software Development Kit , SDK )，让用户拥有强大的后端服务。嵌入 Bmob 小程序 SDK 后，开发工程师可以更加专注于编写前端代码和优化良好的用户体验，而不必担心后端的基础设施。Bmob 提供了成熟的 WebSocket 信道服务，降低了开发者使用 WebSocket 通信的门槛。
电路知识第八章总结集
01-18
本章电路知识将有益于硬件开发的同学，主要讲述的是在电路中运用广泛的相量法。
软件工程知识点总结第一章至第九章
05-09
该资源以思维导图的形式总结软件工程第一章至第九章的知识点，该总结不仅...第八章 面向对象设计 第九章 面向对象编程 这些知识点主要是根据自己的理解整理的，若有不清楚的地方可以私信，若有错误的地方，请批评指正。
【HTML】HTML 与 CSS 基础教程
qq_40205510的博客
06-05 560
作为 Java 工程师，掌握 HTML 和 CSS 也是需要的，它能让你高效与前端团队协作、调试页面元素，甚至独立完成简单页面开发。本文将用最简洁的方式带你掌握核心概念。
Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（八）：异步处理逻辑详解
Kooboo_china的博客
06-06 1393
本文通过具体示例展示了语音交互、图片上传、AI回复模拟和消息操作等场景的异步实现方案，包括语音API的非阻塞调用、FileReader的异步文件处理、setTimeout模拟网络延迟等技术细节...
css-塞贝尔曲线
hole_diss的博客
06-04 460
cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)语法：cubic-bezier(x1,y1,x2,y2)
04-初识css
q2430605716的博客
06-05 419
中要下载的文件时，他会一边下载一边继续解析，但是浏览器会等css加载完再渲染dom树==（面试可能会问）==2.搜索引擎原理：用爬虫获取网站，再根据搜索框匹配库里符合的网站。浏览器访问网站时，会先下载html文件，再从上往下解析文件内容。1.含义：在浏览器搜索时尽量让自己的网站靠前。浏览器代理加载的元素不能被更改。自己写的css样式可以被更改。3.优化方法：把重要信息放在。还可以用这种方式便于管理。，爬虫优先搜索这个内容。
vue项目引入tailwindcss
发渐稀的博客
06-06 1095
不同于 Bootstrap 或 Material UI，Tailwind。
CSS选择子元素
BillKu的博客
06-04 351
纯 CSS 只能。
前端开发面试题总结-CSS篇
weixin_60536169的博客
06-05 508
1.为什么谷歌默认可设置最小字体12px，特殊场景需要设置更小字体2.方式一CSS3的缩放p {注意：行内元素没有效果3.方式二zoom属性p {zoom:0.5;
【前端】掌握HTML/CSS宽高调整：抓住问题根源，掌握黄金法则
Hy_g_g_e_的博客
06-05 1149
首选- 避免padding/border影响布局计算移动端优先使用相对单位始终设置防止媒体元素溢出组合使用min/max-width 和弹性/网格布局行内元素（如<span>）需设为才能设置宽高。
css实现文字颜色渐变
weixin_45016440的博客
06-05 248
【代码】css实现文字颜色渐变。
CSS设置元素的宽度根据其内容自动调整
最新发布
HWL5679的博客
06-09 227
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。
在Vue或React项目中使用Tailwind CSS实现暗黑模式切换：从系统适配到手动控制
m0_46335150的博客
06-07 737
在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。本文将带你使用Tailwind CSS在React项目中实现两种暗黑模式控制方式：系统自动适配和手动切换。
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
卡拉米
06-06 1285
【摘要】本文介绍了一个旅游主题静态网站的设计与实现过程。网站采用HTML5+CSS3技术，兼容主流浏览器，包含首页、剧情介绍、角色介绍等二级页面。文章详细说明了网站布局结构、程序语言选择、素材处理方案及文件组成，并展示了部分HTML代码示例。同时为编程初学者提供了学习建议，推荐通过实践练习巩固基础语法。最后分享了获取更多前端开发资源的渠道，包括源码、模板和技术交流群等。
CSS中text-align: justify文本两端对齐
BillKu的博客
06-06 361
* 强制最后一行两端对齐 *//* 需要固定宽度 */text-align: justify;/* 关键属性 *//* 自动在单词内添加换行连字符 */⚠️ 避免在窄容器中使用（如手机屏幕），过大的单词间距会降低可读性。（如文章、新闻），能创建整洁的块状文本区域，提升可读性和专业感。：每行文本左右两端严格对齐容器边缘（类似报纸排版）。浏览器会自动调整单词/字符之间的间距，使文本的。：默认按左对齐处理（除非额外设置。），否则文本无分散空间。
vue在打包的时候能不能固定assets里的js和css文件名称
克里斯前端
06-06 341
摘要： 在Vue CLI项目中，可通过修改vue.config.js配置固定资源文件名：1) 设置filenameHashing:false关闭哈希值；2) 在configureWebpack中指定JS输出路径为js/[name].js；3) 在css.extract中配置CSS输出路径为css/[name].css。该方案适合vue-cli@3/4/5，但需注意关闭哈希可能导致缓存问题，需配合版本控制机制使用。若使用Vite需采用不同配置方式。（142字）
"设备管理与数据传送控制：操作系统第八章总结
本章主要介绍了设备管理的功能和任务、数据传送控制方式、中断技术、缓冲技术、设备分配、I/O控制系统、设备驱动程序等内容。 首先，在设备分类方面，根据使用特性可以将设备分为存储设备、输入输出设备、终端设备...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值