body只撑到导航那里，广告图片包含不了，导致底部在图片下面
慕粉18813290620
2016-08-22 23:26
<!Doctype html>
<html>
<head>
<title>新闻页</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
body,div,dl,dt,dd,ul,li,p,a,h1,h2,h3,h4,h5,h6,form,input,textarea{
margin:0;
padding: 0;
font-size: 12px;
}
a{
display: block;
text-decoration: none;
}
li{
list-style: none;
}
img{
border: none;
}
.clearfloat{
zoom:1;
}
.clearfloat:after{
clear: both;
display: block;
visibility: 0;
content: "";
height: 0;
}
body{
background-color:#f5f5f5;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
.top{
width: 100%;
background: url(../images/top_bg.jpg) repeat-x;
height: 27px;
}
.top li{
width: 70px;
float: right;
list-style-image: url(../images/li_bg.gif);
line-height: 27px;
}
.top a:link,.top a:visited{
color: #8e8e8e;
}
.top a:hover,.top a:active{
color: #900;
}
.main{
background: #fff;
}
.main{
height: 80px;
}
.main .logo .logo-left{
float: left;
width: 200px;
}
.main .logo .logo-right{
float: right;
width: 300px;
height:28px;
margin-top: 26px;
color: #8e8e8e;
}
.main .logo .logo-right img{
vertical-align: middle;
margin-right: 10px;
}
.tel{
font-family: "微软雅黑";
font-size: 16px;
color: #c00;
}
.nav{
height: 40px;
line-height: 40px;
}
.nav .nav-left{
width: 10px;
background: url(../images/nav_left.jpg) no-repeat;
}
.nav .nav-mid{
width: 980px;
background: url(../images/nav_bg.jpg) repeat-x;
}
.nav .nav-right{
width: 10px;
background: url(../images/nav_right.jpg) no-repeat;
}
.nav-left,.nav-mid,.nav-right{
float: left;
height: 40px;
}
.nav-mid-l,.nav-mid-r{
float: left;
}
.nav .nav-mid .nav-mid-l li {
float: left;
text-align: center;
}
.nav .nav-mid .nav-mid-l a{
width: 100px;
}
.nav .nav-mid .nav-mid-l a:link,.nav .nav-mid .nav-mid-l a:visited{
color: #fff;
font-size: 16px;
font-family: "微软雅黑"
}
.nav .nav-mid .nav-mid-l a:hover,.nav .nav-mid .nav-mid-l a:active{
color: #ff0;
font-size: 16px;
font-family: "微软雅黑"
}
.nav .nav-mid .nav-mid-l{
width: 680px;
}
.nav .nav-mid .nav-mid-r{
width: 300px;
}
.nav .nav-mid .nav-mid-r .search-txt{
width: 165px;
height: 25px;
margin-top: 5px;
background: url(../images/search.jpg) no-repeat right center;
background-color: #fff;
padding-right: 25px;
border:1px solid #fff;
}
.ad{
height: 310px;
overflow: hidden;
}
.content{
height: 250px;
background: #fff;
margin: 5px 0;
}
.news,.course,.sidebar{
float: left;
height: 250px;
}
.news{
width: 340px;
border:1px solid #e8e8e8;
}
.content .title{
height: 35px;
border-bottom: 2px solid #e8e8e8;
line-height: 35px;
}
.content .title .title-left{
float: left;
height: 35px;
width: 70%;
font-size: 14px;
font-weight: bold;
text-indent: 2em;
color: #786f66;
}
.content .title .title-right{
float: right;
margin-right: 1em;
color: #786f66;
}
.content .news-pic{
height: 80px;
margin-top:10px;
line-height: 22px;
}
.content .course .course-pic{
height: 110px;
}
.content .news-pic a{
color: #c00;
}
.content .news-pic img{
float: left;
margin:5px;
}
.news .news-list{
margin: 20px 8px;
}
.news .news-list li{
height: 22px;
line-height: 22px;
border-bottom: 1px dotted #e8e8e8;
background: url(../images/list.jpg) no-repeat;
text-indent: 1em;
}
.news .news-list a{
width: 70%;
font-size: 14px;
color: #c00;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.news .news-list a:link,.news .news-list a:visited{
color: #000;
}
.news .news-list a:hover,.news .news-list a:active{
color: #f00;
}
.news .news-list .date{
color: #999;
float: right;
}
.course{
width: 410px;
border:1px solid #e8e8e8;
margin: 0 7px;
}
.course-type{
clear: both;
height: 37px;
width: 372px;
background: url(../images/product_type_bg.jpg) no-repeat;
margin: 20px auto;
}
.course-type li{
float: left;
line-height: 37px;
margin: 0 15px;
text-align: center;
}
.sidebar{
width: 230px;
border:1px solid #e8e8e8;
}
.sidebar-ad{
height: 55px;
border:1px solid #e8e8e8;
margin-top: 10px;
}
.video{
height: 140px;
}
.footer{
margin-top:5px;
width: 100%;
height: 180px;
background: #e8e8e8;
padding-top: 20px;
}
.footer .box{
float: left;
width: 200px;
height: 180px;
text-align: center;
line-height: 30px;
background: url(../images/line.png) no-repeat right center;
color: #999;
}
.footer .box h2{
font-size: 18px;
}
.footer .box h2 ul li{
font-size: 14px;
}
</style>
</head>
<body>
<div class="top">
<div class="wrap clearfloat">
<ul class="clearfloat">
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location,document.title);">加入收藏</a></li>
<li><a href="#" onclick="SetHome(window.location);">设为首页</a></li>
</ul>
</div>
</div><!-- top结束 -->
<div class="main wrap">
<div class="logo clearfloat">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo" />
</div>
<div class="logo-right">
<img src="images/tel.jpg" alt="tel"/>24小时服务热线：
<span class="tel">123-456-7890</span>
</div>
</div><!-- logo结束 -->
<div class="nav">
<div class="nav-left"></div>
<div class="nav-mid clearfloat">
<div class="nav-mid-l">
<ul class="clearfloat">
<li><a href="#">首页</a></li>
<li><a href="list.html">关于慕课</a></li>
<li><a href="list.html">新闻动态</a></li>
<li><a href="list.html">课程中心</a></li>
<li><a href="list.html">在线课程</a></li>
<li><a href="list.html">人才招聘</a></li>
</ul>
</div>
<div class="nav-mid-r">
<form action="" method="post">
<input type="text" class="search-txt" />
</form>
</div>
</div>
<div class="nav-right"></div>
</div><!-- nav end -->
<div class="ad" style="height:243px;">
<img src="images/ad.jpg" alt="ad" />
</div><!-- picBox end -->
</div><!-- main end -->
<div class="footer">
<div class="wrap clearfloat ">
<div class="box">
<h2>关于</h2>
<ul>
<li>基础故事</li>
<li>联系我们</li>
<li>加入我们</li>
<li>版权声明</li>
</ul>
</div>
<div class="box">
<h2>关于</h2>
<ul>
<li>基础故事</li>
<li>联系我们</li>
<li>加入我们</li>
<li>版权声明</li>
</ul>
</div>
<div class="box">
<h2>关于</h2>
<ul>
<li>基础故事</li>
<li>联系我们</li>
<li>加入我们</li>
<li>版权声明</li>
</ul>
</div>
<div class="box">
<h2>关于</h2>
<ul>
<li>基础故事</li>
<li>联系我们</li>
<li>加入我们</li>
<li>版权声明</li>
</ul>
</div>
<div class="box">
<h2><img src="images/weixin.png" alt="weixin"/>微信关注</h2>
<ul>
<li><img src="images/qrcode.jpg" alt="code"/></li>
</ul>
</div>
</div>
</div> --><!-- footer end--!>
</body>
</html>
1回答
-
- 慕粉18813290620
- 2016-08-22 23:44:50
找到原因了
企业网站综合布局实战
157038 学习 · 2143 问题
相似问题