Fluid layout (layout percentage)

Fluid layout (layout percentage)

Flow layout, the layout is the percentage, also called non-fixed pixel layouts

Set by the width of the box to be a percentage of the width of the screen expands and contracts in accordance with, the pixel is not fixed limits, the content is filled on both sides.

Flow layout mode mobile web development using the more common layout

max-width maximum width (max-height maximum height)

min-width minimum width (min-height minimum height)

Technology Selection

Solution: We take a separate program to create a mobile page

Technology: Layout take flow layout

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maxmium-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <!-- 顶部 -->
    <header class="app">
        <ul>
            <li>
                <img src="./img/close.png" alt="">
            </li>
            <li>
                <img src="./img/logo.png" alt="">
            </li> 
            < Li > Open Jingdong App, shopping easier </ li > 
            < li > Open immediately </ li > 
        </ ul > 
    </ header > 
    <-! Search -> 
    < div class = "Search-wrap" > 
        < div class = "BTN-Search" > </ div > 
        < div class = "Search" > 
            < div class = "Magnifier" > </ div >
        </div>
        <div class = "Search-the Login" > Log </ div > 
    </ div > 
    <-! subject matter section -> 
    < div class = "main-Content" > 
        <-! Slide chart -> 
        < div class = "Slide" > 
            < img src = "./ the Upload / q70.jpg" alt = "" > 
        </ div > 
        <-! brand -> 
        < div class = "brand" > 
            <div>
                <a href="#"><img src="./upload/1.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./upload/2.jpg" alt=""></a>
            </div>
            <div>
                <a href="#"><img src="./upload/3.jpg" alt=""></a>
            </div>
        </div>
        <!-- 导航 -->
        <nav class="nav">
            <a href="#">
                <img src="./img/cs.png" alt="">
                <p>京东超市</p>
            </a>
            <a href="#">
                <img src="./img/dq.png" alt="">
                <p>京东电器</p>
            </a>
            <a href="#">
                <img src="./img/fs.png" alt="">
                <p>京东服饰</p>
            </a>
            <a href="#">
                <img src="./img/sx.png" alt="">
                <p>京东生鲜</p>
            </a>
            <a href="#">
                <img src="./img/dj.png" alt="">
                <p>京东到家</p>
            </a>
            <a href="#">
                <img src="./img/jf.png" alt="">
                <p>充值缴费</p>
            </a>
            <a href="#">
                <img src="./img/p.png" alt="">
                <p>9.9 yuan fight A</>P</
            >
            <a href="#">
                <img src="./img/lq.png" alt="">
                <p>领券</p>
            </a>
            <a href="#">
                <img src="./img/zq.png" alt="">
                <p>赚钱</p>
            </a>
            <a href="#">
                <img src="./img/hy.png" alt="">
                <p>PLUS会员</p>
            </a>
        </nav>
        <!-- 新闻模块 -->
        <div class="news">
            <a href="#"><img src="./upload/1.jpg.dpg" alt=""></a>
            <a href="#"><img src="./upload/2.jpg.dpg" alt=""></a>
            <a href="#"><img src="./upload/3.jpg.dpg" alt=""></a>
        </div>
    </div>
</body>

</html>

css

body { 
    min-width : 360px ; 
    max-width : 640px by ; 
    width : 100% ; 
    margin : 0 Auto ; 
    font-size : 14px ; 
    font-Family : -apple-System, 'the Neue Helvetica', Sans-serif ; 
    Line- height : for 1.5 ; 
    Color : # 666 ; 
    Box-Sizing : border-Box ; 
} 
* {
     / * click on the highlighted we need to set clear transparent * /
    -TAP-highlight--webkit Color : transparent ; 
} 
INPUT {
     / * mobile client browser default appearance with this property in order to IOS input boxes and buttons custom styles * / 
    -webkit-Appearance : none ; 
} / * disable the pop-up menu when a long press page * / 
IMG, a { 
    -webkit-Touch-callout : none ; 
} 
UL { 
    margin : 0 ; 
    padding : 0 ; 
    List-style : none ; 
} 
IMG { 
    Vertical-align = left :
 top;
}
a{
    text-decoration: none;
}
p{
    margin: 0;
}
/* 最顶部app */
.app{
    height: 45px;
    background: #333;
}

.app ul li{
    height: 45px;
    float: left;
    text-align: center;
    line-height: 45px;
    color: #fff;
}
.app ul li:nth-child(1){
    width: 8%;
}
.app ul li:nth-child(1) img{
    width: 16px;
    vertical-align: middle;
}
.app ul li:nth-child(2){
    width: 10%;
}
.app ul li:nth-child(2) img{
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3){
    width: 57%;
}
.app ul li:nth-child(4){
    width: 25%;
    background: #CD2525;
}
/* 搜索 */
.search-wrap{
    height: 44px;
    position: fixed;
    overflow: hidden;
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    background: #E43130;
    left: 50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
}
.search-btn{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before{
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url("../img/gn.png") no-repeat;
    background-size: 20px 18px;
    margin: 14px 0 0 15px;
}
.search-login{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
    text-align: center;
}
.search{
    position: relative;
    height: 30px;
    margin: 0 50px;
    background: #fff;
    border-radius: 15px;
    margin-top: 7px;
}
.search::before{
    content: "";
    height: 15px;
    width: 20px;
    position: absolute;
    top: 8px;
    left: 13px;
    background: url("../img/jd.png") no-repeat;
    background-size: 20px 15px;
    border-right: 1px solid #111;
    padding-right: 10px;
}
.magnifier{
    position: absolute;
    height: 18px;
    width: 15px;
    background: url("../img/jd-sprites.png") no-repeat;
    background-position: -83px 0;
    background-size: 200px ;
    left: 50px;
    top: 8px;
}
/* 滑动图 */
.slide img{
    width: 100%;
}
/* 品牌 */
.brand{
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div{
    width: 33.33%;
    float: left;
    cursor: pointer;
}
.brand div img{
    width: 100%;
}
/* 导航 */
.nav{
    overflow: hidden;
}
.nav a{
    display: block;
    height: 74px;
    width: 20%;
    float: left;
    text-align: center;
}
.nav a img{
    width: 40px;
    margin: 10px 0 0;
}
.nav a p{
    height: 18px;
    margin: 6px 0 0;
}
/* 新闻模块 */
.news{
    margin-top: 20px;
}
.news a{
    display: block;
    width: 33.33%;
    float: left;
}
.news a:nth-child(n+2){
    box-sizing: border-box;
    border-left: 1px solid #ccc;
}
.news a img{
    width: 100%;
}

Fluid layout (layout percentage)

Guess you like