8-12：HTML学习#28

今日学习：移动端网页制作。学习时长4h。

 

<header>
      <header>
        <div class="box4">
          <div class="nav-shop">
            <div class="nav-content">
              <div class="nav-item">
                <a href="">商城首页</a>
                <a href="">所有宝贝</a>
                <a href="">热销推荐</a>
                <a href="">新品专区</a>
                <a href="">手办专区</a>
                <a href="">游戏专区</a>
                <a href="">服饰专区</a>
              </div>
              <div class="detail">
                <div class="detail-min">
                  <a href="">爆款专区</a>
                  <a href="">服饰折扣专区</a>
                  <a href="">福袋专区</a>
                  <a href="">情人节</a>
                  <a href="">降价款专区</a>
                </div>
                <div class="detail-min">
                  <a href="">手办</a>
                  <a href="">服饰</a>
                  <a href="">游戏</a>
                  <a href="">周边</a>
                </div>
                <div class="detail-min">
                  <a href="">服饰</a>
                  <a href="">手办</a>
                  <a href="">游戏</a>
                  <a href="">周边</a>
                </div>
                <div class="detail-min">
                  <a href="">手办</a>
                  <a href="">游戏</a>
                  <a href="">艺术设定集</a>
                  <a href="">服饰</a>
                </div>
                <div class="detail-min">
                  <a href="">典藏手办</a>
                  <a href="">Q版手办</a>
                  <a href="">其他手办</a>
                </div>
                <div class="detail-min">
                  <a href="">蜘蛛侠</a>
                  <a href="">极限竞速</a>
                  <a href="">舞力全开</a>
                  <a href="">王者荣耀</a>
                  <a href="">原神</a>
                </div>
                <div class="detail-min">
                  <a href="">帽子</a>
                  <a href="">上衣</a>
                  <a href="">夏装</a>
                  <a href="">秋装</a>
                  <a href="">鞋子</a>
                </div>
              </div> 
            </div>
          </div> 
          <div id="shop-wrap">
            <div class="shop-list">
              <img src="css/img/shop1.jpg">
              <img src="css/img/shop2.jpg">
              <img src="css/img/shop3.jpg">
              <img src="css/img/shop4.jpg">
              <img src="css/img/shop2.jpg">
            </div>
            <div class="shop-arrow">
              <a href="javascript:;" class="shop-left"><</a>
              <a href="javascript:;" class="shop-right">></a>
            </div>
            <ul class="shop-circlelist">
              <li class="shop-circle active" data-n="0"></li>
              <li class="shop-circle" data-n="1"></li>
              <li class="shop-circle" data-n="2"></li>
              <li class="shop-circle" data-n="3"></li>
              <li class="shop-circle" data-n="4"></li>
            </ul>
          </div>
        </div> 
      </header>
    </header>
    <main>
      <div class="shop-main">
        <div class="zhekou1"><p id="p1">￥</p><p id="p2">10</p><p id="p9">RMB</p><p id="p3">入会有礼</p><p id="p4">满99使用</p>
        <div class="ticket1">立即<br>领取</div>
        </div>
        <div class="zhekou2"><p id="p5">￥</p><p id="p6">20</p><p id="p10">RMB</p><p id="p7">会员礼券</p><p id="p8">满399使用</p>
        <div class="ticket2">立即<br>领取</div>
        </div>
        <div class="Txue"><div class="Txue1"></div><img src="css/img/shop.png">
          <div price1>
          <div class="price1-text">￥169</div>
          <div class="price1-buy">立即购买></div>
        </div>
      </div>
      <div class="shop-new">
        <div class="shop-newtext">新品专区</div>
        <div class="shop-product">
          <div class="shop-product1">
            <div class="shop-min1"></div>
            <p>《刺客信条》新品Q版手办</p>
            <div class="min-buy">立即购买</div>
          </div>
          <div class="shop-product2">
            <div class="shop-min2"></div>
            <p>《刺客信条》船长爱德华手办</p>
            <div class="min-buy">立即购买</div>
          </div>
          <div class="shop-product3">
            <div class="shop-min3"></div>
            <p>《刺客信条》船长爱德华手办</p>
            <div class="min-buy">立即购买</div>
          </div>
          <div class="shop-product4">
            <div class="shop-min4"></div>
            <p>《刺客信条》爱可乐联名背包</p>
            <div class="min-buy">立即购买</div>
          </div>
        </div>
      </div>
    </div>
    </main>