<!doctype html> <html> <head> <meta charset="utf-8"> <title>网站导航</title> <link href="main.css" rel="stylesheet" type="text/css"> <!--焦点图设置--> <script src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js"></script> <script type="text/javascript"> myFocus.set({ //此处id与后面一致 id:'picBox' }); </script> </head> <body> <div class="main"> <div class="headTop"> <div class="logo"><img src="http://img.mukewang.com/53edadad0001efe202000070.jpg"/> </div> <div class="list"> <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><!--headTop结束--> <!--此处id必须为picBox，与前面焦点图初始化的id一致--> <div class="ad" id="picBox"> <!--当图片没加载出来时的缓冲提示图--> <div class="loading"><img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" alt= "Loading..."></div> <!--图片列表外面必须有一个div， 其class必须为pic--> <div class="pic"> <ul> <li><img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg"></li> <li><img src="http://img.mukewang.com/53edad1600019ae910000310.jpg"></li> <li><img src="http://img.mukewang.com/53edad3e0001afad10000318.jpg"></li> </ul> </div> </div><!--ad结束--> <div class="scrollnews"> <div class="scrollnews_left"><a href="#">滚动新闻</a> </div> <div class="scrollnews_right"><a href="#">这是滚动新闻</a> </div> </div><!--scrollnews结束--> <div class="mid"> <ul> <li> <img src="http://img.mukewang.com/53edad54000119fb03300130.jpg" alt="玩转Bootstrap"> <a href="#">玩转Bootstrap</a> </li> <li> <img src="http://img.mukewang.com/53edad690001260a03300130.jpg" alt="企业网站实战"> <a href="#">企业网站实战</a> </li> <li class="right_pic"> <img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg" alt="JavaScript基础"> <a href="#">JavaScript基础</a> </li> </ul> </div><!--中间部分结束--> <div class="bot"> <div class="botLeft"> <div class="title"> <h2>新闻中心</h2></div> <!--外面加一个div盒子，中间的空隙才能表现出来--> <ul> <li> <div class="news_date"><p>8月23日</p></div> <div class="news_content"> <h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3> <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p> </div> </li> <li> <div class="news_date"><p>8月23日</p></div> <div class="news_content"> <h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3> <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p> </div> </li> <li> <div class="news_date"><p>8月23日</p></div> <div class="news_content"> <h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3> <p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p> </div> </li> </ul> </div><!--botLeft结束--> <div class="botMid"> <div class="title"> <h2>热门活动</h2> </div> <div class="botMid_list"> <a href="#"> <img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg" alt="活动"> </a> <ul> <li><a href="#">慕课网2048源码征集</a> </li> <li><a href="#">慕课网2048源码征集</a> </li> <li><a href="#">慕课网2048源码征集</a> </li> <li><a href="#">慕课网2048源码征集</a> </li> <li><a href="#">慕课网2048源码征集</a> </li> </ul> </div> </div><!--botMid结束--> <div class="botRight"> <div class="title"> <h2>联系我们</h2> </div> <div class="botRight_list"> <p>讲师招募<br> JoV<br> 电话：10086<br> QQ:360870202<br> E-mail:gobananas@163.com<br><br><br> 网站合作<br> JoV<br> 电话：10086<br> QQ:360870202<br> E-mail:gobananas@163.com </p> </div><!--botRight_list结束--> </div><!--botRight结束--> </div><!--尾部bot结束--> </div><!--主体main结束--> <div class="copyright"> <p>Copyright ? 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2</p> </div><!--copyright结束--> </body> </html>
@charset "utf-8"; /* CSS Document */ *{ margin:0; padding:0; font-size:12px; } body{ background:#f5f5f5; } li{ list-style:none; } a{ text-decoration:none; } .main{ width:1000px; margin:0 auto; } .headTop{ height:80px; background:#fff; } .logo{ float:left; width:200px; } .list{ float:left; } .list li { float:left; height:80px; line-height:80px; width:100px; text-align:center; } .list li a{ display:block; font-size:16px; font-family:"微软雅黑"; color:#000; bacground:#fff; } .list li a:hover, .list li a:active{ color:#fff; background:#be3948; } .ad{ height:310px; overflow:hidden; margin: 5px 0 20px 0; } .scrollnews{ height:30px; overflow:hidden;} .scrollnews_left{ float:left; background:#be3948; width:150px; text-align:center; } .scrollnews_right{ width:850px; background:#3e3e3e; float:left; } .scrollnews_right a{ padding-left: 20px; } .scrollnews_left a,.scrollnews_right a{ color:#fff; line-height:30px; font-size:15px; } .mid{ height:150px; margin:20px 0 20px 0; } .mid li { float:left; width:330px; height:130px; margin-right:5px; } .mid .right_pic{ margin-right:0; } .mid li a{ display:block; /*很重要，不然文字不能居中*/ color:#000; text-align:center; font-size: 15px; font-family: "微软雅黑"; } .bot{ margin-bottom:20px; height:290px; overfolw:hidden; } .botLeft,.botMid{ width: 330px; margin-right:5px; float: left; } .botRight{ margin-right:0; width: 330px; float: left; } .title { height: 35px; width: 100%; background-color: #be3948; } .title h2{ font-weight: normal; line-height:35px; color:#fff; padding-left:20px; font-size: 14px; } .botLeft ul li{ height:70px; margin:10px 0; } .news_date{ width:40px; height:50px; float:left; margin:10px 5px; background:#be3948; border-radius:5px; } .news_date p{ margin:8px 5px; font-size:14px; color:#fff; line-height:18px; } .news_content{ float: left; width: 260px; margin-top: 3px; margin-left: 10px; } .news_content h3{ margin-bottom: 10px; } .news_content h3 a{ color: #000; font-size: 13px; font-weight: bold; } .news_content p a{ line-height: 18px; font-size: 14px; color: #515151; } .botMid_list a img{ width: 290px; height: 120px; margin: 10px 20px 5px 20px; } .botMid_list li{ margin-left: 20px; } .botMid_list li a { color: #000000; font-size: 15px; font-weight: bold; line-height: 20px; } .botRight_list p{ font-size: 15px; font-family: "微软雅黑"; } .copyright{ width: 100%; height: 40px; background-color: #e8e8e8; } .copyright p{ line-height: 40px; text-align: center; color: #000; font-size: 16px; font-family: "微软雅黑"; font-weight: bold; }
这个网页代码终于完成了。现在发现写一个大的完整的网页不难，先把大结构确定好，再各部分细化确定，一点点来。
此代码涉及焦点图的制作。