关于html5:用HTML写淘宝静态网页

7次阅读

共计 5362 个字符,预计需要花费 14 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 淘宝网!我喜爱 </title>
  <style>
    *{
        margin: 0;
        padding: 0;
      }
      li{
        list-style:none;
        margin: 7px;
      }
      a{text-decoration: none;}
    #box1{
      width: 1901px;
      height: 30px;
      background-color: rgb(232, 240, 247);
    }
    #box3>li{
      position: static;
      float: left;
    }
    #box5>li{
      position: static;
      float: left;
    }
    #box4{
      width: 570px;
      height: 10px;
      position: static;
      float: right;
    }
    #qqq{display: none;}
    #zzz > a:hover{color: #fefffe;}
    #box2{
        width: 1901px;
        height: 10%;
        background-color: rgb(234, 248, 250);
    }
   #div_left{
     width: 30%;
     height: 500px;
     float: left;
     background-color: rgb(241, 248, 248);
     position: static;
   }
   #div_content{
     width: 40%;
     height: 30%;
     float: left;
     background-color: rgb(240, 247, 247);
     position: static;
   }
   #div_right{
     width: 30%;
     height: 30%;
     float: left;
     background-color: rgb(245, 242, 248);
     position: static;
   }
   #di{
     width: 20%;
     height: 70%;
     background-color: rgb(253, 252, 251);
   }
   #zi{
     float: right;
     position: static;
   }
  #box6{
    position: relative;
    top: 110px;
  }
  #a{
    width: 300px;
    margin: 20px auto;
    font-size: 10px;
    
  }
  input{
    width: 300px;
    border: 2px solid rgb(199, 46, 46);
    height: 40px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
   
  }
  #search{
    width: 100px;
    height: 42px;
    background-color: blanchedalmond;
  }
  #b{
    margin: 30px;
    right: -630px; 
  
  }
  #jie{right: -662px;}
  #box7{
    float: right;
    position: relative;
    top: -30px;
  } 
  </style>
</head>
<body>
  <div>
    <div id="box1">
      <div id="box2">
        <ul id="box3">
          <li>
            <tr> 地区
              <tb>
                  <select neme="card">
                  <option value="idcad" selected="selected"> 中国大陆 </option>
                  <option value="certificate"> 中国 </option>
                  <option value="certificate"> 日本 </option>
                  <option value="certificate"> 美国 </option>
                  <option value="certificate"> 泰国 </option>
                  <option value="certificate"> 俄罗斯 </option>
                  <option value="certificate"> 乌克兰 </option>
                  <option value="certificate"> 马来西亚 </option>
                  <option value="certificate"> 新西兰 </option>
                  </select>
              </tb>
          </tr>
          </li>
          <li id="zzz" style="color: rgb(206, 49, 49);"><a href="#"> 亲,请登录 </a></li>
          <li> 收费的登录 </li>
          <li> 手机逛淘宝 </li>
          <li> 网络无障碍 </li>
        </ul>
        <div id="box4">
          <ul id="box5">
            <li> 我的淘宝 </li>
            <li id="#" style="color: red;">🛒购物车 </li>
            <li> 收藏夹 </li>
            <li> 商品分类 </li>
            <li> 收费开店 </li>
            <li> 千牛卖家核心 </li>
            <li> 分割客服 </li>
          </ul>
        </div>
      </div>
      <div id="box6">
        <li>
          <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-04 093044.png" width="100px" height="100px">
        </li>
      </div>
      <div id="box7">
        <li>
          <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-03 194711.png" width="90px" height="90px">
        </li>
      </div>
      <div id="a">
        <input type="text" name="search" placeholder="🔎| 请输出关键字!!"> 
      </div>
      <div id="b" style="position: relative">
        <li>
            <a href="#"> 新款连衣裙 </a>
            <a href="#"> 四件套 </a>
            <a href="#" style="color: red;"> 潮流 T 恤 </a>
            <a href="#"> 时尚女鞋 </a>
            <a href="#"> 短裙 </a>
            <a href="#"> 半生裙 </a>
            <a href="#"> 男士外套 </a>
            <a href="#"> 墙纸 </a>
            <a href="#"> 行车记录仪 </a>
            <a href="#"> 新款男鞋 </a>
            <a href="#"> 耳机 </a>
            <a href="#"> 时尚女包 </a>
            <a href="#"> 沙发 </a>
        </li>
      </div>
      <div id="jie" style="position: relative;">
        <li>
            <a href="#" style="color: rgb(224, 138, 138);"> 主题市场 </a>
            <a href="#" style="color: red;"> 天猫 </a>
            <a href="#" style="color: red;"> 聚划算 </a>
            <a href="#" style="color: aqua;"> 天猫超市 </a>
            <a href="#">|</a>
            <a href="#"> 司法拍卖 </a>
            <a href="#"> 飞猪游览 </a>
            <a href="#"> 天天特卖 </a>
            <a href="#">|</a>
            <a href="#"> 造点新货 </a>
            <a href="#"> 苏宁易购 </a>
            <a href="#"> 淘宝心选 </a>
            <a href="#"> 智能生存 </a>
            <a href="#"> 淘宝直播 </a>
        </li>
      </div>
      <div id="box8">

          <div id="div_left">
            
            <div id="zi">
            <li>
              <h3>
                <a href="#">👚</a>
               <a href="#"> 女装 </a>
               <a href="#">/</a>
               <a href="#"> 内衣 </a>
               <a href="#">/</a>
               <a href="#"> 家居 </a>
           </li>
           <li>
             <h3>
               <a href="#">👟</a>
             <a href="#"> 女鞋 </a>
             <a href="#">/</a>
             <a href="#"> 男鞋 </a>
             <a href="#">/</a>
             <a href="#"> 箱包 </a>
           </li>
           <li>
             <h3>
               <a href="#">🚼</a>
             <a href="#"> 母婴 </a>
             <a href="#">/</a>
             <a href="#"> 童装 </a>
             <a href="#">/</a>
             <a href="#"> 玩具 </a>
           </li>
           <li>
             <h3>
               <a href="#">👚</a>
            <a href="#"> 男装 </a>
            <a href="#">/</a>
            <a href="#"> 静止户外 </a>
           </li>
           <li>
             <h3>
               <a href="#">💄</a>
            <a href="#"> 美妆 </a>
            <a href="#">/</a>
            <a href="#"> 彩妆 </a>
            <a href="#">/</a>
            <a href="#"> 个护 </a>
           </li>
           <li>
             <h3>
               <a href="#">🤳</a>
            <a href="#"> 手机 </a>
            <a href="#">/</a>
            <a href="#"> 数码 </a>
            <a href="#">/</a>
            <a href="#"> 企业 </a>
           </li>
           <li>
             <h3>
               <a href="#">🖥️</a>
            <a href="#"> 大家电 </a>
            <a href="#">/</a>
            <a href="#"> 生存电器 </a>
           </li>
           <li>
             <h3>
               <a href="#">🥙</a>
            <a href="#"> 零食 </a>
            <a href="#">/</a>
            <a href="#"> 生鲜 </a>
            <a href="#">/</a>
            <a href="#"> 茶酒 </a>
           </li>
           <li>
             <h3>
               <a href="#">🗄️</a>
            <a href="#"> 厨具 </a>
            <a href="#">/</a>
            <a href="#"> 收纳 </a>
            <a href="#">/</a>
            <a href="#"> 清洁 </a>
           </li>
           <li>
             <h3>
               <a href="#">🛋️</a>
            <a href="#"> 家纺 </a>
            <a href="#">/</a>
            <a href="#"> 家饰 </a>
            <a href="#">/</a>
            <a href="#"> 鲜花 </a>
           </li>
           <li>
             <h3>
               <a href="#">📁</a>
            <a href="#"> 图书音像 </a>
            <a href="#">/</a>
            <a href="#"> 文具 </a>
           </li>
           <li>
             <h3>
               <a href="#">💊</a>
            <a href="#"> 医药健保 </a>
            <a href="#">/</a>
            <a href="#"> 进口 </a>
           </li>
           <li>
             <h3>
               <a href="#">🚉</a>
            <a href="#"> 汽车 </a>
            <a href="#">/</a>
            <a href="#"> 二手车 </a>
            <a href="#">/</a>
            <a href="#"> 用品 </a>
           </li>
           <li>
             <h3>
               <a href="#">🏡</a>
            <a href="#"> 房产 </a>
            <a href="#">/</a>
            <a href="#"> 装璜家具 </a>
            <a href="#">/</a>
            <a href="#"> 建材 </a>
           </li>
           <li>
             <h3>
               <a href="#">📿</a>
            <a href="#"> 手表 </a>
            <a href="#">/</a>
            <a href="#"> 眼镜 </a>
            <a href="#">/</a>
            <a href="#"> 珠宝饰品 </a>
           </li>
            </div>  
          </div>
          <div id="div_content">
            <li>
              
           <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-03 163021.png">
            </li>
           
          </div> 
          <div id="div_right">
            <li>
              <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-03 162742.png">
            </li>
          
          </div>
      </div>
      <div id="box9">
        <div id="di">
        <li>
          <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-03 154047.png"width="1901" height="600px">
        </div>
        </li>
      </div>
      <div id="box10">
        <li>
          <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-04 094458.png"width="1901"height="600px">
        </li>
      </div>
      <div id="box11">
        <li>
          <img src="C:\Users\31753\Pictures\ 屏幕截图 2022-03-04 094532.png" width="1901" height="800px">
        </li>
      </div>
    </div>
  </div>
</body>
</html>

款式图

正文完
 0