好心人帮我检查一下代码！看看有没有什么可以改进的，虽然完成了，但是感觉代码写的很烂！
孙行者_
2015-12-03 15:28
<!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>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class="wrap">
<div class="nav">
<div class="nav-left">
<img src="http://img.mukewang.com/53edadad0001efe202000070.jpg"/>
</div><!--nav-left结束-->
<div class="nav-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><!--nav-right结束-->
</div><!--nav结束-->
<div class="banner">
<img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg"/>
</div><!--banner结束-->
<div class="scroll-news">
<div class="scroll-news-left"><a href="#">滚动新闻</a></div>
<div class="scroll-news-right"><a href="#">这是滚动新闻</a></div>
</div><!--scroll-news结束-->
<div class="pic">
<div class="pic-left">
<img src="http://img.mukewang.com/53edad54000119fb03300130.jpg"/>
<div class="pic-left-title"><a href="#">玩转BootStrap</a></div>
</div><!--pic-left结束-->
<div class="pic-mid">
<img src="http://img.mukewang.com/53edad690001260a03300130.jpg"/>
<div class="pic-mid-title"><a href="#">企业网站实践</a></div>
</div><!--pic-mid结束-->
<div class="pic-right">
<img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg"/>
<div class="pic-right-title"><a href="#">JavaScript基础</a></div>
</div><!--pic-right结束-->
</div><!--pic结束-->
<div class="main">
<div class="news">
<div class="news-title">
<h2><a href="#">新闻中心</a></h2>
</div><!--news-title结束-->
<div class="news-content">
<div class="news-content-up">
<div class="news-content-date"><p>8月23日</p></div>
<div class="news-contents">
<h3><a href="#1">学习计划之"Android攻城狮初养成"</a></h3>
<p><a href="#1">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
</div><!--news-contents-->
</div><!--news-content-up结束-->
<div class="news-content-mid">
<div class="news-content-date"><p>8月23日</p></div>
<div class="news-contents">
<h3><a href="#1">学习计划之"Android攻城狮初养成"</a></h3>
<p><a href="#1">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
</div><!--news-contents-->
</div><!--news-content-mid结束-->
<div class="news-content-down">
<div class="news-content-date"><p>8月23日</p></div>
<div class="news-contents">
<h3><a href="#1">学习计划之"Android攻城狮初养成"</a></h3>
<p><a href="#1">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
</div><!--news-contents-->
</div><!--news-content-down结束-->
</div><!--news-content结束-->
</div><!--news结束-->
<div class="course">
<div class="course-title">
<h2><a href="#">热门活动</a></h2>
</div><!--course-title结束-->
<div class="course-pic">
<img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg"/>
<p><a href="#">慕课网2048游戏源码征集</a></p><p><a href="#">慕课网2048游戏源码征集</a></p><p><a href="#">慕课网2048游戏源码征集</a></p><p><a href="#">慕课网2048游戏源码征集</a></p><p><a href="#">慕课网2048游戏源码征集</a></p>
</div>
</div>
<div class="sidebar">
<div class="sidebar-title">
<h2><a href="#">联系我们</a></h2>
</div><!--sidebar-title结束-->
<div class="sidebar-content-up">
<ul>
<li>讲师招募</li>
<li>邹同学</li>
<li>电话：18911888956</li>
<li>QQ：576264119</li>
<li>E-mail:daysy@imooc.com</li>
</ul>
</div>
<div class="sidebar-content-down">
<ul>
<li>网站合作</li>
<li>吕同学</li>
<li>电话：13261771203</li>
<li>QQ：1059809142</li>
<li>E-mail:lvyang@imooc.com</li>
</ul>
</div>
</div>
</div><!--main结束-->
<div class="copyright">
<p>Copyright © 2015imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
</div>
</div><!--wrap结束-->
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;font-family:"微软雅黑";text-decoration:none;}
body{background:#F5F5F5;}
.wrap{width:1000px;background:#FFF;margin:0 auto;}
.nav{width:100%;height:70px;}
.nav-left{width:200px;float:left;}
.nav-right{width:600px;float:left;font-size:18px;padding-left:10px;}
.nav-right li{list-style-type:none;float:left;width:100px;line-height:70px;text-align:center;}
.nav-right a{text-decoration:none;color:#000;width:100%;}
.nav-right a:hover{color:#333;background-color:#be3948;display:inline-block;}
.banner{width:100%;margin-top:10px;}
.scroll-news{width:100%;height:50px;margin:10px auto;font-size:18px;}
.scroll-news-left{width:150px;background-color:#be3948;}
.scroll-news-right{width:830px;background-color:#333;}
.scroll-news-left,.scroll-news-right{line-height:50px;float:left;padding-left:10px;}
.scroll-news-left li,.scroll-news-right li{list-style-type:none;text-align:center;}
.scroll-news-left a,.scroll-news-right a{color:#FFF;}
.scroll-news-left a:hover,.scroll-news-right a:hover{color:#A52A2A;}
.pic{width:100%;height:130px;text-align:center;margin:10px auto;}
.pic-left,.pic-mid,.pic-right{width:330px;float:left;}
.pic-mid,.pic-right{padding-left:5px;}
.pic-left-title,.pic-mid-title,.pic-right-title{font-size:18px;padding-top:5px;}
.pic-left a,.pic-mid a,.pic-right a{color:#000;}
.pic-left a:hover,.pic-mid a:hover,.pic-right a:hover{color:#333;}
.main{width:100%;height:350px;margin-top:40px;}
.news,.course,.sidebar{width:330px;height:350px;float:left;}
.news-title{width:100%;height:50px;font-size:14px;background-color:#be3948;}
.news-title h2,.course-title h2{padding-left:20px;line-height:50px;}
.news-title a,.course-title a{color:#FFF;}
.news-content-up,.news-content-mid,.news-content-down{width:100%;height:100px;border-bottom:1px dotted #333;}
.news-content-date{background-color:#be3948;width:60px;height:70px;border-radius:10px;margin-top:15px;}
.news-content-date p{margin:5px;margin-left:10px;font-size:20px;color:#fff;}
.news-contents{width:240px;padding-left:10px;font-size:12px;line-height:20px;}
.news-contents,.news-content-date{float:left;margin-left:10px;}
.news-contents h3{font-size:14px;font-family:"宋体";text-align:center;line-height:30px;}
.news-contents a,.course-pic a{color:#000;}
.news-contents a:hover,.course-pic a:hover{color:#333;}
.course-title{width:100%;height:50px;font-size:14px;background-color:#be3948;margin-left:5px;}
.course-pic{width:100%;height:300px;}
.course-pic img{height:150px;width:300px;margin:20px;}
.course-pic p{font-size:14px;height:20px;line-height:20px;margin-left:20px;}
.sidebar-title{width:100%;height:50px;font-size:14px;background-color:#be3948;margin-left:10px;}
.sidebar-title h2{padding-left:20px;line-height:50px;}
.sidebar-title a{color:#FFF;}
.sidebar-content-up{margin:20px 0;}
.sidebar-content-up li,.sidebar-content-down li{list-style-type:none;margin-left:20px;font-size:14px;}
.copyright{width:100%;height:50px;background-color:#e8e8e8;margin-top:10px;}
.copyright p{line-height:50px;text-align:center;}
1回答
-
- 木子舟义
- 2015-12-03 15:44:23
怎么说的，就是写css的时候要考虑到复用性 比如玩转bootStrp 企业网站实践 等 那几个在真正的项目中是通过数据库中的数据 再通过后台循环输出到页面中的（并不是说你的代码有问题），我们所做的是页面排版，防止后台输出到界面的数据混乱 和 浏览器间的兼容，和利用javaScript制作一些让用户喜爱的并且能简化用户操作的交互效果，还有就是优化性能 等等，要学的还很多哦~加油。
企业网站综合布局实战
157038 学习 · 2157 问题
相似问题