在學習了HTML和CSS以後，用倆天的時間仿寫京東網站的部分介面，基本將之前學習的內容都應用到了，收貨頗多，也對網站的佈局有了更深的認識。

總結

• 整體的佈局

在開始寫網站之前，要考慮整體的佈局，事先將每一塊的內容框架搭建好，後期就可以將每一塊的內容填充好，包括css的樣式。這樣思路就比較清晰，不至於後面越做越亂。

• 公共樣式

針對一樣的內容，可以設定相同的樣式，在需要的時候可以直接引入，不需要重複敲css樣式

• 命名，程式碼書寫規範

命名要規範，提高程式碼的可讀性。

• 圖片

1. 比如仿寫淘寶，京東網站，我們可以去相應的向量庫找圖示。
2. 網上的圖片可以下載下來，儲存到同一個資料夾img中
3. 雪碧圖，事先把小圖片切下來放在同一張頁面,開發時就只需要把這張圖片引入即可。然後再根據具體情況調整背景圖片的位置,利用background-position這個屬性可以設定。

京東網站的仿寫

將整個網站按照功能分成多個部分進行總結 

導航選單的製作總結

1. 首先要進行基本的樣式清除： *{margin:0;padding:0} 
2. 用無序列表構建選單，ul/li
3. 定位問題，relation，absolute，static
4. float:left；製作水平選單
5. 列表圓點去除：list-style:none
6. 下劃線去除：text-decoration:none
7. 文字垂直居中，line-height：~px；（與height的值相同）
8. 文字水平居中，text-align: center;
9.  需要將行標籤設定為塊元素，才能設高寬，hover效果 ，display:block，通過偽類hover，可以為選單增加互動效果

HTML

<div class="top_title">
    <div class="title">
        <ul class="title_left">
            <li><i class="iconfont">&#xf0295;</i><a href="#">北京</a></li>
        </ul>
        <ul class="title_right">
            <li><a href="#">你好，請登入</a><a href="#" style="color: #dd0000;;">免費註冊</a></li>
            <li class="v_line">|</li>
            <li><a href="#">我的訂單</a></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">我的京東</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li><a href="#">京東會員</a></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">企業採購</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">客戶服務</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">網站導航</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li><a href="#">手機京東</a></li>
        </ul>
    </div>
</div>
 

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #F0F3EF;
}

.top_title {
    background-color: #E3E4E5;
}

.title {
    width: 1190px;
    height: 30px;
    margin: 0 auto;
    line-height: 30px;
}

.title_left {
    margin-left: 200px;
    float: left;
}

.title_left > li {
    border-left: 1px solid #E3E4E5;
    border-right: 1px solid #E3E4E5;
    list-style: none;
    font-size: 12px;
    color: #a3a3a3;
    padding: 0 7px;

}

.title_left > li > i {
    color: red;
    font-size: 12px;
    margin-right: 5px;
}

.title_left > li > a {
    color: #a3a3a3;
    text-decoration: none;
}

.title_left > li:hover {
    background-color: white;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}

.title_right {
    float: right;
}

.title_right > li {
    float: left;
    margin-right: 0px;
    list-style: none;
    font-size: 12px;
    color: #a3a3a3;
}

.title_right > li > a {
    color: #a3a3a3;
    margin: 0 7px;
    text-decoration: none;
}

.title_right > li > i {
    margin-right: 10px;
    color: silver;

}

.titlehover {
    border-left: 1px solid #E3E4E5;
    border-right: 1px solid #E3E4E5;
    margin-left: 7px;
    margin-right: 7px;
}

.titlehover:hover {
    background-color: white;
    border-left: 1px solid silver;
    border-right: 1px solid silver;   /* 防止框框看起來變動*/
}

.title_right > li > a:hover {
    color: #dd0000;
}

.v_line {
    height: 10px;
}

商城分類導航的製作

有一篇部落格就是寫的這塊內容，可以參考，總體的思路是一樣的。

圖片製作總結

新增圖片使用img標籤，首先要給圖片一個父容器，然後設定父容器的樣式，再將圖片的樣式設定成：

img{

      width:100%;

      height:100%;

}

向量圖示 

要將向量圖示的檔案放到css檔案裡，才可以直接引用。

先設定父容器的樣式，再設定向量圖示的樣式，可以加懸停。

HTML

<span class="camera">

        <i class="iconfont ">&#xf0092;</i>
</span>

CSS 

.camera {
    position: absolute;
    width: 40px;
    height: 35px;
    right: 60px;
    top: 2px;
    line-height: 35px;
    text-align: center;
}

.camera > i {
    font-size: 25px;
    color: #808080;
}

.camera > i:hover {
    color: red;
}

圖片陰影

box-shadow：5px 5px 25px silver；

水平陰影的位置，垂直陰影的位置，陰影的大小，陰影的顏色（學css3的時候在具體介紹）

圓點製作總結

主要用到border-radius屬性，向元素新增圓角邊框

border-radius：50%；     圓形

HTML

 <div class="rank_dian">

            <span class="spancolor"></span>
            <span></span>
  </div>

CSS

.rank_dian {
    text-align: center;
}

.rank_dian > span {
    display: inline-block;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid silver;
}

.spancolor {
    background-color: #f52728;
    border: 2px solid #f52728 !important; /*優先順序*/
    box-shadow: 0px 0px 10px #ff4d2d;
}