H5——导航的制作、多个实例及效果

最新推荐文章于 2024-07-19 15:46:26 发布

Matutinal

最新推荐文章于 2024-07-19 15:46:26 发布

阅读量3.2k

点赞数 2

分类专栏： H5学习文章标签： css html

本文链接：https://blog.csdn.net/Matutinal/article/details/119645142

版权

本文介绍了H5中导航的制作方法，包括使用ul > li > a组合制作网页头部导航，div或p或a组合制作尾部导航。文中通过多个实例展示了不同鼠标滑过效果，如背景颜色和字体变化、英文转中文、背景渐变以及li元素位置调整等，强调了设计时应注意的细节，如避免使用padding导致的长度缩放问题，以及利用margin和vertical-align实现不同效果。最后，鼓励读者尝试创新，发挥想象创造更多独特的导航效果。

摘要由CSDN通过智能技术生成

导航的制作

网页的头部使用ul >li >a 的组合去写，网页的尾部导航推荐使用div或者p或者a的组合去写。

实例

1.基础样式（鼠标滑动过后背景和字体颜色都变化）

<style type="text/css">
			*{
				margin:0px auto;
				padding: 0;
			}
			ul,li,a{
				list-style-type: none;
				list-style: none;
				text-decoration: none;
			}
			div{
				margin:30px auto;
				width: 400px;
				height: 40px;
			}
			.uone{
				width: 400px;
				height: 40px;
				background-color: #DC143C;
			}
			.uone li{
				width: 80px;
				height: 100%;
				float:left;
				padding: 0 10px;
				text-align: center;
			}
			.uone li a{
				line-height: 40px;
				color: #fff;
			}
			.uone li:hover{
				background-color: #e4e4e4;
			}
			.uone li:hover a{
				color: #DC143C;
			}
		</style>
		
		<div>
			<ul class="uone">
				<li><