Html&CSS学习之导航条练习
实现效果
如下图所示，鼠标移入时相应的选项背景变为红色
思路
1、通过无序列表新增4个相应的选项，选项中嵌套超链接。
2、设置CSS样式：
1️⃣ 清除浏览器自带的样式
2️⃣ 设置ul 清除样式，设置背景色，设置居中
3️⃣ 设置li 向左浮动，浮动导致父元素ul高度塌陷，通过overflow:hidden;解决高度塌陷问题。
4️⃣ 设置ul的宽度为父元素的80%，设置li的宽度为25%，将a转为块元素后，设置a的宽度为100%，设置文字居中等。
5️⃣ 通过伪类:hover实现鼠标移入红色背景的效果。
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>导航条</title>
<style type="text/css">
/* 清除浏览器默认格式 */
*{
margin: 0;
padding: 0;
}
/* 设置ul */
.nav{
/* 清除格式 ; */
list-style: none;
/* 设置背景色 */
background-color: #5d96f0;
/* 设置宽度 */
width: 80%;
/* 设置居中 */
margin: 20px auto;
overflow: hidden;
}
/* 设置无序列表格式 */
.nav li{
/* 设置向左浮动 */
float: left;
/* 设置宽度 */
width: 25%;
}
/* 设置超链接 */
.nav a{
/* a为内联元素，不能设置宽度，需将a转换为块元素 */
display: block;
/* 设置宽度 */
width: 100%;
/* 设置居中 */
text-align: center;
/* 设置内边距 */
padding: 5px 0;
/* 去除下划线 */
text-decoration:none;
/* 设置字体颜色 */
color: white;
/* 字体加粗 */
font-weight: bold;
}
/* 设置鼠标移入效果 */
.nav a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
Html&CSS学习之导航条练习
http://localhost:8091//archives/htmlcss-xue-xi-zhi-dao-hang-tiao-lian-xi