Page layout of Xiaomi Mall

Prepare CDN (http://www.bootcdn.cn/) searches for normalize URLs (HTTPS://CDN.BOOTCSS.COM/NORMALIZE/7.0.0/NORMALIZE.CSS), saved as. CSS file (name: Nomalize.css,). This file is used to: unify the browser style. Download and install sublime Text Build 3143 x64 Setup.exe. Custom Install sublime text plug-ins (we must use the EMMET Smart plug-in, efficient and convenient), you can Baidu recommend plug-ins. Iconfont font icon (http://iconfont.cn):
After entering the website, select the desired font icon to add the shopping cart, click on the right side of the page shopping cart, select download code download;
Unzip the downloaded compressed package, which contains the font files (. eot. svg. ttf. Woff), CSS style files (iconfont.css), and the Demo sample file (typically used demo_fontclass.html The code under each of these icons is the class name of the icon. Create a new folder mi--> three subfolders css,js,img, respectively. Css,.js, picture. Put the prepared Xiaomi icon. PNG into the IMG folder, and nomalize.css in the CSS folder. Create a new mi.html,mi.css (placed in the CSS folder). Place the various types of files in the Iconfont font icon in each subfolder in the folder mi.
You need to modify the path in ICONFONT.CSS:

Add class to the element when used (Iconfont is required and the other is the class of the icon), for example

<span class= "Iconfont icon-caigou-xianxing" ></span>

Sublime Text Manipulation tips . + Tab software automatically writes out HTML basic frame CTRL +/Add/Uncomment Multi-window Edit: view-->layout-->columns:2 (shortcut alt+shift+2) CTRL + click Multi-line edit (Edit and press ESC to exit multiple lines of editing ) Ul>li>a + Tab: Write out

<ul><li><a href= "" ></a></li></ul>

The process is introduced in the mi.html. css files, including mi.css and iconfont.class draw hierarchical relationships, clearly divided into several pieces, clear the idea of the ad bit

In HTML:
<a class= "BD" href= "#" ></a>
CSS:
. bd{
    Display:block;
    height:120px;
    Background:url (.. /img/bd.png);
    Background-size:cover;
 }

Universal Safe-width box

In HTML:
<div class= "Top-nav" ><div class= "container" ></div></div>
CSS:
. container{width:1226px; margin:0 Auto;}

Pre-defined Styles

/* Left float */
. fl{float:left;}
/* Right float */
. fr{float:right;}
/* Clear Floating class*/
. clearfix:after{
    content: ';
    Display:block;
    height:0;
    Visibility:hidden;
    Clear:both;
}

Top navigation bar
Left navigation list

<ul class= "fl top-nav-left" >
    <li class= "FL" ><a href= "#" > Xiaomi Mall </a></li>
    <li Class= "FL" ><a href= "#" >MIUI</a></li>
    <li class= "FL" ><a href= "#" >iot</a ></li>
    <li class= "FL" ><a href= "#" > Cloud services </a></li>
    <li class= "FL" >< A href= "#" > Water droplets </a></li>
    <li class= "FL" ><a href= "#" > Financial </a></li>
    < Li class= "fl" ><a href= "#" > Products </a></li>
    <li class= "FL" ><a href= "#" >SELECRT region</a></li>
</ul>
top-nav{backgroud-color: #333;}
. Top-nav li{
    height:40px;
    Text-align:center;
    line-height:40px;
}
. Top-nav a{
    font-size:12px;
    padding:0 10px;
    border-right:1px solid #3e3e3e;
    Color: #999;
}
/* In the last Li, the border of a label is removed */
. Top-nav li:last-of-type a{Border:none;}
. Top-nav a:hover{color: #fff;}

Right navigation list

<div class= "Fr cart-box" >
    <a href= "#" class= "cart-btn" >
        <i class= "Iconfont Icon-caigou-xianxing "> Cart (0) </i>
    </a>
</div>
<ul class=" fr ">
    <li Class= "FR" ><a href= "#" > Login </a></li>
    <li class= "fr" ><a href= "#" > Registration </a> </li>
    <li class= "fr" ><a href= "#" > Message notification </a></li>
</ul>/

* Shopping cart button */
. Top-nav a.cart-btn{
    display:block;
    height:40px;
    line-height:40px;
    padding:0 30px;
    Border:none;
    Background-color:rgba (255,255,255,.1);
}
. Cart-box:hover. cart-btn{
   background-color: #fff;
   Color: #ff6700;
}
. Cart-box. icon-caigou-xianxing{
    font-size:20px;
    Vertical-align: -3px;
    font-weight:600;
}

Shopping Cart

<div class= "Fr cart-box" >
    <a href= "#" class= "cart-btn" ><i class= "Iconfont icon-caigou-xianxing" ></i> Shopping Cart (0) </a>
    <div class= "cart-lists" >
        shopping Cart There is no product, buy it quickly.
    </div>
</div>

/* Shopping Cart list *
/. cart-btn{
    Background:rgba (255,255,255,.1);
}
. cart-lists{
    Display:none;
    Z-index:9;
    Position:absolute;
    right:0;
    top:40px;
    width:320px;
    height:100px;
    Text-align:center;
    line-height:100px;
    Background-color: #fff;
    Color: #333;
    font-size:14px;
    box-shadow:0 2px 10px #dddbdb;
}
. Cart-box:hover. cart-lists{
    display:block;
}

Logo

<H1 class= "FL logo" >
    <a href= "#" > Xiaomi Technology </a>
Nav
<!--nav-
<ul class= "nav fl" >
    <li class= "FL" ><a href= "#" > Xiaomi phone </a></li>
    <li class= "FL" ><a href= "#" > Red rice </a></li>
    <li class= "FL" ><a href= "#" > Notebooks </a></li>
    <li class= "FL" ><a href= "#" > TV </a></li>
    <li class= "FL" ><a href= "#" > Box </a></li>
    <li class= "FL" ><a href= "#" > New </a></li>
    <li class= "FL" ><a href= "#" > Routers </a></li>
    <li class= "FL" ><a href= "#" > Smart hardware </a></li>
    <li class= "FL" ><a href= "#" > Services </a></li>
    <li class= " FL "><a href=" # "> Community </a></li>
</ul>

/*nav*/
. Nav li{margin-left:20px;}
. nav>li>a{
    Display:block;
    height:60px;
    line-height:60px;
}
. Nav>li>a:hover{color: #ff6700;}
Search
<!--search-<div class= "Search-bar fr" > <form class= "fl" > <input class= "Search" type= "text"  > <div class= "Quick-link" > <a href= "#" > Red Rice 5 plus</a> <a href= "#" > Xiaomi Note 3</a> </div> </form> <a class= "fl search-btn" href= ">< I class= "Iconfont icon-sousuo" ></i></a> </div>/*search*/. search-bar{margin-top:3px;}.
    Search-bar form{position:relative;
widows:260px;
    }. search{Box-sizing:border-box; padding:0
    10px;
    width:260px;
    height:54px;
border:1px solid #ccc;
    }. search:focus{Outline:none;
border:1px solid #ff6700;
    }. search-btn{Display:block;
    Box-sizing:border-box;
    Margin-left: -1px;
    width:55px;
    height:54px;
    Text-align:center;
    line-height:54px;
border:1px solid #ccc; }. search-btn. icon-sousuo{font-size:20px;}. search-btn:hover{BACKground-color: #ff6700;
Color: #fff;
    }. quick-link{Position:absolute;
    right:10px;
top:16px;
    }. Quick-link a{font-size:12px;
    Background-color: #eee; padding:0
5px;
    }. Quick-link a:hover{background-color: #ff6700;
Color: #fff; }
Banner
<div class= "banner" >
          <ul class= "Banner-imgs" >
            <li class= "active" ><a href= "#" >< IMG src= "img/banner_01.jpg" alt= "/></a></li> <li><a href=
            " # "></a></li>
            <li><a href= "#" ></a></li>"
            <li><a href= "#" > </a></li>
            <li><a href= "#" ></a>< /li>
            <li><a href= "#" ></a></li>" </ul>
          <a href= "#" class= "arrow arrow-left" >
            <i class= "Iconfont Icon-shangyiyehoutuifanhui" ></i>