abstract:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="shortcut icon" type="image/x-icon" href="image/LOG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="image/LOGO.jpg">
<title>网页骨架初稿</title>
<style TYPE="text/css">
*{
margin: 0;
padding: 0;
}
.cl{
clear: both;
}
.inner_c{
margin: 0 auto;
}
.head .nav{
/*background-color: brown;*/
width:1200px;
height: 40px;
}
.head .nav ul{
list-style: none;
}
.head .nav ul li{
float: left;
width:49px;
height: 40px;
line-height: 40px;
text-align: center;
padding-right:1px;
}
.head .nav ul li a{
display: inline-block;
width:47px;
color:#000;
font:12px "宋体";
/* padding-right:10px;
padding-left: 12px;*/
border-right: 1px solid #ccc;
text-decoration: none;
}
.head .nav ul li.first_li a{
border-left:1px solid #ccc;
}
.head .nav ul li a:hover{
/*background-color: #ccc;*/
text-decoration: underline;
color: red;
position: relative;
top:1px;
left:1px;
}
.banner_bg{
height:465px;
/*background: url("image/banner_bg.jpg") no-repeat center top;*/
background-color:#FBB91C;
}
.banner_bg .ad{
margin: 0 auto;
width: 1200px;
height: 465px;
background-color: #ccc;
}
.banner_bg .guanggao{
margin: 0 auto;
width: 1200px;
height: 115px;
background-color:red;
}
.banner_bg .classify{
width: 200px;
height: 350px;
background-color:#000000;
opacity: 0.5;
}
.banner_bg .classify ul{
list-style:none;
}
.banner_bg .classify ul li{
height: 34px;
/*display: inline-block;?*/
color:#fff;
border-bottom: 1px solid #ccc;
text-align: center;
position: relative;
}
.banner_bg .classify ul li a{
text-decoration: none;
color:#fff;
line-height: 35px;
font-size: 15px;
}
.banner_bg .classify ul li .nvzhuang{
display: none;
width:1000px;
height: 350px;
background-color:red;
position: absolute;
left:200px;
top:0px;
}
.banner_bg .classify ul li:hover{
background-color: #fff;
color:blue;
}
.banner_bg .classify ul li:hover a{
color: blue;
font-family:"Microsoft YaHei","Simsun";
font-weight: bold;
}
.banner_bg .classify ul li:hover .nvzhuang{
display: block;
}
.content{
width:1200px;
height:600px;
background-color:greenyellow;
}
.content .left{
float: left;
width: 320px;
height: 580px;
margin:10px 10px;
background-color: #FFCCFF;
}
.content .right{
float: left;
width: 850px;
height: 580px;
margin:10px 10px 10px 0;
background-color: #FFCCFF;
}
.foot{
margin-top: 50px;
height: 50px;
background: #33CCFF;
}
</style>
</head>
<body>
<!--head区域-->
<div class="head">
<div class="nav inner_c">
<ul>
<li class='first_li'><a href="">新闻</a></li>
<li><a href="">体育</a></li>
<li><a href="">NBA</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>
<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>
<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>
<li><a href="">彩票</a></li>
<li><a href="">车险</a></li>
<li><a href="">海淘</a></li>
<li><a href="">理财</a></li>
</ul>
</div>
<div class="cl"></div>
</div>
<div class="banner_bg">
<div class="ad">
<div class="guanggao">广告</div>
<div class="classify">
<ul>
<li>
<a href="#">女装</a> / <a href="#">内衣</a>
<div class="nvzhuang">详细内容</div>
</li>
<li>
<a href="#">男装</a> / <a href="#">运动户外</a>
</li>
<li>
<a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a>
</li>
<li>
<a href="#">美妆</a> / <a href="#">个人护理</a>
</li>
<li>
<a href="#">腕表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a>
</li>
<li>
<a href="#">手机</a> / <a href="#">数码</a> / <a href="#">电脑办公</a>
</li>
<li>
<a href="#">母婴玩具</a>
</li>
<li>
<a href="#">零售</a> / <a href="#">茶酒</a> / <a href="#">进口食品</a>
</li>
<li>
<a href="#">生鲜水果</a>
</li>
<li>
<a href="#">大家电</a> / <a href="#">生活电器</a>
</li>
</ul>
</div>
</div>
<!-- 清除浮动 -->
<div class="cl"></div>
</div>
<div class="content inner_c">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="foot"></div>
</body>
</html>
Correcting teacher:天蓬老师Correction time:2019-04-13 18:36:10
Teacher's summary:代码很长, 但仿的像不像看不到效果, 为什么不放张图呢?