京東移動端頁面的部分實現與思考

時間  2019-11-07
標籤 京東 移動 頁面 部分 實現 思考 欄目 無線 简体版
原文   原文鏈接

base.css(公共樣式)

/*公共樣式*/

/*1.樣式重置*/
html,body,ul,li,img,a,p,div,form,input{
    padding: 0;
    margin: 0;
    /*設置盒模型*/
    box-sizing: border-box;
    /*去除移動端特有的點擊高亮效果*/
    -webkit-tap-highlight-color: transparent;
}
body{
    font-family: "微軟雅黑",sans-serif;
    font-size: 13px;
}
a,
a:hover{
    color: #666;
    text-decoration: none;
}
ul{
    list-style: none;
}
input{
    /*1.清除文本框獲取焦點時默認的邊框陰影*/
    outline: none;
    /*2.去除邊框*/
    border: none;
    /*3.添加邊框*/
    border: 1px solid #ccc;
}

/*2.添加新的樣式*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.m_left10{
    margin-left: 10px;
}
.m_right10{
    margin-right: 10px;
}
.m_top10{
    margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
}
複製代碼

index.html

頁面結構：
<div class="jd_layout">
    <!--搜索塊-->
    <div class="jd_search">
      
    </div>
    <!--輪播圖-->
    <div class="jd_banner">
        
    </div>
    <!--導航塊-->
    <div class="jd_nav">
       
    </div>
    <!--產品塊-->
    <div class="jd_product"></div>
</div>
複製代碼

頁面樣式

.jd_layout{
    width: 100%;
    /*最大寬度*/
    max-width: 640px;
    /*最小寬度*/
    min-width: 320px;
    margin:0 auto;
    height: 1000px;
    background-color: #ccc;
}
複製代碼

搜索塊

<div class="jd_search">
        <a href="javascript:;" class="jd_logo"></a>
        <form action="" class="jd_searchBox">
            <!--<span></span>-->
            <input type="text" placeholder="請輸入商品名稱">
        </form>
        <a href="javascript:;" class="jd_login">登陸</a>
  </div>
複製代碼

搜索塊模式

/*頂部搜索塊*/
.jd_search{
    width: 100%;
    max-width: 640px;
    height: 40px;
    /*固定在頂部*/
    position: fixed;
    background: #e92322;
    z-index: 999;
}
.jd_logo{
    width: 56px;
    height: 30px;
    position: absolute;
    left: 10px;
    top: 5px;
    background: url("../images/jd-sprites.png");
    /*設置背景大小*/
    background-size: 200px 200px;
    background-position: 0px -108px;
}
.jd_login{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    line-height:40px;
    color: #fff;
}
.jd_searchBox{
    width: 100%;
    height: 100%;
    padding-left:76px;
    padding-right:50px;
}
.jd_searchBox > input{
    width: 100%;
    height: 30px;
    margin-top:5px;
    border-radius: 15px;
    padding-left:30px;
    color: #666;
}

/*使用僞元素添加放大 鏡*/
.jd_searchBox::before{
    content: "";
    width: 27px;
    height: 23px;
    position: absolute;
    background: url("../images/jd-sprites.png");
    background-size: 200px 200px;
    background-position: -56px -108px;
    left: 80px;
    top:9px;
}
複製代碼

注意:大部分的表單元素是不支持僞類的,因此上面的代碼使用的在表單的父級使用僞類來實現搜索圖標javascript

知識點補充:css

聖盃佈局html

上面搜索模塊運用的是聖盃佈局,下面簡單介紹一下聖盃佈局java

上圖就是咱們要實現的效果圖,logo,登陸按鈕分別在兩邊,中間是搜索框,在伸縮頁面的寬度時,兩邊的logo,登陸按鈕是不會變更的,可是中間搜索框的寬會隨着變化

聖盃佈局的思想就是web

  • 兩邊能夠經過定位或者浮動使得本身的位置處在兩邊
  • 中間部分的寬設爲100%,即與父本同寬
  • 中間部分設置兩邊的padding值,使得自己的content部分的大小減小成恰好在中間的位置
  • 中間部分的子元素的寬設置爲100%

雙飛翼佈局bash

既然有聖盃佈局能夠實現上面的效果,咱們還可使用雙飛翼佈局,來看下面的一段代碼實現的效果 佈局

<html>
	<head>
		<title>雙飛翼佈局</title>
	</head>
	<style type="text/css"> .bd{ position: relative; width: 600px; box-sizing: border-box; } .main{ width: 100%; height: 100px; } .main-content{ margin: 0 80px 0; height: 100px; background-color: #FFCD43; } .left,.right{ position: absolute; top: 0; width: 80px; height: 100px; background-color: #A6E081; } .left{ left: 0; } .right{ right: 0; } </style>

	<body>
		<div class="bd">
			<div class="main text">
				<div class="main-content">main</div>
			</div>
			<div class="left text">
				left
			</div>
			<div class="right text">
				right
			</div>
		</div>
	</body>

</html>
複製代碼

經過觀察雙飛翼佈局的代碼,不難發現,雙飛翼佈局的思想:字體

  • 兩邊能夠經過定位或者浮動使得本身的位置處在兩邊
  • 中間部分的寬設爲100%,即與父本同寬
  • 中間部分的子元素設置兩邊的margin來使得自身處在中間的位置

聖盃佈局與雙飛翼佈局的區別就在於:ui

一個巧用padding值,一個巧用margin值url

輪播圖結構

<!--輪播圖-->
    <div class="jd_banner">
        <!--圖片-->
        <ul class="jd_bannerImg">
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l5.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l6.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l7.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./uploads/l8.jpg" alt="">
                </a>
            </li>
        </ul>
        <!--點標記-->
        <ul class="jd_bannerIndicator">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

複製代碼

輪播圖樣式

/*輪播圖樣式*/
.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_bannerImg{
    /*注意這裏爲何是800%?*/
    width:800%;
}
.jd_bannerImg > li{
    /*注意這裏爲何是12.5%?*/
    width:12.5%;
    float: left;
}
.jd_bannerImg > li img{
    /*1.設置爲塊元素 2.能夠將文本的字體大小設置爲0 3.vertical-align:bottom*/
    display: block;
    width: 100%;/*800%*12.5%*100%=100%*/
}
.jd_bannerIndicator{
    /*width: 128px; height: 10px;*/
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
    border:1px solid black;
}
.jd_bannerIndicator > li{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    float: left;
    
}
.jd_bannerIndicator > li+li{
	margin-left:10px;
}

.jd_bannerIndicator > li.active{
    background-color: #fff;
}

複製代碼

注意:

解釋上面兩處代碼的疑問

1.爲何jd_bannerImg的width的值爲800%?

首先在移動端的頁面的width的值咱們很注重,通常是使用百分比,既然是百分比,那就是相對於父原本說的,若是元素的直接的父本沒有設置width,則默認爲這一級的父本是相對上一級的父本width的100%,以此類推

若是一開始咱們這麼設置

(注意:原圖自己的width值爲720px )

.jd_bannerImg{
    width:100%;//640px
}
.jd_bannerImg > li{
    float: left;//640px
}
.jd_bannerImg > li img{
    width: 100%;//640px<720px
}
複製代碼

按照計算,img的width值爲640px<720px,因此此時圖片是按照width640px來顯示的,可是父本的width值也是640px,因此就算li標籤浮動,因爲父級寬度不夠,只能往下掉,就會獲得上圖的效果,此時img的width:640px

如今,你說父本寬度不夠,才致使li往下掉的,我如今改爲這樣,我把父本的寬度改成原來的8倍(由於有8張圖),這樣能夠了吧

.jd_bannerImg{
	width: 800%;//640px*8
}
.jd_bannerImg > li{
    float: left;
}
.jd_bannerImg>li img{
	width: 100%;//640px*8*100%=5120px>720px
}
複製代碼

經過計算能夠知道img的width是遠遠大於原圖自己的width,因此此時圖片是按照width720來顯示,因爲父本widthd的值爲640px*8,有足夠的大小,因此在浮動的做用下,li會向右並排,可是最後一張是並排不下的(720px*8=5760px>5120px),所以會獲得下面的效果

因此,經過分析,正確的寫法就是案例中的寫法,在li中也要設置width的百分比,經過計算800%*12.5%*100%=100%,即640px*8*12.5%*100%=640px<720,因此圖片按照width值爲640px顯示,因爲父本的width恰好爲640px*8,因此li依次向左浮動

總結:

在移動端寫結構的時候,爲了不出現上面的狀況,每個父本都要設置百分比,這裏的百分比通常只考慮width

導航塊結構

<!--導航塊-->
    <div class="jd_nav">
        <ul class="clearfix">
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_1.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_2.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_3.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_4.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_5.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_6.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_7.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/nav_8.png" alt="">
                    <p>商品分類</p>
                </a>
            </li>
        </ul>
    </div>
複製代碼

導航塊結構樣式

/*導航塊樣式*/
.jd_nav{
    width: 100%;
    padding:10px 0;
    background-color: #fff;
}
.jd_nav li{
    width: 25%;
    float: left;
    text-align: center;
    margin-top:5px;
}
.jd_nav li img{
    width: 50px;
}
.jd_nav li p{
    line-height:25px;
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程