Web前端小例子——简单导航栏
写一个导航栏: 使用ul、li、a标签；
步骤：
1:ul去除默认属性
2:li 漂浮
3:a变为块级元素(点击整个区域都可链接)
实现上下居中：可以塞泡沫（填充，这样会增加整个模型的高，要在其他地方减掉）、也可以塞空白div；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* 媒体查询 根据 用户设备的屏幕尺寸来显示, */
#all { width: 80%; height: 550px; background-color: pink;
margin: auto;}
#nav{height: 100px; background-color: lightblue; }
#mid{height: 350px; background-color: gray;}
#mid #midleft{width: 20%; height:350px ; background-color: red; float: left;}
#mid #midmid{width: 70%; height:350px ; background-color: lime;float: left;}
#mid #midright{width: 10%; height:350px ; background-color: khaki;float: left;}
#foot{height: 100px; background-color: yellow;}
@media only screen and (max-width:1400px ) {
#all{width: 80%;}
}
@media only screen and (max-width:700px ) {
#all{width: 100%;}
}
/* ---------------------------------
导航栏: UL LI a 导航栏
1:UL 去除默认属性
2:li 漂浮
3:a变为块级元素
*/
#all ul{ margin: 0px; padding: 0px; list-style-type: none;
height: 60px; background-color: #C71585;}
#all li{ float: left; width: 20%;height: 60px;}
#all ul li a{display: block;height: 45px; text-align: center; font-size: 22px;
font-family: "courier new"; font-weight: 700; color: white; text-decoration: none;
/* 塞泡沫 */
padding-top:15px;
border-right: 2px solid white;
}
#all ul li a#a1{background-color: yellow;}
#all ul li a#a2{background-color: forestgreen;}
#all ul li a:hover {background-color: crimson;}
#all ul li a#a1:hover {background-color: gray;}
#all ul li a#a2:hover {background-color: gray;}
</style>
</head>
<body>
<div id="all">
<div id="nav">
<ul>
<li><a href="float.html" id="a1" target="_blank">Main</a></li>
<li><a href="float.html" id="a2">Java</a></li>
<li><a href="float.html">用户配置</a></li>
<li><a href="float.html">email</a></li>
<li><a href="float.html">其他</a></li>
</ul>
</div>
<div id="mid">
<div id="midleft"></div>
<div id="midmid"></div>
<div id="midright"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>手机扫一扫
移动阅读更方便
你可能感兴趣的文章