<!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="#">企業(yè)網站案例</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”攻城獅養(yǎng)成</h4><a href="#">想成為Android攻城獅?想開發(fā)一款專屬App?沒有任何基礎的你,應該從何學起?</a></div></li>? ? ? ? ? ? ? ? ?<li>? ? ? ? ? ? ? ? ? <div class="data">8月<br />23日</div>? ? ? ? ? ? ? ? ? <div class="mian-box-text"><h4>學習計劃之“Android”攻城獅養(yǎng)成</h4><a href="#">想成為Android攻城獅?想開發(fā)一款專屬App?沒有任何基礎的你,應該從何學起?</a></div></li>? ? ? ? ? ? ? ? ?<li>? ? ? ? ? ? ? ? ? <div class="data">8月<br />23日</div>? ? ? ? ? ? ? ? ? <div class="mian-box-text"><h4>學習計劃之“Android”攻城獅養(yǎng)成</h4><a href="#">想成為Android攻城獅?想開發(fā)一款專屬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>
練習寫完了，有大神愿意看看有沒有要優(yōu)化的地方
qq_果汁分ni半_03462240
2017-04-21 23:55:52
