慕課網主頁
阿新 • • 發佈：2017-05-20
oat emp 產品 ctype copy center ava utf 16px
<!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"><imgsrc="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:[email protected]<br><br><br> 網站合作<br> JoV<br> 電話：10086<br> QQ:360870202<br> E-mail:[email protected] </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; }
這個網頁代碼終於完成了。現在發現寫一個大的完整的網頁不難，先把大結構確定好，再各部分細化確定，一點點來。
此代碼涉及焦點圖的制作。
慕課網主頁