flex之伸縮網(wǎng)頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豬豬旅行</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            display: flex;
        }
        header > a {
            flex: 1;
        }
        header > a > img {
            width: 100%;
        }
        main {
            margin: 10px auto;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;

        }
        .item {
            width: 100%;
            height: 100px;
            margin-top: 10px;
            display: flex;
            background-color: dodgerblue;
            border-radius: 10px;
        }
        .item:nth-of-type(2) {
            background-color: deepskyblue;
        }
        .item:nth-of-type(3) {
            background-color: cornflowerblue;
        }
        .item:nth-of-type(4) {
            background-color: skyblue;
        }
        main > .item >.left {
            flex: 1;
        }
        main > .item > .right {
            flex: 2;
            /*設(shè)置換行顯示疾牲，子元素的寬度之和必須大于父元素的寬*/
            flex-wrap: wrap;
            /*float的效果肩刃，flex可以做到*/
            display: flex;
        }
        .right > a {
            width: 50%;
            /*因為a是行內(nèi)元素衬横，所以要使它變成塊元素*/
            display: block;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            color: #ffffff;
            border-bottom: 1px solid white;
            border-left: 1px solid white;
            box-sizing: border-box;
        }
        .right > a:nth-last-of-type(-n+2){
            border-bottom: none;
        }
        main > .extra {
            width: 100%;
            display: flex;
        }
        main > .extra > a {
            flex: 1;
        }
        main > .extra > a > img {
            width: 100%;
        }
        footer {
            width: 100%;
            font-size: 13px;
        }
        footer > nav {
            width: 100%;
            display: flex;
        }
        footer > nav > a {
            flex: 1;
            border-bottom: 1px solid #cccccc;
            border-top: 1px solid #cccccc;
            box-sizing: border-box;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            color: #999999;
        }
        footer > .link {
            text-align: center;
            line-height: 25px;
        }
        footer > .copyright {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <a href="#">
            <img src="./images/banner.jpg" alt=""/>
        </a>
    </header>
    <main>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="#">豬豬航班</a>
                <a href="#">豬豬酒店</a>
                <a href="#">豬豬團購</a>
                <a href="#">豬豬美食</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="#">豬豬航班</a>
                <a href="#">豬豬酒店</a>
                <a href="#">豬豬團購</a>
                <a href="#">豬豬美食</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="#">豬豬航班</a>
                <a href="#">豬豬酒店</a>
                <a href="#">豬豬團購</a>
                <a href="#">豬豬美食</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="#">豬豬航班</a>
                <a href="#">豬豬酒店</a>
                <a href="#">豬豬團購</a>
                <a href="#">豬豬美食</a>
            </div>
        </section>
        <section class="extra">
            <a href="#">
                <img src="./images/extra_1.png" alt=""/>
            </a>
            <a href="#">
                <img src="./images/extra_2.png" alt=""/>
            </a>
        </section>
    </main>
    <footer>
        <nav>
            <a href="#">電話預(yù)定</a>
            <a href="#">下載客戶端</a>
            <a href="#">我的</a>
        </nav>
        <p class="link">
            <a href="#">網(wǎng)站地圖</a>
            <a href="#">English</a>
            <a href="#">電腦版</a>
        </p>
        <p class="copyright">&copy;豬豬旅行</p>
    </footer>
</div>

</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市加派，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖跛梗，帶你破解...
沈念sama閱讀 223,207評論 6贊 521
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件透绩，死亡現(xiàn)場離奇詭異翘骂，居然都是意外死亡，警方通過查閱死者的電腦和手機帚豪，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,455評論 3贊 400
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門碳竟，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人狸臣，你說我怎么就攤上這事莹桅。” “怎么了烛亦？”我有些...
開封第一講書人閱讀 170,031評論 0贊 366
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵诈泼，是天一觀的道長。經(jīng)常有香客問我此洲，道長厂汗，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 60,334評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任呜师，我火速辦了婚禮娶桦，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己衷畦，他們只是感情好栗涂，可當(dāng)我...
茶點故事閱讀 69,322評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著祈争，像睡著了一般斤程。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上菩混，一...
開封第一講書人閱讀 52,895評論 1贊 314
城市分裂傳說
那天忿墅，我揣著相機與錄音，去河邊找鬼沮峡。笑死疚脐，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的邢疙。我是一名探鬼主播棍弄，決...
沈念sama閱讀 41,300評論 3贊 424
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼疟游！你這毒婦竟也來了呼畸？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 40,264評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤颁虐，失蹤者是張志新（化名）和其女友劉穎蛮原，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體聪廉，經(jīng)...
沈念sama閱讀 46,784評論 1贊 321
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡瞬痘，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,870評論 3贊 343
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了板熊。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片框全。...
茶點故事閱讀 40,989評論 1贊 354
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖干签，靈堂內(nèi)的尸體忽然破棺而出津辩，到底是詐尸還是另有隱情，我是刑警寧澤容劳，帶...
沈念sama閱讀 36,649評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布喘沿，位于F島的核電站，受9級特大地震影響竭贩，放射性物質(zhì)發(fā)生泄漏蚜印。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 42,331評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一留量、第九天我趴在偏房一處隱蔽的房頂上張望窄赋。院中可真熱鬧哟冬，春花似錦、人聲如沸忆绰。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,814評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽错敢。三九已至翰灾，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間稚茅，已是汗流浹背纸淮。一陣腳步聲響...
開封第一講書人閱讀 33,940評論 1贊 275
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留亚享，地道東北人萎馅。一個月前我還...
沈念sama閱讀 49,452評論 3贊 379
代替公主和親
正文我出身青樓，卻偏偏與公主長得像虹蒋，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子飒货，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,995評論 2贊 361

flex之伸縮網(wǎng)頁

推薦閱讀更多精彩內(nèi)容