第九十四節，html5+css3移動手機端流體佈局，旅遊部分，媒體查詢

時間 2019-11-12

標籤第九十四 html5+css3 html css 移動手機流體佈局旅遊部分媒體查詢欄目 HTML5 简体版

原文原文鏈接

html5+css3移動手機端流體佈局，旅遊部分，媒體查詢css

媒體查詢html

媒體查詢是手機網站和自適應網站的重要部分，媒體查詢能夠根據不一樣的屏幕大小，作響應的處理，如文字的大小，區塊隱藏等等html5

媒體查詢，這裏咱們不去詳細去講解，這個放到後面響應式章節講解，這裏簡單使用即可。css3

    /*媒體查詢，大於480小於640*/ 
    @media (min-width:480px) and (max-width:640px) { 
        #tour h2 { 
            font-size: .26rem; 
        } 
        #tour h3 { 
            font-size: .16rem; 
        } 
        #footer { 
            font-size: .14rem; 
        } 
    } 

    /*媒體查詢，小於480*/ 
    @media (max-width:480px) { 
        #tour h2 { 
            font-size: .18rem; 
        } 
        #tour h3 { 
            font-size: .14rem; 
        } 
        #footer { 
            font-size: .12rem; 
        } 
    }

旅遊部分佈局

注意旅遊部分要兩個內容並排，就須要設置兩個div各站50%，而後在div裏面作內容,邊距用div的內邊距來擠，這樣纔會並排，標題部分若是標題長了會換行影響佈局，將標題強制一行顯示，溢出裁剪掉顯示省略號字體

完成效果網站

html代碼spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--自適應手機，禁止縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>瓢城旅行社</title>
    <link rel="stylesheet" href="css/index.css">

</head>
<body>

<!--頭部導航-->
<header id="dao-hang">
    <div class="dao-hang2">
        <h1>瓢城旅行社</h1>
        <nav>
            <h2>網站導航</h2>
            <ul>
                <li class="dao-hang-lie-biao shou"><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>
            </ul>
        </nav>
    </div>
</header>
<!--圖片輪播-->
<div class="lun"></div>
<div class="lun-bo">
    <img src="img/adver.png">
</div>
<!--搜索-->
<div class="sou-su">
    <input type="text">
    <button>搜索</button>
</div>
<!--主體-->
<section class="zhu-ti">
    <div class="zhu-ti2">
        <h2>熱門旅遊</h2>
        <h3>最新的各類熱門旅遊資訊的推薦！</h3>
    </div>
    <div class="zhu-ti3">
        <img src="img/tour1.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour2.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour3.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour4.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour5.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour6.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour7.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
        <div class="zhu-ti3">
        <img src="img/tour8.png">
        <div class="lr">
            <h4>曼谷-芭提雅6日遊包團特惠，超豐富景點曼谷-芭提雅6日遊包</h4>
        </div>
        <div class="jg">
            <span>
                ¥
                <strong>2709</strong>
                起
            </span>
            <em>滿意度 90%</em>
        </div>
    </div>
</section>

<!--尾部-->
<footer class="wei-bu">
    <div class="wei-bu2">
        <p>客戶端 | 觸屏版 | 電腦版</p>
    </div>
    <div class="wei-bu3">
        <P>Copyright &#169; YCKU 瓢城旅行社 | 蘇ICP備120110119號 </P>
    </div>
</footer>

</body>
</html>

css代碼scala

@charset "utf-8";
/*通用樣式*/
/*去除全部元素的內外邊距*/
html{
    font-size: 16px;
}
/*設置字體*/
body{
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*去除全部ul裏li的小圓點*/
ul{
    list-style-type: none;
}
/*去除全部a的下劃線*/
a{
    text-decoration: none;
}
/*將圖片轉換成區塊，將圖片最大寬度設置成100%,使圖片自適應*/
img{
    display: block;
    max-width: 100%;
}
/*通用樣式結束*/

/*頭部導航*/
#dao-hang .dao-hang2{
    width: 100%;
    height: 2.8rem;
    background-color: #333333;
    position: fixed;
    z-index: 200;
}
#dao-hang .dao-hang2 h1{
    display: none;
}
#dao-hang .dao-hang2 h2{
    display: none;
}
#dao-hang .dao-hang2 ul{
    max-width: 40rem;
    height: 2.8rem;
    margin: 0 auto;
    color: #FFFFFF;
}
#dao-hang .dao-hang2 ul li{
    width: 25%;
    height: 2.8rem;
    float: left;
    line-height: 2.8rem;
    text-align: center;
    font-size: 15px;
}
#dao-hang .dao-hang2 ul li a{
    display: block;
    width: 100%;
    height: 2.8rem;
    color: #FFFFFF;
    font-weight: normal;
}
#dao-hang .dao-hang2 ul li a:hover, #dao-hang .dao-hang2 .shou{
    background-color: #000000;
}
/*圖片輪播*/
.lun{
    max-width: 40rem;
    height: 2.8rem;
    margin: 0 auto;
}
.lun-bo{
    max-width: 40rem;
    max-height: 12.5rem;
    background-color: #3835ff;
    margin: 0 auto;
}
/*搜索*/
.sou-su{
    max-width: 40rem;
    height: 2.5rem;
    background-color: #DCE1E7;
    margin: 0 auto;
    padding: 7px 0 0 0;
    position: relative;
}
.sou-su input{
    width: 87%;
    height: 26px;
    display: block;
    margin: 0 auto;
    border: 1px solid #5F89C4;
    border-radius: 6px;
    position: relative;
    outline: none;
}
.sou-su button{
    display: block;
    width: 50px;
    height: 25px;
    border-radius: 0 6px 6px 0;
    position: absolute;
    top: 8px;
    right: 6.2%;
    border: none;
    background-color: #5F89C4;
    outline: none;
    cursor: pointer;
}
/*主體*/
.zhu-ti{
    max-width: 40rem;
    min-height: 3.125rem;
    background-color: #F5F5F5;
    margin: 0 auto;
}
.zhu-ti .zhu-ti2{
    text-align: center;
}
.zhu-ti .zhu-ti2 h2{
    padding: 0.625rem 0 0.625rem 0;
    font-size: 1.4375rem;
    color: #666666;
}
.zhu-ti .zhu-ti2 h3{
    padding: 0 0 0.125rem 0;
    font-size: 1rem;
    font-weight: normal;
    color: #666666;
}
.zhu-ti .zhu-ti3{
    width: 50%;
    float: left;
    padding: 0.7% 0.5% 0.7% 0.5%;
    background-color: #DCE1E7;
}
.zhu-ti .zhu-ti3 img{
    border-radius: 3px;
    /*background-color: #5df569;*/
}
.zhu-ti .zhu-ti3 .lr h4{
    /*background-color: #302ff5;*/
    padding: 2px 0 2px 2px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666666;
}
.zhu-ti .zhu-ti3 .jg{
    /*background-color: #f5e52b;*/
    padding: 2px 2px 2px 2px;
    white-space: nowrap;
    position: relative;
}
.zhu-ti .zhu-ti3 .jg span{
    color: #FF6600;
}
.zhu-ti .zhu-ti3 .jg span strong{
    font-size: 20px;
}
.zhu-ti .zhu-ti3 .jg em{
    font-style: normal;
    /*background-color: #dca9f5;*/
    display: inline-block;
    font-size: 14px;
    color: #666666;
    position: absolute;
    right: 0;
    top: 2px;
}


/*尾部*/
.wei-bu{
    max-width: 40rem;
    min-height: 69px;
    margin: 0 auto;
    background-color: #333333;
    color: #6F6F6F;
    text-align: center;
    clear: both;
}
.wei-bu .wei-bu2{
    width: 100%;
    height: 34px;
    line-height: 34px;
    font-size: 17px;
}
.wei-bu .wei-bu3{
    width: 100%;
    font-size: 17px;
}

 /*媒體查詢，小於400*/
@media (max-width:400px){
    /*導航文字大小*/
    #dao-hang .dao-hang2 ul li a{
        font-size: 16px;
    }
    /*主題標題*/
    .zhu-ti .zhu-ti2 h2{
        font-size: 17px;
    }
    /*底部文字*/
    .wei-bu .wei-bu2{
        font-size: 15px;
    }
    .wei-bu .wei-bu3{
        font-size: 12px;
    }
    /*內容標題*/
    .zhu-ti .zhu-ti3 .lr h4{
        font-size: 14px;
    }
    .zhu-ti .zhu-ti3 .jg span{
        font-size: 14px;
    }
    .zhu-ti .zhu-ti3 .jg span strong{
        font-size: 16px;
    }
    .zhu-ti .zhu-ti3 .jg em{
        font-size: 12px;
    }

}

 /*媒體查詢，小於250*/
@media (max-width:270px){
    /*導航文字*/
    #dao-hang .dao-hang2 ul li a{
        font-size: 14px;
    }
    /*主體文字*/
    .zhu-ti .zhu-ti2 h3{
        font-size: 10px;
    }
    /*底部文字*/
    .wei-bu .wei-bu3{
        font-size: 12px;
    }
    /*隱藏滿意度*/
    .zhu-ti .zhu-ti3 .jg em{
        display: none;
    }
}