练习写完了，有大神愿意看看有没有要优化的地方
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" rel="stylesheet"/>
<script type="text/javascript">
myFocus.set({
id:'picBox'
});
</script>
<style>
*{margin:0;
padding:0;
}
body{font-family:"微软雅黑";}
.content{
width:1000px;
margin:0 auto;
}
.top{
width:1000px;
height:70px;
margin:3px 0;
}
.top-left{
width:200px;
float:left;
}
.top-right{
float:left;
}
.top-right li{
list-style:none;
float:left;
}
.top-right li a{
text-decoration:none;
color:#000;
display:block;
margin:0 13px;
width:100px;
font-size:20px;
text-align:center;
line-height:70px;
}
.top-right li a:hover{
text-decoration:none;
color:#fff;
background-color:#c93849;
}
.ad{
height:310px;
}
.mid-title{
font-size:18px;
height:40px;
line-height:40px;
color:#fff;
margin:20px 0;
}
.mid-title-left{
float:left;
background-color:#c93849;
width:150px;
text-align:center;
}
.mid-title-right{
float:left;
background-color:#333;
width:850px;
}
.mid-title-right a{
color:#fff;
text-decoration:none;
}
.mid-box{
width:1000px;
height:151px;
}
.mid-box a:link,.mid-box a:visited{
color:#333;
text-decoration:none;
}
.mid-box a:hover,.mid-box a:active{
color:#c93849;
text-decoration:none;
}
.mid-box1{
float:left;
}
.mid-box2{
float:left;
margin:0 5px;
}
.mid-box3{
float:left;
}
.mid-box-text{
border:1px solid #CCC;
text-align:center;
font-size:14px;
}
.main{
width:1000px;
height:261px;
margin:20px 0 5px 0;
font-size:14px;
}
.main-box1{
width:330px;
float:left;
}
.main-box2{
width:330px;
float:left;
margin:0 5px;
}
.main-box3{
width:330px;
float:left;
}
.main h3 {
padding-left:20px;
background-color:#c93849;
font-size:16px;
font-weight:normal;
height:40px;
line-height:40px;
}
.main h3 a{
color:#fff;
text-decoration:none;
}
.main-box1 ul{
border:1px solid #ccc;
}
.main-box1 li{
list-style:none;
border-bottom:1px solid #ccc;
}
.main-box1 .data{
float:left;
background-color:#c93849;
color:#fff;
margin:0 5px;
height:38px;
width:32px;
text-align: left;
border-radius: 4px;
padding:5px 5px;
margin-top:5px;
}
.main-box1 h4{
margin-bottom:5px;
}
.mian-box-text{
margin:5px auto;
}
.mian-box-text a:link,.mian-box-text a:visited{
color:#333;
text-decoration:none;
}
.mian-box-text a:hover,.mian-box-text a:active{
color:#c93849;
text-decoration:none;
}
.main-box2 ul{
border:1px solid #ccc;
}
.main-box2 img{
width:328px;
height:150px;
}
.main-box2 li{
list-style:none;
margin:3px auto;
}
.list li a:link,.list li a:visited{
color:#333;
text-decoration:none;
}
.list li a:hover,.list li a:active{
color:#c93849;
text-decoration:none;
}
.main-box3 .p{
border:1px solid #ccc;
padding:5px 10px;
}
.bottom{
background-color:#CCC;
width:1000px;
height:60px;
text-align:center;
line-height:80px;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<div class="top-left"><a href="#"><img src="images/logo.jpg" alt="慕课网"/></a></div>
<div class="top-right">
<ul>
<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><!--top end-->
<div class="ad" id="picBox">
<div class="loading"><img src="images/loading.gif" alt="图片加载中"/></div>
<div class="pic">
<ul>
<li><a href="#"><img src="images/ad2.jpg"/></a></li>
<li><a href="#"><img src="images/ad3.jpg"/></a></li>
<li><a href="#"><img src="images/ad4.jpg"/></a></li>
</ul>
</div>
</div><!--ad end-->
<div class="mid-title">
<div class="mid-title-left">滚动新闻</div>
<div class="mid-title-right"><marquee direction="right" onMouseOver="this.stop()" onMouseOut="this.start()"><a href="#">这是滚动新闻</a></marquee></div>
</div><!--mid-title end-->
<div class="mid-box">
<div class="mid-box1">
<div><a href="#"><img src="images/bs.jpg"/></a></div>
<div class="mid-box-text"><a href="#">玩转BootStrap</a></div>
</div>
<div class="mid-box2">
<div><a href="#"><img src="images/css.jpg"/></a></div>
<div class="mid-box-text"><a href="#">企业网站案例</a></div>
</div>
<div class="mid-box3">
<div><a href="#"><img src="images/js.jpg"/></a></div>
<div class="mid-box-text"><a href="#">JavaScript基础</a></div>
</div>
</div><!--mid-box end-->
<div class="main">
<div class="main-box1">
<h3 class="main-box-title"><a href="#">新闻中心</a></h3>
<ul>
<li>
<div class="data">8月<br />23日</div>
<div class="mian-box-text"><h4>学习计划之“Android”攻城狮养成</h4><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></div></li>
<li>
<div class="data">8月<br />23日</div>
<div class="mian-box-text"><h4>学习计划之“Android”攻城狮养成</h4><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></div></li>
<li>
<div class="data">8月<br />23日</div>
<div class="mian-box-text"><h4>学习计划之“Android”攻城狮养成</h4><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></div></li>
</ul>
</div>
<div class="main-box2">
<h3 class="main-box-title"><a href="#">热门活动</a></h3>
<ul>
<a href="#"><img src="images/2048.jpg"/></a>
<div class="list">
<li><a href="#">慕课网2048游戏源码征集</a></li>
<li><a href="#">慕课网2048游戏源码征集</a></li>
<li><a href="#">慕课网2048游戏源码征集</a></li>
</div>
</ul>
</div>
<div class="main-box3">
<h3 class="main-box-title"><a href="#">联系我们</a></h3>
<div class="p"><p>讲师招募<br />邹同学<br />电话：18911888156<br />QQ:576264119<br />E-mail:daisy@imooc.com</p><br />
<p>网站合作<br />昌同学<br />电话：132261771103<br />QQ:1059809142<br />E-mail:livang@imooc.co</p></div>
</div>
</div><!--main end-->
<div class="bottom">
Copyright © 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2
</div><!--bottom end-->
</div><!--content end-->
</body>
</html>
qq_果汁分ni半_034622401回答
-
喂你还欠我一个拥抱
这么长还没有代码框，真的很累的~
随时随地看视频慕课网APP
Html/CSS
JavaScript