第九十一節，html5+css3pc端固定佈局，完成首頁

時間 2019-11-12

標籤第九十一節 html5+css3pc html css 固定佈局完成首頁欄目 HTML 简体版

原文原文鏈接

html5+css3pc端固定佈局，完成首頁css

此時咱們的首頁就完成了html

首頁效果html5

其餘頁面我就不作了，原理相同，作其餘頁面時將頭尾css分離調用便可css3

大綱算法算法

咱們看看大綱算法比較清晰，說明符合規則佈局

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>&#165;<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>&#165;<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>&#165;<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>&#165;<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>&#165;<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>&#165;<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>&#165;<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>&#165;<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>&#165;<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代碼url

@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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。