html5+css3pc端固定布局，完成首頁
此時我們的首頁就完成了
首頁效果
其他頁面我就不做了，原理相同，做其他頁面時將頭尾css分離調用即可
大綱算法
我們看看大綱算法比較清晰，說明符合規則
html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瓢城旅行社</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--導航--> <header class="dao-hang"> <div class="dao-hang2"> <h1 class="log">瓢城旅行社</h1> <nav> <h2>網站導航</h2> <ul> <li class="dao-hang-lie-biao"><h3><a href="index.html">首頁</a></h3></li> <li class="dao-hang-lie-biao"><h3><a href="#">旅游資訊</a></h3></li> <li class="dao-hang-lie-biao"><h3><a href="#">機票訂購</a></h3></li> <li class="dao-hang-lie-biao"><h3><a href="#">風景欣賞</a></h3></li> <li class="dao-hang-lie-biao"><h3><a href="#">公司簡介</a></h3></li> </ul> </nav> </div> </header> <!--搜索區域--> <div class="sou-suo"> <h2>站內搜索</h2> <div class="sou-suo2"></div> <div class="sou-suo3"> <input type="text" placeholder="請輸入搜索內容"> <button>搜索</button> </div> </div> <!--主體--> <section class="zhu-ti"> <div class="zhu-ti2"> <h2>熱門旅游</h2> <p>國內旅游、國外旅游、自助旅游、自駕旅游、油輪簽證、主題旅游等各種最新熱門旅游推薦</p> </div> <div class="tu"> <img src="img/tour1.jpg"> <h3>曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游</h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度70%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour2.jpg"> <h3>馬爾代夫雙魚島Olhuveli4晚6日自助游上海出發，機+酒 包含:早晚餐+快艇 </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度20%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour3.jpg"> <h3>海南雙飛5日游含鹽城接送，全程掛牌四星酒店，一價全含，零自費“自費項目”免費送</h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度69%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour4.jpg"> <h3>富山-大阪-東京8日游暑期親子，2天自由，無導游安排自費項目，全程不強迫購物 </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度36%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour5.jpg"> <h3>法瑞意德12日游4至5星，金色列車，少女峰，部分THE MALL </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度12%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour6.jpg"> <h3>巴厘島6日半自助游藍夢出海，獨棟別墅，悅榕庄下午茶，純玩 </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度10%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour7.jpg"> <h3>塞舌爾迪拜9日自助游一游兩國，4晚塞舌爾，2晚迪拜，香港EK往返 </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度5%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour8.jpg"> <h3>花樣姐姐土耳其9日或10日游最高立減3000！中餐六菜一湯+土耳其當地美食滿足您挑剔味蕾 </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度46%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> <div class="tu"> <img src="img/tour9.jpg"> <h3>大阪-京都-箱根雙飛6日游鹽城直飛，不走回頭路，境外無自費，超值之旅 </h3> <div class="jia-ge"> <span>¥<strong>2864</strong>起</span> <em>滿意度19%</em> </div> <div class="shu-xing"> <span>自助旅游</span> </div> </div> </section> <!--尾部--> <footer class="wei-bu"> <div class="wei-bu2"> <div class="yy dd1"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游網</li> <li>驢媽媽旅游網</li> <li>攜程旅游</li> <li>中國青年旅行社</li> </ul> </div> <div class="yy dd1"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同簽訂方式？</li> <li>兒童價是基於什么制定的？</li> <li>旅游的線路品質怎么界定的？</li> <li>單房差是什么？</li> <li>旅游保險有那些種類？</li> </ul> </div> <div class="yy dd1"> <h2>聯系方式</h2> <hr> <ul> <li>微博：weibo.com/ycku</li> <li>郵件：ycku@ycku.com</li> <li>地址：江蘇鹽城無名路123號</li> </ul> </div> </div> <div class="ban-quan"> <p>Copyright © YCKU 瓢城旅行社 | 蘇ICP備120110119號 | 旅行社經營許可證：L-YC-BK12345</p> </div> </footer> </body> </html>
css代碼
@charset "utf-8"; /*通用樣式*/ *{ margin: 0; padding: 0; } ul{ list-style-type: none; } a{ text-decoration: none; } /*通用樣式結束*/ /*導航區域*/ .dao-hang{ width: 100%; min-width:1263px; height: 70px; background-color: #333; color: azure; } .dao-hang .dao-hang2{ width: 1263px; height: 70px; margin: 0 auto; } .dao-hang .dao-hang2 .log{ width: 240px; height: 70px; float: left; background-image: url("../img/logo.png"); text-indent:-9999px; } .dao-hang .dao-hang2 h2{ display: none; } .dao-hang .dao-hang2 ul{ float: right; } .dao-hang .dao-hang2 .dao-hang-lie-biao{ width: 120px; height: 70px; float: left; text-align: center; line-height: 70px; } .dao-hang .dao-hang2 .dao-hang-lie-biao a{ display: block; width: 120px; height: 70px; color: azure; } .dao-hang .dao-hang2 .dao-hang-lie-biao a:hover{ background-color: #ff4d51; } /*導航區域結束*/ /*搜索區域*/ .sou-suo{ width: 100%; min-width:1263px; height: 600px; background: url("../img/search.jpg") no-repeat center; position: relative; } .sou-suo h2{ display: none; } .sou-suo .sou-suo2{ width: 600px; height: 60px; background-color: #000000; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -30px; border-radius: 8px; opacity: 0.7; } .sou-suo .sou-suo3{ width: 600px; height: 60px; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -30px; border-radius: 8px; } .sou-suo .sou-suo3 input{ width: 500px; height: 50px; border: none; border-radius: 8px; margin: 5px 0 5px 5px; padding: 0 5px 0 5px; font-size: 22px; line-height: 50px; } .sou-suo .sou-suo3 button{ width: 70px; height: 50px; border: none; border-radius: 8px; float: right; margin: 5px 8px 5px 0; font-size: 22px; line-height: 50px; cursor: pointer; } .sou-suo .sou-suo3 button:hover{ background-color: #C6C6C6; } /*主體區*/ .zhu-ti{ width: 1263px; height: 1150px; margin: 0 auto; } .zhu-ti .zhu-ti2{ text-align: center; padding: 10px 0 10px 0; } .zhu-ti .zhu-ti2 h2{ margin: 10px 0 10px 0; font-size: 45px; color: #666666; } .zhu-ti .zhu-ti2 p{ margin: 10px 0 10px 0; color: #666666; } .zhu-ti .tu{ display: inline-block; vertical-align: bottom; padding: 5px 5px 5px 5px; border: 1px solid #DDDDDD; border-radius: 6px; position: relative; margin: 14px 0 10px 15px; } .zhu-ti .tu img{ vertical-align: middle; } .zhu-ti .tu h3{ width: 380px; height: 32px; font-size: 14px; font-weight: normal; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zhu-ti .tu .jia-ge{ width: 380px; height: 40px; line-height: 40px; } .zhu-ti .tu .jia-ge span{ font-size: 14px; color: #FF6600; } .zhu-ti .tu .jia-ge span strong{ font-size: 20px; margin: 0 5px 0 5px; } .zhu-ti .tu .jia-ge em{ font-style: normal; float: right; font-size: 14px; color: #999999; } .zhu-ti .tu .shu-xing{ background-color: #59B200; width: 92px; height: 26px; line-height: 26px; text-align: center; border-radius: 0 0 6px 0; position: absolute; top: 5px; left: 5px; color: #fff6fc; } /*尾部*/ .wei-bu{ min-width:1263px; height: 360px; background-color: #222222; margin: 20px 0 0 0; } .wei-bu .wei-bu2{ width: 1263px; height: 280px; /*background-color: #5dff59;*/ margin: 0 auto; } .wei-bu .wei-bu2 .yy{ width: 385px; height: 280px; /*background-color: #1232ff;*/ display: inline-block; margin: 0 0 0 20px; vertical-align: top; overflow: hidden; } .wei-bu .wei-bu2 .yy h2{ /*background-color: #ffe627;*/ color: #CCCCCC; padding: 20px 0 0 20px; } .wei-bu .wei-bu2 .yy hr{ padding: 3px 0 3px 0; border: none; border-bottom: 1px dashed #333; } .wei-bu .wei-bu2 .yy ul{ height: 200px; /*background-color: #ff4450;*/ padding: 5px 5px 8px 20px; overflow: hidden; } .wei-bu .wei-bu2 .yy ul li{ font-size: 20px; line-height: 2; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wei-bu .ban-quan{ height: 79px; background-color: #000000; margin: 0 auto; line-height: 79px; text-align: center; color: #fffdfd; }