2. 程式人生 > 實用技巧 >HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第11章有路網移動端主頁實戰

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第11章有路網移動端主頁實戰

阿新 • • 發佈：2020-08-13

本教程案例線上演示

有路網PC端
有路網移動端

免費配套視訊教程

免費配套視訊教程

教程配套原始碼資源

教程配套原始碼資源

本章目標

LESS

1.什麼是less

Less 是一門 CSS 預處理語言,它擴充套件了 CSS 語言,增加了變數、Mixin、巢狀等特性。Less的語法更簡潔，可以被翻譯為CSS。

在vs code安裝less的編譯外掛

安裝外掛Easy LESS，如下圖所示

有了這個後，可以在編輯器新建less檔案，字尾名是.less,儲存後會自動編譯成css

2. 變數

less可以宣告變數，在其它地方直接引用。

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

將其編譯成 CSS 程式碼如下：

p{
    background-color: #ffffff;
    color: #1A237E;
    padding: 15px;
}

ul{
    background-color: #ffffff;
}

li{
    color: #1A237E;
}

現在我們要切換二者的值，也就是黑色的背景和白色的文字，我們只需要修改兩個變數的值就可以了，而不是手動的去修改每個值。

3. Mixins

Less 允許我們將常用的樣式，打包封裝到 class 或 id 選擇器中。 其它地方可以方便的引用。

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

將其轉換成 CSS 程式碼如下

#circle {
    background-color: #4CAF50;
    border-radius: 100%;
}
#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

如果只用於樣式打包，而不出現在css程式碼中，那麼請在它的後面加上括號：

#circle(){
    background-color: #4CAF50;
    border-radius: 100%;
}

#small-circle{
    width: 50px;
    height: 50px;
    #circle
}

#big-circle{
    width: 100px;
    height: 100px;
    #circle
}

此時編譯成 CSS :

#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

Mixin 另一個比較酷的功能就是它支援傳入引數，下面這個例子就為 circle 傳入一個指定寬高的引數，預設是 25px。 這將建立一個 25×25的小圓和一個 100×100 的大圓。

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

轉換成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

4. 巢狀

巢狀可用於以與頁面的HTML結構相匹配的方式構造樣式表，同時減少了衝突的機會。下面是一個無序列表的例子。

ul{
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
}

編譯成 CSS 程式碼：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
}

就像在其它高階語言中一樣， Less 的變數根據範圍接受它們的值。如果在指定範圍內沒有關於變數值的宣告， less 會一直往上查詢，直至找到離它最近的宣告。

回到 CSS 中來，我們的 li 標籤將有白色的文字，如果我們在 ul 標籤中宣告 @text-color 規則。

@text-color: #000000;

ul{
    @text-color: #fff;
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
    }
}

編譯生成的 CSS 程式碼如下：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

5. 運算

你可以對數值和顏色進行基本的數學運算。比如說我們想要兩個緊鄰的 div 標籤，第二個標籤是第一個標籤的兩倍寬並且擁有不同的背景色。

@div-width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @div-width;
    background-color: @color;
}

#right{
    width: @div-width * 2;
    background-color: @color;
}

編譯成 CSS 如下：

div {
    height: 50px;
    display: inline-block;
}
#left {
    width: 100px;
    background-color: #03a9f4;
}
#right {
    width: 200px;
    background-color: #03a9f4;
}

vw單位

vw是css的一個屬性，和px，rem等類似，屬於長度單位。

在瀏覽器中， 1 vw = viewport 的寬度 /100

根據這個特性，vw 可以幫助我們實現移動端自適應佈局，其優點在於所見即所得，甚至優於rem，因為完全不用使用額外的計算。

推薦和sass、less這種css預處理語言一起使用，因為其可以定義變數及函式，會在使用vw上提供巨大幫助。

@vv:7.5vw;

.circle{
  width: 100/@vv;
  height: 100/@vv;
  border: 1px solid red;
  border-radius: 50%;
  font-size: 16/@vv;
  text-align: center;
  line-height: 100/@vv;
}

header.clear{
  width: 100%;
  height: 80/@vv;
  font-size: 42/@vv;
  background: #ededed;
  line-height: 80/@vv;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>vw佈局練習</title>
    <link href="less/style.css" rel="stylesheet" type="text/css">

</head>

<body>
    <header class="clear">
        這是header
    </header>
    <div class="circle">
        circle
    </div>
</body>
</html>

下面三張圖分別是在iphone 6|7|8 和ihone 6P|7P|8P 以及ipad Pro中的表現


原理
以設計稿為750為例，假設viewport代表視窗寬度

750 => viewport
7.5 => viewport/100
//得到
1vw => 7.5
// 元素list 寬為300px
300 => 300/7.5 vw
//得到
@vv = 7.5vw
300 => 300/@vv

阿里圖示庫iconfont使用

話不多說 進入官網 https://www.iconfont.cn/
搜尋你想要的 ，比如【我的】

出來以後加入購物車

點選購物車

點選新增至專案 這時你如果沒登入的話 ，會讓你登陸隨便選擇一個登陸方式比如 github

登陸成功之後你可以選擇新建也可以選擇老的專案

確定好之後會是這樣一個頁面，然後下載至本地

下載後解壓會是一些這樣的檔案

然後像我這樣把字型檔案和css檔案拿到你的專案裡

看下效果

移動端首頁製作

頂部搜尋框

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="less/style.css">
</head>
<body>
  <div class="com-header-area">
    <div class="search-box">
      <span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="書名、作者、出版社、ISBN、文具">
    </div>
  </div>
</body>
</html>

less

@vv:3.75vw;

/*預設樣式重置(css reset)*/
*{
  margin: 0;
  font-size: 12/@vv; /* 中文字型大小的最小值 */
  /* font-family: xx; 也可以設定字型 */
}
ol,ul {
  list-style: none; /* 去除列表樣式 */
  padding: 0;
  margin: 0;
}

a {
  color: #464646;
  text-decoration: none;
}

a:hover {
  color: #f60;
  text-decoration: underline;
}

.com-header-area{
  background-color: #f0f0f0;
  padding: 6/@vv 10/@vv;
  .search-box{
    background-color: #fff;
    display: flex;
    align-items: center;
    input{
      border: 0;
      padding: 6/@vv 0;
      width: 100%;
    }
    span{
      font-size: 12/@vv;
    }
  }
}

熱門搜尋

html

  <div class="com-content">
    <ul class="hot-search">
      <li class="hot">熱門搜尋：</li>
      <li><a href="#">高等數學</a></li>
      <li><a href="#">高等數學</a></li>
      <li><a href="#">高等數學</a></li>
      <li><a href="#">高等數學</a></li>
    </ul>
  </div>

css

.com-content{
  background-color:#e1e5ee;
  .hot-search{
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 2/@vv;
    li{
      margin: 0 4/@vv;
      &.hot{
        color: orange;
      }
      a{
        color: #ccc;
      }
    }
  }
}

輪播圖

html

      <div class="slide">
        <img src="img/slide.jpg">
      </div>

css

  .slide {
    img {
      width : 375/@vv;
      height: 187.5/@vv;
    }
  }

保證條款

html

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保證正品</span>
        <span class="guarantee-span"><span class="check">√</span>保證低價</span>
        <span class="guarantee-span"><span class="check">√</span>24小時發貨</span>
        <span class="guarantee-span"><span class="check">√</span>無理由退貨</span>
      </div>

css

  .guarantee-g {
    display        : flex;
    justify-content: center;
    background     : #fff;

    .guarantee-span {
      margin   : 6/@vv;
      .check {
        color: red;
      }
    }
  }

五大模組

html

      <div class="tab">
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
      </div>

css

  .tab {
    display        : flex;
    justify-content: space-around;
    background     : #fff;
    a {
      display       : flex;
      flex-direction: column;
      align-items   : center;
      padding       : 6/@vv;
      img {
        width : 26/@vv;
        height: 26/@vv;
      }
    }
  }

中欄廣告

html

    <div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
      </div>

推薦圖書

html

      <div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推薦圖書</span>
            <span class="left-arrow">您喜歡的都在這裡</span>
            <a class="span-more">更多</a>
          </div>
        </div>
      </div>

css

.book-items {
    background: #fff;
    color     : #757070;

	.item {
      line-height: 42/@vv;
      display    : flex;
      font-weight: bold;
      .book_recommend {
        font-size  : 14/@vv;
        margin-left: 14/@vv;
      }

      .left-arrow {
        margin-left: 20/@vv;
      }

      a {
        margin-left : auto;
        margin-right: 20/@vv;
      }
    }
  }

推薦圖書列表

html

   <div class="list-recommend">
          <ul>
            <li>
              <a href="#">
                <div class="book-img">
                  <img alt="阿彌陀佛麼麼噠" src="img/book.jpg">
                </div>
                <div class="bookName">阿彌陀佛麼麼噠</div>
                <div class="price">
                  <span>有路價 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP價 ￥14.30</span>
                </div>
              </a>
            </li>
            <li><a href="#">
                <div class="book-img"><img alt="乖.摸摸頭" src="img/book.jpg"></div>
                <div class="bookName">乖.摸摸頭</div>
                <div class="price">
                  <span>有路價 ￥14.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP價 ￥13.30</span>
                </div>
              </a></li>
            <li><a href="#">
                <div class="book-img"><img alt="好嗎好的" src="img/book.jpg"></div>
                <div class="bookName">好嗎好的</div>
                <div class="price">
                  <span>有路價 ￥15.00</span>
                </div>
                <div class="priceVip">
                  <span>VIP價 ￥14.30</span>
                </div>
              </a></li>
          </ul>
        </div>

css

 .list-recommend ul {
      display: flex;
      li {
        display        : flex;
        flex-direction: column;
        align-items: center;
        flex           : 1;
        img {
          max-width    : 80/@vv;
          margin-bottom: 10/@vv;
        }
        .priceVip {
          color: #f28181;
        }
      }
    }

換一換

html

       <div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>換一換</span></a>
       </div>

css

    .book-refresh {
      display        : flex;
      justify-content: center;
      line-height    : 40/@vv;
    }

特色教材

html

        <div class="book-items">
          <div class="item">
            <span class=book_recommend>特色教材</span>
            <span class="left-arrow">大學裡受歡迎的書</span>
          </div>
        </div>

特色教材列表

html

          <div class="bookInfo">
          <ul>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽車理論(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽車理論(第5版)</div>
                </a>
                <div class="author">餘志生</div>
                <div class="price">
                  <span>有路價：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 價：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>團購價：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽車理論(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽車理論(第5版)</div>
                </a>
                <div class="author">餘志生</div>
                <div class="price">
                  <span>有路價：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 價：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>團購價：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
            <li class="bi_li">
              <div class="bi-l">
                <img src="img/car.jpg" alt="汽車理論(第5版)">
              </div>
              <div class="bi-r">
                <a href="/#">
                  <div class="name">汽車理論(第5版)</div>
                </a>
                <div class="author">餘志生</div>
                <div class="price">
                  <span>有路價：</span>
                  <span>￥14.00</span>
                  <span>39折</span>
                </div>
                <div class="price priceVip">
                  <span>VIP 價：</span>
                  <span class="Vip">
                    ￥13.30
                  </span>
                  <span>37折</span></div>
                <div class="price">
                  <span>團購價：</span>
                  <span>
                    ￥11.20
                  </span>
                  <span>31折</span></div>
              </div>
            </li>
          </ul>
        </div>

css

  .bookInfo {
      font-size: 14/@vv;
      .bi_li {
        display: flex;
        padding: 10 / @vv;
        align-items: center;
        .bi-l img {
          max-height: 90 / @vv;
          width: 80 / @vv;
        }
        .bi-r {
          margin-left: 12 / @vv;
          .priceVip {
            color: #f28181;
          }
          .price {
            display: flex;
            line-height: 14 / @vv;
            span {
              flex: 1 1 auto;
              margin-left: 6 / @vv;
            }
            span:first-child {
              margin-left: 0;
            }
            span:last-child {
              color: #f28181;
              border-color: #f28181;
              display: flex;
              align-items: center;
              padding: 0 6 / @vv;
              font-weight: 400;
              border: 0.5/ @vv solid #f28181;
              border-radius: 4 / @vv;
            }
          }
        }
      }
    }

底部導航

html

    <div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>首頁</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我要賣書</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>購物車</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-fangdajing"></i>我的有路</a>
      </div>
    </div>

css

.footer_nav {
  width           : 100%;
  position        : fixed;
  bottom          : 0;
  background-color: #fcfcfc;
  z-index         : 99;
  .footer-tab {
    display        : flex;
    justify-content: space-between;
    a {
      height         : 50/@vv;
      display        : flex;
      flex-direction: column;
      justify-content: center;
      align-items    : center;
      flex           : 1;
      .icon-fangdajing{
        font-size: 26/@vv;
      }
    }
  }
}

完整程式碼

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      charset="UTF-8"
      content="width=device-width, minimum-scale=1.0,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      id="viewport"
      name="viewport"
    />
    <title>Title</title>
    <link href="iconfont/iconfont.css" rel="stylesheet" />
    <link href="less/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="com-header-area">
      <div class="search-box">
        <span class="iconfont icon-sousuo"></span>
        <input
          type="text"
          placeholder="書名、作者、出版社、ISBN、文具"
          value=""
        />
      </div>
    </div>

    <div class="com-content">
      <div class="hot-search">
        <ul>
          <li><span class="hot">熱門搜尋：</span></li>
          <li><a>高等數學</a></li>
          <li><a>高等數學</a></li>
          <li><a>高等數學</a></li>
          <li><a>高等數學</a></li>
        </ul>
      </div>

      <div class="slide">
        <img src="img/slide.jpg">
      </div>

      <div class="guarantee-g">
        <span class="guarantee-span"><span class="check">√</span>保證正品</span>
        <span class="guarantee-span"><span class="check">√</span>保證低價</span>
        <span class="guarantee-span"><span class="check">√</span>24小時發貨</span>
        <span class="guarantee-span"><span class="check">√</span>無理由退貨</span>
      </div>

      <div class="tab">
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
        <a href="#"><img src="img/classify.jpg">分類搜尋</a>
      </div>

      <div class="bookList">
        <div>
          <a href="#"><img style="width:100%;" src="img/ico_index.gif"></a>
        </div>
        <div class="book-items">
          <div class="item">
            <span class=book_recommend>推薦圖書</span>
            <span class="left-arrow">您喜歡的都在這裡</span>
            <a class="span-more">更多</a>
          </div>

          <div class="list-recommend">
            <ul>
              <li>
                <a href="#">
                  <div class="book-img">
                    <img alt="阿彌陀佛麼麼噠" src="img/book.jpg">
                  </div>
                  <div class="bookName nape">阿彌陀佛麼麼噠</div>
                  <div class="price nape cost">
                    <span>有路價 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP價 ￥14.30</span>
                  </div>
                </a>
              </li>
              <li><a href="#">
                  <div class="book-img"><img alt="乖.摸摸頭" src="img/book.jpg"></div>
                  <div class="bookName nape">乖.摸摸頭</div>
                  <div class="price nape cost">
                    <span>有路價 ￥14.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP價 ￥13.30</span>
                  </div>
                </a></li>
              <li><a href="#">
                  <div class="book-img"><img alt="好嗎好的" src="img/book.jpg"></div>
                  <div class="bookName nape">好嗎好的</div>
                  <div class="price nape cost">
                    <span>有路價 ￥15.00</span>
                  </div>
                  <div class="priceVip nape cost">
                    <span>VIP價 ￥14.30</span>
                  </div>
                </a></li>
            </ul>
          </div>

          <div class="book-refresh">
            <a class="a_recommend_change" href="#"><span>換一換</span></a>
          </div>
        </div>

        <div class="book-items">
          <div class="item">
            <span class=book_recommend>特色教材</span>
            <span class="left-arrow">大學裡受歡迎的書</span>
          </div>

          <div class="bookInfo">
            <ul>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽車理論(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽車理論(第5版)</div>
                  </a>
                  <div class="author">餘志生</div>
                  <div class="price">
                    <span>有路價：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 價：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>團購價：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽車理論(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽車理論(第5版)</div>
                  </a>
                  <div class="author">餘志生</div>
                  <div class="price">
                    <span>有路價：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 價：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>團購價：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
              <li class="bi_li">
                <div class="bi-l">
                  <img src="img/car.jpg" alt="汽車理論(第5版)">
                </div>
                <div class="bi-r">
                  <a href="/#">
                    <div class="name">汽車理論(第5版)</div>
                  </a>
                  <div class="author">餘志生</div>
                  <div class="price">
                    <span>有路價：</span>
                    <span>￥14.00</span>
                    <span class="discount">39折</span>
                  </div>
                  <div class="price priceVip">
                    <span>VIP 價：</span>
                    <span class="Vip">
                      ￥13.30
                    </span>
                    <span class="discount">37折</span></div>
                  <div class="price">
                    <span>團購價：</span>
                    <span>
                      ￥11.20
                    </span>
                    <span class="discount">31折</span></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="footer_nav">
      <div class="footer-tab">
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>首頁</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我要賣書</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>購物車</a>
        <a class="footer_nav_a" href="#"><i class="iconfont icon-sousuo"></i>我的有路</a>
      </div>
    </div>
  </body>
</html>

less

@vv:3.75vw;

/*預設樣式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
  margin: 0;
  font-size: 12/@vv; 
  /* font-family: xx; 也可以設定字型 */
}
ol,ul {
  list-style: none; /* 去除列表樣式 */
  padding: 0;
  margin: 0;
}

a {
  color: #464646;
  text-decoration: none;
}

a:hover {
  color: #f60;
  text-decoration: underline;
}

.com-header-area {
  background: #f0f0f0;
  padding: 6 / @vv 10 / @vv 6 / @vv 10 / @vv;
  .search-box {
    background: #fff;
    display: flex;
    align-items: center;
    input {
      font-size: 12/@vv; 
      padding: 5 / @vv 0;
      margin: 0;
      border: 0;
      width: 100%;
      color: #999;
      margin-left: 12 / @vv;
    }
    span{
      font-size: 12/@vv; 
    }
  }
}

.com-content {
  background: #e1e5ee;
  box-shadow: 0 0 10 / @vv #000;
  .hot-search ul {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 2 / @vv 2 / @vv;
    li {
      margin: 0 6 / @vv;
      .hot {
        color: #ddb496;
      }
      a {
        color: #ccc;
      }
    }
  }
  .slide {
    img {
      width: 375 / @vv;
      height: 187.5 / @vv;
    }
  }
  .guarantee-g {
    display: flex;
    justify-content: center;
    background: #fff;

    .guarantee-span {
      margin: 6 / @vv;
      .check {
        color: red;
      }
    }
  }

  .tab {
    display: flex;
    justify-content: space-around;
    background: #fff;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6 / @vv;
      img {
        width: 26 / @vv;
        height: 26 / @vv;
      }
    }
  }

  .book-items {
    background: #fff;
    color: #757070;

    .item {
      line-height: 42 / @vv;
      display: flex;
      font-weight: bold;
      .book_recommend {
        font-size: 14 / @vv;
        margin-left: 14 / @vv;
      }

      .left-arrow {
        margin-left: 20 / @vv;
      }

      a {
        margin-left: auto;
        margin-right: 20 / @vv;
      }
    }

    .list-recommend ul {
      display: flex;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        img {
          max-width: 80 / @vv;
          margin-bottom: 10 / @vv;
        }
        .priceVip {
          color: #f28181;
        }
      }
    }
    .book-refresh {
      display: flex;
      justify-content: center;
      line-height: 40 / @vv;
    }

    .bookInfo {
      font-size: 14/@vv;
      .bi_li {
        display: flex;
        padding: 10 / @vv;
        align-items: center;
        .bi-l img {
          max-height: 90 / @vv;
          width: 80 / @vv;
        }
        .bi-r {
          margin-left: 12 / @vv;
          .priceVip {
            color: #f28181;
          }
          .price {
            display: flex;
            line-height: 14 / @vv;
            span {
              flex: 1 1 auto;
              margin-left: 6 / @vv;
            }
            span:first-child {
              margin-left: 0;
            }
            span:last-child {
              color: #f28181;
              border-color: #f28181;
              display: flex;
              align-items: center;
              padding: 0 6 / @vv;
              font-weight: 400;
              border: 0.5/ @vv solid #f28181;
              border-radius: 4 / @vv;
            }
          }
        }
      }
    }
  }
}

.footer_nav {
  width           : 100%;
  position        : fixed;
  bottom          : 0;
  background-color: #fcfcfc;
  z-index         : 99;
  .footer-tab {
    display        : flex;
    justify-content: space-between;
    a {
      height         : 50/@vv;
      display        : flex;
      flex-direction: column;
      justify-content: center;
      align-items    : center;
      flex           : 1;
      .icon-sousuo{
        font-size: 20/@vv;
      }
    }
  }
}

相關推薦

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第2章HTML基礎知識

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第3章初識CSS

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第4章CSS文字樣式

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第5章CSS盒子模型

本教程案例線上演示 有路網PC端 有路網移動端 教程配套原始碼資源 教程配套原始碼資源

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第6章表格與表單

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第7章定位

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第8章FlexBox佈局

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第9章FlexBox實戰有路網

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第11章有路網移動端主頁實戰

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

HTML5CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第10章有路網PC端主頁實戰整合

本教程案例線上演示 有路網PC端 有路網移動端 免費配套視訊教程 免費配套視訊教程

phaser3入門教程-從零開始開發一個打磚塊遊戲

專案程式碼 專案程式碼 體驗一下 空格開始，左右箭頭控制移動 體驗一下 Phaser簡介

從0開始搭建一個較健壯SpringBoot專案

經驗筆記 1.建立Maven專案匯入依賴 專案模組劃分： application 啟動層Application springboot啟動類 application.xml(專案名稱，服務埠，)等配置檔案 ApplicationConfig(用來載入其他各模組包掃描) 跳板機AutoProx

自己動手從0開始實現一個分散式RPC框架

簡介：如果一個程式設計師能清楚的瞭解RPC框架所具備的要素，掌握RPC框架中涉及的服務註冊發現、負載均衡、序列化協議、RPC通訊協議、Socket通訊、非同步呼叫、熔斷降級等技術，可以全方位的提升基本素質。雖然也有

pycharts-從0開始美化一個圖表

目標效果這個是Echarts官方的視覺化作品， 點我跳轉，今天我們就嘗試下通過pyecharts能否實現一樣的效果～

實戰經驗：“拼多多無貨源店群”新手0基礎創業，老司機手把手教你開店，月入過萬！

微信公眾號：可可無貨源電商 最近有好多朋友問我，現在開網店的那麼多，前景怎麼樣，還能賺到錢嗎？ 想必這個問題是每一個想做電商的朋友心中都會有的疑問。 確實，開網店的是多，掙錢的有，不掙錢的也有，

vue-cli3.0 + element-ui框架搭建，手把手教你搭框架

vue-cli3.0 + element-ui框架搭建，手把手教你搭框架 vue-cli3.0 + element-ui 框架搭建 從源頭開始

從 0 開始入門 Chrome Ext 安全（二） -- 安全的 Chrome Ext

作者：LoRexxar\'@知道創宇404實驗室時間：2019年12月5日 原文連結：paper.seebug.org/1092/

從0開始學習大資料之java spark程式設計入門與專案實踐

本文例項講述了大資料java spark程式設計。分享給大家供大家參考，具體如下：

黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--練習-結構體陣列

作用：將自定義的結構體放入到陣列中方便維護 語法：struct 結構體名 陣列名[元素個數] = { {} , {} , … {} } #include #include using namespace std; struct Student { string name; int age; int score

黑馬程式設計師匠心之作|C++教程從0到1入門程式設計--練習-結構體中const的使用

#include #include using namespace std; struct Student { string name; int age; int score; }; //將函式中的形參改為指標，可以減少記憶體空間，而且不會複製新的副本出來 void prinarr(const Student *