摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>页面导航布局</title><meta name="keywords" content="页面导航布局"><meta name="
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面导航布局</title>
<meta name="keywords" content="页面导航布局">
<meta name="description" content="页面导航布局">
<meta name="author" content="lijinfu">
<link rel="shortcut icon" type="image/x-icon" href="http://xmn-xdm.com/img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css">/*由于是作业实测运行就不采用外部样式了*/
*{padding: 0px;margin: 0px;}
.ZK_top1{
width: 640px;height: 108px;background-color: pink;
position: relative;top: 0px;
border-bottom: solid #ccc;
}
input{
width: 510px;height: 70px;background-color: rgb(237,237,237);
position: absolute;top:19px;left: 30px;
border-radius:15px;border:none;outline:none;
padding-left: 70px;
font-size: 18px;
background-image: url(https://mmbiz.qpic.cn/mmbiz_png/y81G2FicMESBhbA03X46rpFUrywS8QGetaichgy2ezMf1XsKe1yibsWLkolckNJVSnBr2jTxbUsuW0eOTbZ1agKmQ/0?wx_fmt=png);
background-repeat: no-repeat;
background-position: 10px 10px ;/*搜索图标的实现*/
}
.ZK_left{
width: 120px;
height: 680px;
background-color: pink;
}
.left_li{
font-size: 20px;
position: absolute;
list-style: none;
width: 120px;height: 60.91px;
text-align: center;
}
ul li{
margin-top:20px;
letter-spacing: 5px;
font-size: 25px;
line-height: 45px;
}
a{
text-decoration: none;
color: black;
}
ul li:hover{
background-color: white;
}
.weizhuang{
width: 120px;height:45px;background-color: green;
font-size: 10px;color: yellow;text-align: center;
float: right;
display: none;
}
ul li:hover .weizhuang{
display: block;
}
.ZK_content{
width: 520px;height: 680px;background:url(http://t00img.yangkeduo.com/goods/images/2019-01-17/d84f025e799a3b3e0636767360a482c6.jpeg);
position: absolute;left: 120px;top:111px;
}
.footer{width: 640px;height: 35px;background-color: #ccc;
padding-top: 10px;
}
.footer_a{
margin: 40px;text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<div>
<form action="">
<input type="text" name="inputscontent" placeholder="打底裤女加绒"/>
</form>
</div>
<div>
<ul>
<li><a href="">汽车</a>
<div>买点汽车配件</div>
</li>
<li><a href="">内衣</a><div>买件内衣保暖</div></li>
<li><a href="">美妆</a><div>买支口红女友</div></li>
<li><a href="">女装</a><div>买件衣服给她</div></li>
<li><a href="">母婴</a><div>给宝贝买罐奶粉</div></li>
<li><a href="">海淘</a><div>买遍全球</div></li>
<li><a href="">食品</a><div>开心吃货买买</div></li>
<li><a href="">百货</a><div>生活必备用品</div></li>
<li><a href="">健康</a><div>健康最重要</div></li>
<li><a href="">男装</a><div>给男友买件衣服</div></li>
</ul>
</div>
<div>
</div>
<div>
<a href="">首页</a>
<a href="">推荐</a>
<a href="">搜索</a>
<a href="">聊天</a>
<a href="">个人中心</a>
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-17 09:10:49
老师总结：写的还是很不错 导航布局在项目中这是必要的 课后一定要多练习才可以哦
