hello everybody，許久不見，甚是想念，關(guān)于我為什么四天沒更新博客的原因就是本次文章的標(biāo)題，沒錯，我們老師布置了項(xiàng)目設(shè)計(jì)，而我這個(gè)大怨種選擇了淘寶首頁這個(gè)頁面內(nèi)容多的，以至于我這個(gè)小白敲了四天才完成，那么，今天就來給大家分享一下我完成這個(gè)項(xiàng)目的過程吧（事先聲明我的作品還原度并沒有百分之百達(dá)到，做的不好請大家勿噴（QAQ）），下面先給大家做一個(gè)最終結(jié)果展示：

最終成果展示效果圖：

?下面我會從頭來說一下我的全局布局思路以及如何用代碼實(shí)現(xiàn)這個(gè)界面。

1.結(jié)構(gòu)布局：

結(jié)構(gòu)布局是做一個(gè)項(xiàng)目開始非常重要的一點(diǎn)，我們要具有整體思想，由整劃分小部分，這樣才方便我們后期的制作和修改。

以上為淘寶官網(wǎng)截圖，觀察整體結(jié)構(gòu)后我把它分為三塊，分別是頂部的導(dǎo)航欄，導(dǎo)航欄下方的搜索框欄和下面商品的詳情欄三個(gè)大部分，在代碼中這三個(gè)部分就是三個(gè)大盒子，里面都是被包裹的內(nèi)容。然后我們從這三個(gè)大盒子入手，一個(gè)一個(gè)去解決.

1.1 導(dǎo)航欄布局：

為什么把導(dǎo)航欄單獨(dú)作為一個(gè)大盒子編寫的原因，是因?yàn)閷?dǎo)航欄其中的內(nèi)容也是有下拉菜單的，所以這個(gè)下拉菜單又要包裹在導(dǎo)航欄的文字里面，于是為了方便我將整個(gè)導(dǎo)航欄當(dāng)做一個(gè)大盒子，在內(nèi)部進(jìn)行操作，然后把左右兩邊得文字再分成兩個(gè)中盒子，最后將下拉菜單作為小盒子包裹在中盒子里面。

1.2 搜索欄布局：

?導(dǎo)航欄部分我當(dāng)做一個(gè)大盒子，里面包含了三個(gè)中盒子包裹中間三部分內(nèi)容，然后中間一個(gè)中盒子的內(nèi)部再用兩個(gè)小盒子包裹，之后進(jìn)行內(nèi)容填入以及布局。

1.3 內(nèi)容欄布局：

內(nèi)容欄里面的內(nèi)容豐富且繁雜，所以布局在這里就尤為重要，布局不好會導(dǎo)致后期內(nèi)容編寫的時(shí)候麻煩不斷，首先我將內(nèi)容區(qū)部分作為一個(gè)大盒子，內(nèi)部包裹的內(nèi)容分為上下兩個(gè)中盒子，下面中盒子就用來包含詳細(xì)商品，上面這個(gè)中盒子內(nèi)部包含兩個(gè)小盒子，然后右邊這個(gè)小盒子里面包含三個(gè)更小的盒子用來存放內(nèi)容以及一個(gè)輪播圖。

2.代碼實(shí)現(xiàn)：

tg布局完成以后，我們就需要用代碼來實(shí)現(xiàn)每個(gè)部分的詳細(xì)內(nèi)容以及內(nèi)容的表達(dá)樣式，這是一個(gè)繁瑣的過程，要耐心且細(xì)心，專心且專注。

2.1 導(dǎo)航欄代碼

導(dǎo)航欄部分我用header命名，然后用的是兩個(gè)ul列表標(biāo)簽包裹，li里面包裹文字，然后下拉菜單用div盒子包裹并分別命名，代碼如下所示：

<header>
      <div class="hbox">
        <ul class="hu1">
          <li class="hl1">
            <a href="#"
              >中國大陸<img src="./圖片素材/下拉箭頭.png" alt="#"
            /></a>
          </li>
          <div class="hsbox1">
            <p>全球</p>
            <p>中國大陸</p>
            <p>中國香港</p>
            <p>中國臺灣</p>
            <p>中國澳門</p>
            <p>中國韓國</p>
            <p>中國馬來西亞</p>
            <p>中國澳大利亞</p>
            <p>中國新加坡</p>
            <p>中國新西蘭</p>
            <p>中國加拿大</p>
            <p>中國日本</p>
            <p>中國越南</p>
            <p>中國泰國</p>
            <p>中國菲律賓</p>
            <p>中國柬埔寨</p>
          </div>
          <li>
            <a href="#" style="color: rgb(242, 46, 0)">親，請登錄</a>
          </li>
          <li>
            <a href="#">免費(fèi)注冊</a>
          </li>
          <li>
            <a href="#">手機(jī)逛淘寶</a>
          </li>
          <li>
            <a href="#">網(wǎng)頁無障礙</a>
          </li>
        </ul>
        <ul class="hu2">
          <li class="hl2">
            <a href="#"
              >我的淘寶<img src="./圖片素材/下拉箭頭.png" alt="#"
            /></a>
          </li>
          <div class="hsbox2">
            <p>已買到的寶貝</p>
            <p>我的足跡</p>
          </div>
          <li>
            <a href="#"><img src="./圖片素材/購物車.png" alt="#" />購物車</a>
          </li>
          <li class="hl3">
            <a href="#"><img src="./圖片素材/收藏夾.png" alt="#" />收藏夾</a>
          </li>
          <div class="hsbox3">
            <p>收藏的寶貝</p>
            <p>收藏的店鋪</p>
          </div>
          <li>
            <a href="#">商品分類</a>
          </li>
          <li>
            <a href="#">免費(fèi)開店</a>
          </li>
          <li style="width: 100px" class="hl4">
            <a href="#"
              >千牛賣家中心<img src="./圖片素材/下拉箭頭.png" alt="#"
            /></a>
          </li>
          <div class="hsbox4">
            <p>開店入住</p>
            <p>已賣出的寶貝</p>
            <p>出售中的寶貝</p>
            <p>賣家服務(wù)市場</p>
            <p>賣家培訓(xùn)中心</p>
            <p>體驗(yàn)中心</p>
          </div>
          <li class="hl5">
            <a href="#"
              >聯(lián)系客服<img src="./圖片素材/下拉箭頭.png" alt="#"
            /></a>
          </li>
          <div class="hsbox5">
            <p>消費(fèi)者客服</p>
            <p>賣家客服</p>
            <p>意見反饋</p>
            <p>網(wǎng)頁版旺旺</p>
          </div>
        </ul>
      </div>
    </header>

2.2 搜索欄代碼：

搜索欄代碼中用一個(gè)大盒子包裹三個(gè)中盒子，然后中間的中盒子再次包裹兩個(gè)小盒子，小盒子內(nèi)部使用到了選擇框select和輸入框input以及按鈕button的知識點(diǎn)，這一部分的代碼如下所示：

<div class="topbox">
      <div class="tbbox">
        <div class="tmbox1">
          <a href="#"><img src="./圖片素材/淘寶圖標(biāo).png" alt="#" /></a>
        </div>
        <div class="tmbox2">
          <div class="tsbox1">
            <select name="wuping">
              <option value="baobei" selected>寶貝</option>
              <option value="baobei">天貓</option>
              <option value="baobei">店鋪</option>
            </select>
            <span style="color: rgb(243, 240, 240)"> | </span>
            <input
              type="text"
              style="width: 589px; height: 24px"
              id="shurukuang"
              placeholder="iPhone13"
            />
            <button id="sousuo" style="color: white">搜索</button>
          </div>
          <div class="tsbox2">
            <a href="#">新款連衣裙</a>
            <a href="#">四件套</a>
            <a href="#">潮流T恤</a>
            <a href="#">時(shí)尚女鞋</a>
            <a href="#">短褲</a>
            <a href="#">半身裙</a>
            <a href="#">男士外套</a>

            <a href="#">墻紙</a>
            <a href="#">行車記錄儀</a>
            <a href="#">新款男鞋</a>
          </div>
        </div>
        <div class="tmbox3">
          <a href="#"><img src="./圖片素材/淘寶下載二維碼.png" alt="#" /></a>
        </div>
      </div>
    </div>

2.3 內(nèi)容欄代碼：

內(nèi)容欄我把它分為了兩個(gè)部分，上部分一些復(fù)雜繁瑣的內(nèi)容和下部分的純商品內(nèi)容，下半部分的內(nèi)容比較方便編寫，直接做一個(gè)長寬固定的大盒子，然后每個(gè)商品做一個(gè)長寬固定小盒子，小盒子內(nèi)部包含商品的圖片，文字描述和價(jià)格等消息；

上部分的內(nèi)容也做一個(gè)大盒子，然后把內(nèi)容分為左右兩個(gè)中盒子，右邊這個(gè)中盒子里面分別又包含著三個(gè)小盒子，其中一個(gè)用來設(shè)置輪播圖，另外兩個(gè)正常設(shè)置為內(nèi)容填充的盒子，實(shí)現(xiàn)代碼如下：

上部分內(nèi)容欄：

<div class="mbbox">
        <div class="mmbox1">
          <h3
            style="margin: 0 0 15px 0; padding: 16px 0 0 20px; font-weight: 600"
          >
            分類
          </h3>
          <ul class="mmul" style="padding-left: 20px">
            <li>
              <i class="iconfont">&#xe60f;</i>
              <a href="#">女裝 </a><span>/</span> <a href="#">內(nèi)衣 </a
              ><span>/</span>
              <a href="#">奢品 </a>
            </li>
            <li>
              <i class="iconfont">&#xe621;</i>
              <a href="#">女鞋 </a><span>/</span> <a href="#">男鞋 </a
              ><span>/</span>
              <a href="#">箱包 </a>
            </li>
            <li>
              <i class="iconfont">&#xe610;</i>
              <a href="#">美妝 </a>
              <span>/</span>
              <a href="#">飾品 </a>
              <span>/</span>
              <a href="#">洗護(hù) </a>
            </li>
            <li>
              <i class="iconfont">&#xe7b5;</i>
              <a href="#">男裝 </a><span>/</span> <a href="#">運(yùn)動 </a
              ><span>/</span>
              <a href="#">百貨 </a>
            </li>
            <li>
              <i class="iconfont">&#xe692;</i>
              <a href="#">手機(jī) </a><span>/</span> <a href="#">數(shù)碼 </a
              ><span>/</span>
              <a href="#">企業(yè)禮品 </a>
            </li>
            <li>
              <i class="iconfont">&#xe61c;</i>
              <a href="#">家裝 </a><span>/</span> <a href="#">電器 </a
              ><span>/</span>
              <a href="#">車品 </a>
            </li>
            <li>
              <i class="iconfont">&#xe602;</i>
              <a href="#">食品 </a><span>/</span> <a href="#">生鮮 </a
              ><span>/</span>
              <a href="#">母嬰 </a>
            </li>
            <li>
              <i class="iconfont">&#xe62d;</i>
              <a href="#">醫(yī)藥 </a><span>/</span> <a href="#">保健 </a
              ><span>/</span>
              <a href="#">進(jìn)口 </a>
            </li>
          </ul>
        </div>
        <div class="mmbox2">
          <div class="msbox1">
            <ul>
              <li>
                <a href="#" style="margin-left: 17px; color: rgb(255, 0, 54)"
                  >天貓</a
                ><span>|</span>
              </li>
              <li>
                <a href="#" style="color: rgb(255, 0, 54)">聚劃算</a
                ><span>|</span>
              </li>
              <li>
                <a href="#" style="color: rgb(51, 201, 0)">天貓超市</a
                ><span>|</span>
              </li>
              <li><a href="#">司法拍賣</a><span>|</span></li>
              <li><a href="#">飛豬旅行</a><span>|</span></li>
              <li><a href="#">天天特賣</a><span>|</span></li>
              <li><a href="#">極有家</a><span>|</span></li>
              <li><a href="#">淘寶直播</a></li>
            </ul>
          </div>
          <div class="msbox2">
            <div class="lunbotu">
              <div class="swiper">
                <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./圖片素材/輪播圖1.png" alt=""></div>
                <div class="swiper-slide"><img src="./圖片素材/輪播圖2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./圖片素材/輪播圖3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./圖片素材/輪播圖4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./圖片素材/輪播圖5.jpg" alt=""></div>
                </div>
                <div class="swiper-button-prev prev"></div><!--左箭頭。如果放置在swiper外面，需要自定義樣式。-->
                <div class="swiper-button-next next"></div><!--右箭頭。如果放置在swiper外面，需要自定義樣式。-->
                <div class="swiper-pagination pagination"></div><!--分頁器。如果放置在swiper外面，需要自定義樣式。-->
              </div>
            </div>
            <div class="mssbox">
              <div class="nihao">
                <img
                  src="./圖片素材/tb.jpg"
                  style="border-radius: 50%; margin: 32px 128px 0 128px"
                />
                <p style="text-align: center">Hi! 你好</p>
              </div>
              <div class="mssbutton">
                <button
                  style="
                    background-color: rgb(255, 93, 0);
                    color: white;
                    margin-left: 30px;
                  "
                >
                  登錄
                </button>
                <button
                  style="background-color: rgb(255, 118, 0); color: white"
                >
                  注冊
                </button>
                <button
                  style="
                    background-color: white;
                    color: rgb(255, 80, 0);
                    border: 1px solid rgb(255, 80, 0);
                  "
                >
                  開店
                </button>
              </div>
              <ul class="mssbaobeishoucang">
                <li>
                  <i class="iconfont">&#xe602;</i><br /><a href="#">寶貝收藏</a>
                </li>
                <li>
                  <i class="iconfont">&#xe662;</i><br /><a href="#">買過的店</a>
                </li>
                <li>
                  <i class="iconfont">&#xe62d;</i><br /><a href="#">收藏的店</a>
                </li>
                <li>
                  <i class="iconfont">&#xe621;</i><br /><a href="#">我的足跡</a>
                </li>
              </ul>
              <div class="mssredian">
                <a href="#"
                  ><span
                    style="color: red; background-color: rgb(255, 239, 239)"
                    >熱點(diǎn) </span
                  >淘寶平臺妲己流量造假、黑公關(guān)、網(wǎng)絡(luò)
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

下部分內(nèi)容欄：

 <div class="shangpingbox">
        <h3 style="font-weight: 500; font-size: 22px; margin: 20px 0 0 25px">
          猜 你 喜 歡
          <img
            src="./圖片素材/個(gè)性推薦.png"
            alt="#"
            style="height: 20px; vertical-align: bottom; margin-bottom: 4px"
          />
        </h3>
        <div id="shangpingbox">
          <a class="sp-x">
            <div class="sp-1">
              <img
                src="./圖片素材/sp-1.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                夏季七分袖襯衫男寬松中國風(fēng)男裝防曬開衫外套薄
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div>
          </a>
          <a class="sp-x">
            <div class="sp-1">
              <img
                src="./圖片素材/sp-2.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                鐵藝帶掛鉤辦公桌三角花架置物架辦公室收納掛架
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div>
          </a>
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-3.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                康佳筋膜槍肌肉按摩器迷你肌膜槍十大品牌放
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-4.webp"
                alt="#"
                style="height: 150px; width: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                包郵S.M.HOME外貿(mào)出口純棉貢緞柔軟蓬松型單人
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-5.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                美國西屋輕音破壁機(jī)家用加熱全自動小型豆?jié){
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-6.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                日式特大號加厚家用編織框臟衣籃玩具收納筐零食
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-7.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                卡通水果叉家用不銹鋼月餅小叉水果簽可愛陶瓷叉
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-8.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                特價(jià)出口60支埃及棉純棉貢緞長絨棉活性印染加大
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
          <a class="sp-x"
            ><div class="sp-1">
              <img
                src="./圖片素材/sp-9.webp"
                alt="#"
                style="height: 150px; border-radius: 12px"
              />
            </div>
            <div class="sp-2">
              <p style="margin: 0 0 0 0">
                滴露衣物除菌液檸檬3L2洗衣殺菌非消毒液官方
              </p>
              <p
                style="
                  margin: 0 0 0 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: rgb(255, 80, 0);
                  margin-top: 70px;
                "
              >
                <span style="font-size: 12px">￥</span> 69
              </p>
            </div></a
          >
        </div>
      </div>

2.4? 側(cè)邊欄：

側(cè)邊欄我在盒子外部寫的，因?yàn)橐玫焦潭ǘㄎ?，代碼很簡單，如下所示：

<div class="cebianlan">
      <ul>
        <li>
          <a href="#"><i class="iconfont">&#xe605;</i><span>消息</span></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe625;</i><span>官方客服</span></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe605;</i><span>消息</span></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe625;</i><span>官方客服</span></a>
        </li>
      </ul>
    </div>

順帶說一句，我代碼中的圖片都是從阿里矢量庫中獲取的，有朋友想獲得網(wǎng)頁設(shè)計(jì)圖片的時(shí)候不防到那里找一下，特別方便容易的尋找到自己想要的圖片，網(wǎng)址是：iconfont-阿里巴巴矢量圖標(biāo)庫

那么今天就先說到這里，今天把淘寶網(wǎng)頁這個(gè)項(xiàng)目的框架和主體部分的代碼說完了，明天我會把層疊樣式表和輪播圖部分的內(nèi)容說一下，最后我會放出整個(gè)項(xiàng)目完整的源碼，謝謝大家的觀看！文章來源地址http://www.zghlxwxcb.cn/news/detail-472426.html

到了這里，關(guān)于7.25 web前端-淘寶首頁設(shè)計(jì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！