品優購案例練習(一)

環境搭建

.base.css

* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}

/* em和i斜體的文字不傾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li 的小圓點 */
li {
    list-style: none;
}

img {
    /* border 0 照顧低版本的瀏覽器，如果圖片外面包含了連接會有邊框的問題 */
    border: 0;
    /* 取消圖片底側有空白縫隙的問題 */
    vertical-align: middle;
}
button {
    /* 當我們鼠標經過button按鈕的時候，鼠標變成小手 */
    cursor: pointer;
}
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #c81623;
}
input,
button {
    /* "\5B8B\4F53" 就是宋體的意思 這樣瀏覽器兼容性比較好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默認有灰色邊框我們需要手動去掉 */
    border: 0;
    /* 去掉輪廓線 */
    outline: none;
}
body {
    /* css3抗鋸齒 讓文字顯示的更清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666;
}

common.css

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}

.fl {
    float: left;

}

.fr {
    float: right;
}

.style_red {
    color: #c81623;

}

favicon圖標製作和引入

取“品”字png格式到http://www.bitbug.net/製作ico圖標,將其放在項目根目錄

引入：

	<!-- 引入favicon -->
    <link rel="shortcut icon" href=" favicon.ico" />

TDK三大標籤SEO優化

    <meta name="description"content="品優購-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!"/>
    <meta name="Keywords"content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,品優購"/>
    <title>品優購-正品低價、品質保障、配送及時、輕鬆購物！</title>

快捷導航shortcut

右側盒子中豎線是通過給li實現，三角形是字體圖標是字體圖標，這裏是通過僞類加的
- 引入fonts文件
- 在common.css中

/* 聲明字體圖標 注意路徑變化*/
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.shortcut .arrow-icon::after {
    /* 注意加 \ 轉意 */
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

shortcut模塊完整css

/* 快捷導航模塊 */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
    float: left;
}

.shortcut fr ul {
    float: left;
}

.shortcut .fr ul li:nth-child(2n) {
    width: 1px;
    height: 12px;
    text-align: center;
    background-color: #666;
    margin: 9px 15px 0;
}

.shortcut .arrow-icon::after {
    /* 注意加 \ 轉意 */
    content: '\e91e';
    font-family: 'icomoon';
    margin-left: 6px;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="品優購-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!"
    />
    <meta
      name="Keywords"
      content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,品優購"
    />
    <title>品優購-正品低價、品質保障、配送及時、輕鬆購物！</title>

    <!-- 引入favicon -->
    <link rel="shortcut icon" href=" favicon.ico" />

    <!-- 引入初始化文件 -->
    <link rel="stylesheet" href="./css/base.css" />

    <!-- 引入公共樣式文件 -->
    <link rel="stylesheet" href="./css/common.css" />
  </head>

  <body>
    <section class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>品優購歡迎您！&nbsp;</li>
            <li>
              <a href="#">請登錄</a>&nbsp;
              <a href="#" class="style_red">免費註冊</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li>我的訂單</li>
            <li></li>
            <li class="arrow-icon">我的品優購</li>
            <li></li>
            <li>品優購會員</li>
            <li></li>
            <li>企業採購</li>
            <li></li>
            <li class="arrow-icon">關注品優購</li>
            <li></li>
            <li class="arrow-icon">客戶服務</li>
            <li></li>
            <li>網站導航</li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

header模塊

分四個模塊通過定位放置

logo SEO優化

1.logo面首先放一個h1標籤，目的是爲了提權，告訴搜索引擎,這個地方很重要。

2 h1 裏面再放一個銷接,可以返回首頁的，把logo的背景圖片給鏈按即可.

3.爲了投索引學收靈我們,我們接中面要放文字(網站名稱) ,但是文字不要顯示出來。
方法1 : text-indent移到盒子外面( text-indent: -9999px) ,然後overflow:hidden , 淘寶的做法。
方法2 :直接給font-size:0;就看不到文字了,京東的做法。

4.後給鏈接-個title 屬性,這樣鼠標放到logo上就可以看到提示文字了。

search模塊

做一個大的div盒子，然後將輸入框去掉邊框放入其中

shortcut模塊

count統計部分用絕對定位做
count統計部分不要給寬度,因爲可能買的件數比較多,讓件數撐開就好了,給個度
一定注意左下角不是圓角,其餘三個題角寫法: border-radius: 7px 7px 7px 0;

header css

/* header star */
.header {
    position: relative;
    height: 105px;
}

.header .logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
}

.header .logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url("../images/logo.png") no-repeat;
    /* 方法一 */
    /* text-indent: -9999px;
    overflow: hidden; */

    /* 方法二 */
    font-size: 0;
}

.header .search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #B1191A;

}

.header .search input {
    width: 454px;
    height: 32px;
    padding-left: 10px;
}

.header .search button {
    width: 80px;
    height: 32px;
    background-color: #B1191A;
    color: #fff;
    font-size: 16px;
}

.header .hotwrods {
    position: absolute;
    top: 69px;
    left: 346px;
}


.header .hotwrods a {
    margin: 0 10px;
}

.header .shopcar {
    position: absolute;
    right: 60px;
    top: 35px;
    width: 140px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

.header .shopcar::before {
    font-family: 'icomoon';
    content: "\e93a";
    color: #D95151;
    margin-right: 5px;
}

.header .shopcar::after {
    font-family: 'icomoon';
    content: "\e920";
    margin-left: 10px;
}

.header .shopcar .count {
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    border-radius: 7px 7px 7px 0;
    background-color: #D95151;
    padding: 0 5px;
}

header html

<!-- 頭部模塊 header star -->
    <header class="header w">
      <!-- logo 模塊製作 -->
      <div class="logo">
        <h1><a href="index.html" title="品優購商城">品優購商城</a></h1>
      </div>

      <!-- search製作 -->
      <div class="search">
        <input type="search" name="" id="" placeholder="語言開發" /><button>
          搜索
        </button>
      </div>

      <!-- hotwrods 模塊製作 -->
      <div class="hotwrods">
        <a href="#" class="style_red">優惠購首發</a>
        <a href="#">億元優惠</a>
        <a href="#">9.9元團購</a>
        <a href="#">滿99減30</a>
        <a href="#">辦公用品</a>
        <a href="#">電腦</a>
        <a href="#">通信</a>
      </div>

      <!-- shopcar 模塊製作 -->
      <div class="shopcar">
        我的購物車
        <i class="count">8</i>
      </div>
    </header>
    <!-- 頭部模塊 header end -->

nav模塊

分兩塊製作，左邊這塊要考慮下面佈局

nav.css

/* nav star */
.nav {
    height: 47px;
    border-bottom: 2px solid #D95151;
}

.nav .dropdown {
    width: 210px;
    height: 45px;
    background-color: #B1191A;
}

.nav .dropdown .dt {
    width: 100%;
    height: 100%;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.nav .dropdown .dd {
    width: 210px;
    height: 465px;
    background-color: #C81623;
    margin-top: 2px;
}

.nav .dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}

.nav .dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 7px;
    content: '\e920';
    font-family: 'icomoon';
    font-size: 14px;
    color: #fff;

}

.nav .dropdown .dd ul li:hover {
    background-color: #fff;
}

.nav .dropdown .dd ul li:hover a {
    color: #C81623;

}

.nav .dropdown .dd ul li a {
    color: #fff;
    font-size: 14px;

}

.nav .navitems ul li {
    float: left;
}

.nav .navitems ul li a {
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding: 0 25px;
}

.nav .navitems ul li a:hover {
    color: #C81623;
}

index.html

<!-- nav star -->
    <nav class="nav">
      <div class="w">
        <div class="dropdown fl">
          <div class="dt">全部商品分類</div>
          <div class="dd">
            <ul>
              <li><a href="#">家用電器</a></li>
              <li>
                <a href="#">手機 、</a> <a href="#">數碼、</a>
                <a href="#">通信</a>
              </li>

              <li>
                <a href="#">家居、</a> <a href="#">傢俱、</a>
                <a href="#">家裝、</a><a href="#"> 廚具</a>
              </li>
              <li>
                <a href="#">男裝、</a> <a href="#">女裝、</a>
                <a href="#">童裝、</a> <a href="#">內衣</a>
              </li>
              <li>
                <a href="#">個戶化妝、</a> <a href="#">清潔用品、</a>
                <a href="#">寵物</a>
              </li>
              <li>
                <a href="#">鞋靴、</a> <a href="#">箱包、</a>
                <a href="#">珠寶、</a> <a href="#">奢侈品</a>
              </li>
              <li><a href="#">運動戶外、</a> <a href="#">鐘錶</a></li>
              <li><a href="#">汽車、</a> <a href="#">汽車用品</a></li>
              <li><a href="#">母嬰、</a><a href="#">玩具樂器</a></li>
              <li>
                <a href="#">食品、</a><a href="#">酒類、</a>
                <a href="#">生鮮、</a> <a href="#">特產</a>
              </li>
              <li><a href="#">醫藥保健</a></li>
              <li>
                <a href="#">圖書、</a> <a href="#">音像、</a>
                <a href="#">電子書</a>
              </li>
              <li>
                <a href="#">彩票、</a> <a href="#">旅行、</a>
                <a href="#">充值、</a> <a href="#">票務</a>
              </li>
              <li>
                <a href="#">理財、</a><a href="#">衆籌、</a>
                <a href="#">白條、</a><a href="#">保險</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="navitems fl">
          <ul>
            <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>
            <li><a href="#">服裝城</a></li>
            <li><a href="#">服裝</a></li>
            <li><a href="#">服裝城</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- nav end -->

效果圖：

品優購案例練習(一)

環境搭建

favicon圖標製作和引入

TDK三大標籤SEO優化

快捷導航shortcut

header模塊

nav模塊

移動web開發學習整理

博學谷案例練習

小米首頁案例練習

蘇寧易購首頁局部案例練習

簡書首頁案例練習

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結