【学习笔记】HTML+CSS模仿静态淘宝首页-爱代码爱编程

2020-10-08 标签: html css html5 css3

一、先上一张成果图

二、已上传Github

https://github.com/ImDaret/Front-end-learning

三、直接上代码（头大预警）

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淘宝网 - 淘！我喜欢</title>
  <link rel="stylesheet" href="taobao.css">
  <link rel="icon" href="favicon.ico" />
</head>
<body>
  <div class="container">
    <header>
      <div class="left">
        <ul>
          <li>
            <a href="#">中国大陆</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li >
            <a href="#" style="color: #ff5000;">亲，请登录</a>
          </li>
          <li>
            <a href="#">免费注册</a>
          </li>
          <li>
            <a href="#">手机逛淘宝</a>
          </li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#">我的淘宝</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <span class="iconfont mr5">&#xe6b8;</span>
            <a href="#">购物车</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <a href="#"><span class="iconfont mr5 store">&#xe608;</span>收藏夹</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <a href="#">商品分类</a>
          </li>
          <li><span class="colorD">|</span></li>
          <li>
            <a href="#">千牛卖家中心</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <a href="#">联系客服</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
          <li>
            <span class="iconfont mr5">&#xe606;</span>
            <a href="#">网站导航</a>
            <span class="iconfont arrow">&#xe791;</span>
          </li>
        </ul>
      </div>
    </header>
    <div class="advertisement">
        <a href="https://market.m.taobao.com/app/miniapp-biz/taoxiaopuPc/index.html?spm=a21bo.2017.201855.1.5af911d9I1YCFx&acm=lb-zebra-634493-8608804.1003.4.8190183&scm=1003.4.lb-zebra-634493-8608804.OTHER_15917254192631_8190183">
          <img src="https://img.alicdn.com/tfs/TB1OaEjIhD1gK0jSZFsXXbldVXa-1190-70.png" alt="淘宝小铺">
        </a>
    </div>
    <nav>
      <div class="navbar">
        <!-- 左 -->
        <div class="navleft">
          <img src="./images/logo.png" alt="" style="margin-left: 30px;">
        </div>
        <!-- 中 -->
        <div class="navmiddle">
          <!-- 上 -->
          <ul class="top">
            <li style="color: #fff;
            font-weight: bold;
            border-radius: 6px 6px 0 0;
            background-image: linear-gradient(to right, #ff9000, #ff5000);">宝贝</li>
            <li>天猫</li>
            <li>店铺</li>
          </ul>
          <br/>
          <input type="text" />
          <div class="placehorder">
            <i class="iconfont">&#xe602;</i>
            <span>显瘦牛仔背带裤</span>
          </div>
          <span class="iconfont imgSearch">&#xe698;</span>
          <button>搜索</button>
          <ul class="bottom">
            <li>
              <a href="#">新款连衣裙</a>
            </li>
            <li>
              <a href="#">四件套</a>
            </li>
            <li>
              <a href="#" style="color: #f40;">潮流T恤</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>
            <li>
              <a href="#">耳机</a>
            </li>
            <li>
              <a href="#">时尚女包</a>
            </li>
            <li>
              <a href="#">沙发</a>
            </li>
          </ul>
        </div>
        <!-- 右 -->
        <div class="navright">
          <a
            href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html? spm=a21bo.2017.201858.1.5af911d9DWAa2W&acm=lb-zebra-634493-8609660.1003.4.8190782&scm=1003.4.lb-zebra-634493-8609660.OTHER_15917281779251_8190782">
            <span class="c5">手机淘宝</span>
            <img src="data:image/png;base64,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"
            alt="">
          </a>
        </div>
      </div>
    </nav>
    <div class="bar">
      <h2>主题市场</h2>
      <ul>
        <li><a href="#">天猫</a></li>
        <li><a href="#">聚划算</a></li>
        <li><a href="#">天猫超市</a></li>
        <li class="line">|</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 class="line">|</li>
        <li><a href="#">飞猪旅行</a></li>
        <li><a href="#">智能生活</a></li>
        <li><a href="#">苏宁易购</a></li>
      </ul>
    </div>
    <br>
    <main>
      <div class="fuzhu">
        <!-- 左 -->
      <div class="mainleft">
        <ul>
          <li>
            <a href="#">女装</a>
            /
            <a href="#">内衣</a>
            /
            <a href="#">家居</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">女鞋</a>
            /
            <a href="#">男鞋</a>
            /
            <a href="#">箱包</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">男婴</a>
            /
            <a href="#">童装</a>
            /
            <a href="#">玩具</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">男装</a>
            /
            <a href="#">运动户外</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">美妆</a>
            /
            <a href="#">彩妆</a>
            /
            <a href="#">个护</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">手机</a>
            /
            <a href="#">数码</a>
            /
            <a href="#">企业</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">大家电</a>
            /
            <a href="#">生活电器</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">零食</a>
            /
            <a href="#">生鲜</a>
            /
            <a href="#">茶酒</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">厨具</a>
            /
            <a href="#">收纳</a>
            /
            <a href="#">清洁</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">家纺</a>
            /
            <a href="#">家饰</a>
            /
            <a href="#">鲜花</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">图书音像</a>
            /
            <a href="#">文具</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">医药保健</a>
            /
            <a href="#">进口</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">汽车</a>
            /
            <a href="#">二手车</a>
            /
            <a href="#">用品</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">装修</a>
            /
            <a href="#">建材</a>
            /
            <a href="#">家具</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
          <li>
            <a href="#">手表</a>
            /
            <a href="#">眼镜</a>
            /
            <a href="#">珠宝饰品</a>
            <span class="iconfont fr">&#xe65f;</span>
          </li>
        </ul>
      </div>
      <!-- 中 -->
      <div class="mainmiddle">
        <div class="imgbox1">
          <a href="#">
            <img src="https://img.alicdn.com/tfs/TB1oQefPBr0gK0jSZFnXXbRRXXa-520-280.jpg_q90_.webp" alt="">
          </a>
        </div> 
        <div class="imgbox2">
          <a href="#">
            <img src="https://img.alicdn.com/imgextra/i3/2838892713/O1CN01Cfgot31Vub8nHmyom_!!2838892713.jpg_400x400q90.jpg_.webp" alt="">
          </a>
        </div>
        <div class="imgbox3">
          <div class="topimg">
            <span class="left">理想生活上天猫</span>
            <span class="right"><i>1</i>/6</span>
          </div>
          <div class="line">
            <span></span>
          </div>
          <div class="img">
            <a href="#">
              <img src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg" alt="">
            </a>
            <a href="#" style="float: right;">
              <img src="https://aecpm.alicdn.com/simba/img/TB13xKuLVXXXXcHapXXSutbFXXX.jpg" alt="">
            </a>
          </div>
        </div>
        <div class="imgbox4">
          <p class="title">今日热卖</p>
          <a href="#">
            <img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt="">
          </a>
        </div>
      </div>
      <!-- 右 -->
      <div class="mainright">
        <div class="mainrightTop">
          <div class="self">
            <img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt="">
            <p>Hi！你好</p>
            <p>
              <a href="#" class="gold">领淘金币抵钱</a>
              <a href="#" class="club">会员俱乐部</a>
            </p>
            <p>
              <button>登录</button>
              <button>注册</button>
              <button>开店</button>
            </p>
          </div>
          <div class="ad">
            <img src="https://img.alicdn.com/tfs/TB1O2k_PAL0gK0jSZFAXXcA9pXa-540-120.jpg" alt="">
          </div>
        </div>
        <div class="mainrightMiddle">
          <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>
            <br>
            <div>
              <a href="#">95公益周阿里、腾讯等六家公司同台联合做公</a>
            </div>
          </ul>
          <table>
            <tr>
              <td class="img1">
                <a href="#">
                  <span></span>
                  <i>充话费</i>
                </a>
              </td>
              <td class="img2">
                <a href="#">
                  <span></span>
                  <i>旅行</i>
                </a>
              </td>
              <td class="img3">
                <a href="#">
                  <span></span>
                  <i>车险</i>
                </a>
              </td>
              <td class="img4">
                <a href="#">
                  <span></span>
                  <i>游戏</i>
                </a>
              </td>
            </tr>
            <tr>
              <td class="img5">
                <a href="#">
                  <span></span>
                  <i>彩票</i>
                </a>
              </td>
              <td class="img6">
                <a href="#">
                  <span></span>
                  <i>电影</i>
                </a>
              </td>
              <td class="img7">
                <a href="#">
                  <span></span>
                  <i>酒店</i>
                </a>
              </td>
              <td class="img8">
                <a href="#">
                  <span></span>
                  <i>理财</i>
                </a>
              </td>
            </tr>
          </table>
        </div>
        <div class="mainrightBottom">
          <div class="top">
            <h3>阿里APP</h3>
            <a href="#">更多></a>
          </div>
          <div class="bottom">
            <ul>
              <li>
                <a href="#"><img src="images/app_1.png" alt=""></a>
              </li>
              <li>
                <a href="#"><img src="images/app_2.png" alt=""></a>
              </li>
              <li>
                <a href="#"><img src="images/app_3.png" alt=""></a>
              </li>
              <li>
                <a href="#"><img src="images/app_4.png" alt=""></a>
              </li>
              <li>
                <a href="#"><img src="images/app_5.png" alt=""></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      </div>
    </main>
    <footer>
      <div class="title">
        <img src="https://img.alicdn.com/tfs/TB1tqpnegMPMeJjy1XcXXXpppXa-148-48.png" alt="">
        <p>与品质生活不期而遇</p>
      </div>
      <div class="content">
        <ul>
          <li>
            <a href="#">
                <img src="https://img.alicdn.com/tfscom/i1/1581756766/TB2TF0ch0zJ8KJjSspkXXbF7VXa_!!1581756766.jpg_180x180xzq90.jpg_.webp" alt="">
                <div class="information">
                  <h4>大豆家 方头奶奶鞋</h4>
                  <p>一脚蹬设计，方便日常的穿脱。</p>
                  <p class="extra">
                    <span class="iconfont">&#xe627;</span>
                    3758 人说好
                  </p>
                </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://img.alicdn.com/tfscom/i3/2459354798/TB2IyE5eUhnpuFjSZFpXXcpuXXa_!!2459354798.jpg_180x180xzq90.jpg_.webp" alt="">
                <div class="information">
                  <h4>佳宝路转角水槽</h4>
                  <p>304不锈钢，表面光洁坚固耐用。</p>
                  <p class="extra">
                    <span class="iconfont">&#xe627;</span>
                    122 人说好
                  </p>
                </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://img.alicdn.com/tfscom/i4/654230132/O1CN011CqUjXBxyNTXTMy_!!654230132.jpg_180x180xzq90.jpg_.webp" alt="">
                <div class="information">
                  <h4>肖优秀真皮细高跟过膝瘦腿弹力靴</h4>
                  <p>细跟尖头设计更显优雅女人味。</p>
                  <p class="extra">
                    <span class="iconfont">&#xe627;</span>
                    68 人说好
                  </p>
                </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://img.alicdn.com/imgextra/i3/3778221387/TB2hRCYtyOYBuNjSsD4XXbSkFXa_!!3778221387-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
                <div class="information">
                  <h4>低热量保持好身材，来一块厚豆干</h4>
                  <p>低热量，鲜咸味，超饱腹，日常束身常备零食，代餐豆干。灞水优质矿泉水，秦岭山麓非转基因天然大豆。酸浆点制，豆浆自然发酵而成。</p>
                  <p class="extra">
                    <span class="iconfont">&#xe627;</span>
                    41 人说好
                  </p>
                </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://img.alicdn.com/imgextra/i4/111676913/TB2QvjxnN1YBuNjy1zcXXbNcXXa_!!111676913-2-beehive-scenes.png_180x180xzq90.jpg_.webp" alt="">
                <div class="information">
                  <h4>入户鞋底清洁神器，让地板一尘不染</h4>
                  <p>这款鞋底清洁神器，节能环保，简单方便，不用电。刷盘内只需加入稀释好的清洁剂或消毒液，使用时双脚踏上刷盘摩擦三到五次，在踏上吸水地垫，只需几秒钟即可清洁完成，让你家的地板时刻保持干净，从此再也不怕接待客人了！</p>
                  <p class="extra">
                    <span class="iconfont">&#xe627;</span>
                    92 人说好
                  </p>
                </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://img.alicdn.com/tfscom/i2/682153619/TB2yBeNmXXXXXX6XXXXXXXXXXXX_!!682153619.jpg_180x180xzq90.jpg_.webp" alt="">
                <div class="information">
                  <h4>让人口味大开 盐城特产藕粉圆子</h4>
                  <p>民间独特风味的宫廷点心。</p>
                  <p class="extra">
                    <span class="iconfont">&#xe627;</span>
                    18 人说好
                  </p>
                </div>
            </a>
          </li>
        </ul>
      </div>
    </footer>
  </div>
</body>
</html>

CSS：

@font-face {
  font-family: 'iconfont';
  src: url('./font/iconfont.eot');
  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
      url('./font/iconfont.woff2') format('woff2'),
      url('./font/iconfont.woff') format('woff'),
      url('./font/iconfont.ttf') format('truetype'),
      url('./font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 12px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{
  margin: 0px;
  padding: 0px;
}

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

body {
  /* 第一行，字体大小/行高(行高尽量用数字) */
  font: 12px/1.5 tahoma,
      arial,
      'Hiragino Sans GB',
      '\5b8b\4f53',
      sans-serif;
  /* \5b8b\4f53是代表宋体的Unicode编码   */
  color: #3c3c3c;
  background-color: #f4f4f4;
}

header{
  width: 1190px;
  height: 35px;
  background-color: #f4f4f4;
}
header > .left{
  float: left;
  line-height: 35px;
}
header > .right{
  float: right;
  line-height: 35px;
}
ul{
  list-style: none;
}
a {
  text-decoration: none;
  color: #3c3c3c;
}
a:hover{
  color: #f40;
}
li:hover > a > span {
  color: #f40;
}
.arrow{
  margin-left: 7px;
}
.mr5{
  margin-right: 5px;
  color: #f40;
}
.store{
  color: #9c9c9c;
}
header > .left > ul > li{
  margin-left: 10px;
  float: left;
}
header > .right > ul > li{
  margin-left: 10px;
  float: left;
}
.advertisement{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  background-color: #e71b1b;
}
nav{
  width: 100%;
  height: 139px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
}
.navbar{
  width: 1190px;
  height: 139px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navleft{
  width: 280px;
}
input{
  background:none;
  outline:none;
  border:0px;
}
.navmiddle{
  width: 740px;
  position: relative;
}
.navmiddle .top{
  margin-left: 20px;
}
.navmiddle > .top > li{
  width: 36px;
  float: left;
  color: #f40;
  margin-left: 5px;
  text-align: center;
  cursor: pointer;
}
.navmiddle > .top > li:hover{
  background-color: #ffeee5;
}
.navmiddle > input{
  display: block;
  float: left;
  width: 550px;
  height: 36px;
  border: 2px solid #f40;
  border-right: none;
  border-radius: 20px  0px 0px 20px;
}
.navmiddle > .placehorder{
  position: absolute;
  top: 29px;
  left: 14px;
}
.navmiddle > .imgSearch{
  position: absolute;
  top: 18px;
  right: 200px;
  color: #9c9c9c;
  font-size: 28px;
  cursor: pointer;
}
button{
  background:none;
  border: 0px;
  outline: none;
}
.navmiddle > button{
  width: 74px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  border-radius: 0 20px 20px 0;
  cursor: pointer;
}
.navmiddle > .bottom li{
  float: left;
  margin-left: 3px;
}
.navright{
  width: 170px;
}
.navright a span{
  color: #f40;
  display: block;
}
.navright img{
  width: 62px;
  height: 62px;
}
.bar{
  width: 1190px;
  height: 30px;
}
.bar > h2{
  color: #fff;
  width: 190px;
  font-size: 16px;
  text-align: center;
  background: #ff5000;
  line-height: 30px;
  float: left;
}
.bar > ul{
  height: 30px;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
}
.bar > ul > li{
  color: #fff;
  float: left;
  line-height: 30px;
  font-size: 14px;
  padding: 0 12px;
  position: relative;
}
.bar > ul > li > a {
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.bar > ul > li > line{
  margin: 0;
  padding: 0;
  color: #fff;
}
.bar > ul > li:hover ::before{
  content: url(./images/ico.gif);
  color: #ff5000;
  top: -19px;
  position: absolute;
  left: 50%;
  font-size: 12px;
  margin-left: -15px;
}
main{
  width: 100%;
  height: 522px;
  display: flex;
  justify-content: center;
}
.fuzhu{
  width: 1190px;
  display: flex;
  justify-content: space-between;
}
main > .fuzhu > .mainleft{
  box-sizing: border-box;
  width: 190px;
  height: 522px;
  background-color: #fff;
  border: 1px solid #f40;
}
main > .fuzhu > .mainleft > ul > li{
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  font-weight: 400;
  padding: 1px 1px 1px 25px;
  position: relative;
  color: #666;
}
main > .fuzhu > .mainleft > ul > li:hover{
  background-color: #ffe4dc;
}
main > .fuzhu > .mainleft > ul > li > .fr{
  float: right;
  margin-right: 9px;
}
main > .fuzhu > .mainmiddle{
  box-sizing: border-box;
  width: 690px;
  height: 522px;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main > .fuzhu > .mainmiddle > .imgbox1{
  align-self: center;
}
main > .fuzhu > .mainmiddle > .imgbox2{
  align-self: center;
}
main > .fuzhu > .mainmiddle > .imgbox3{
  width: 520px;
  height: 217px;
  align-self: center;
}
main > .fuzhu > .mainmiddle > .imgbox3 > .topimg > .left{
  background: url(data:image/png;base64,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) no-repeat left;
  padding-left: 136px;
  color: #666;
  height: 17px;
  line-height: 17px;
}
main > .fuzhu > .mainmiddle > .imgbox3 > .topimg > .right{
  float: right;
}
main > .fuzhu > .mainmiddle > .imgbox3 > .topimg > .right > i{
  font-style: normal;
  color: #ff1648;
}
main > .fuzhu > .mainmiddle > .imgbox3 > .line{
  margin-top: 0px;
  height: 3px;
  background-color: #ff1648;
  position: relative;
}
main > .fuzhu > .mainmiddle > .imgbox3 > .line > span{
  position: absolute;
  width: 87px;
  height: 3px;
  background-color: #000;
  left: 0;
}
main > .fuzhu > .mainmiddle > .imgbox3 .img{
  width: 520px;
  height: 200px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
main > .fuzhu > .mainmiddle > .imgbox4{
  width: 160px;
  height: 217px;
  align-self: center;
}
main > .fuzhu > .mainmiddle > .imgbox4 > p{
  height: 22px;
  line-height: 22px;
  color: #a1a1a1;
  font-size: 12px;
  font-weight: 400;
}
main > .fuzhu > .mainmiddle > .imgbox4 > img{
  height: 200px;
}
main > .fuzhu > .mainright{
  box-sizing: border-box;
  width: 290px;
  height: 522px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
main > .fuzhu > .mainright > .mainrightTop{
  width: 290px;
  height: 192px;
  background-image: url(./images/bg1.png);
}
main > .fuzhu > .mainright > .mainrightTop > .self{
  width: 290px;
  height: 137px;
  text-align: center;
  font-weight: 400;
}
main > .fuzhu > .mainright > .mainrightTop > .self > img{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-top: 5px;
  cursor: pointer;
}
main > .fuzhu > .mainright > .mainrightTop > .self > p > a{
  display: inline-block;
  font-size: 12px;
  border-radius: 9px;
  background-color: #ffe4dc;
  padding: 0 10px 0 20px;
  margin: 0 2px;
  color: #ff5000;
}
main > .fuzhu > .mainright > .mainrightTop > .self > p > a.gold{
  background: #ffe4dc url(./images/TBico.png) 0 -572px no-repeat;
}
main > .fuzhu > .mainright > .mainrightTop > .self > p > a.club{
  background: #ffe4dc url(./images/TBico.png) 0 -528px no-repeat;
}
main > .fuzhu > .mainright > .mainrightTop > .self > p > button{
  color: #fff;
  font-weight: bold;
  width: 75px;
  height: 25px;
  line-height: 25px;
  border-radius: 4px;
  background-image: linear-gradient(to right, #ff9000, #ff5000);
  margin: 10px 4px 0px 4px;
  cursor: pointer;
}
main > .fuzhu > .mainright > .mainrightTop > .ad{
  height: 65px;
}
main > .fuzhu > .mainright > .mainrightTop > .ad > img{
  width: 290px;
  height: 60px;
}
main > .fuzhu > .mainright > .mainrightMiddle{
  width: 290px;
  height: 232px;
}
main > .fuzhu > .mainright > .mainrightMiddle > ul{
  width: 290px;
  height: 70px;
  padding-top: 7px;
  background-color: #fff;
  text-align: center;
}
main > .fuzhu > .mainright > .mainrightMiddle > ul > li{
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  width: 32px;
  margin: 0 10px;
  color: rgb(60, 60, 60);
  font-weight: 700;
}
main > .fuzhu > .mainright > .mainrightMiddle > ul > div > a{
  font-size: 12px;
  font-weight: 700;
  color: #ff5000;
  line-height: 50px;
}
i{
  font-style: normal;
}
main > .fuzhu > .mainright > .mainrightMiddle > table{
  width: 100%;
  height: 155px;
  background-color: #fff;
  table-layout: fixed;
}
table{
  border-collapse: collapse;
}
main > .fuzhu > .mainright > .mainrightMiddle > table td{
  border: 1px solid #f4f4f4;
  text-align: center;
}
main > .fuzhu > .mainright > .mainrightMiddle > table td > a > span{
  display: block;
  height: 24px;
  width: 24px;
  margin: 0 auto;
  background: url(./images/TBico.png) no-repeat;
  margin-bottom: 10px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table > tr > .img1 > span{
  background-position: 0 0;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img2 > a > span{
  background-position: 0 -87px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img3 > a > span{
  background-position: 0 -44px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img4 > a > span{
  background-position: 0 -132px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img5 > a > span{
  background-position: 0 -176px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img6 > a > span{
  background-position: 0 -220px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img7 > a > span{
  background-position: 0 -264px;
}
main > .fuzhu > .mainright > .mainrightMiddle > table .img8 > a > span{
  background-position: 0 -308px;
}
main > .fuzhu > .mainright > .mainrightBottom{
  width: 290px;
  height: 74px;
  background-color: #fff;
}
main > .fuzhu > .mainright > .mainrightBottom .top{
  height: 30px;
}
main > .fuzhu > .mainright > .mainrightBottom .top > h3{
  margin-top: 5px;
  margin-left: 10px;
  display: inline-block;
}
main > .fuzhu > .mainright > .mainrightBottom .top > a{
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}
main > .fuzhu > .mainright > .mainrightBottom .bottom{
  height: 44px;
}
main > .fuzhu > .mainright > .mainrightBottom .bottom > ul > li{
  float: left;
  margin-top: 3px;
  margin-left: 21.5px;
}
main > .fuzhu > .mainright > .mainrightBottom .bottom > ul > li > a > img{
  width: 32px;
  height: 32px;
}
footer{
  width: 1190px;
  height: 371px;
  background-color: #fff;
  margin-top: 5px;
}
footer > .title{
  margin-top: 33px;
  height: 24px;
  margin-left: 20px;
  position: relative;
}
footer > .title > img{
  height: 24px;
  margin-right: 10px;
  float: left;
}
footer > .title > p{
  height: 24px;
  line-height: 24px;
  color: #999;
  font-weight: 400;
}
footer > .content{
  margin-top: 33px;
  margin-left: 20px;
}
footer > .content > ul > li{
  float: left;
  margin-left: 10px;
  width: 180px;
  height: 180px;
}
footer > .content > ul > li > a > img{
  width: 180px;
  height: 180px;
}
footer > .content > ul > li > a > .information{
  overflow: hidden;
  padding: 0 4px 0 6px;
  width: 180px;
}
footer > .content > ul > li > a > .information > h4{
  font-size: 16px;
  margin-top: 5px;
  line-height: 28px;
  height: 28px;
  font-weight: normal;
  overflow: hidden;
}
footer > .content > ul > li > a > .information > p{
  line-height: 24px;
  color: #999;
  font-size: 14px;
  overflow: hidden;
  height: 24px;
}
footer > .content > ul > li > a > .information > p.extra{
  line-height: 22px;
    height: 22px;
    margin-top: 2px;
    color: #35b1ff;
}

补充：感谢自己能写完，但是又发现了一个大问题，当屏幕宽度变小时，布局就会发生错乱，下次有空再更新吧

发现的问题：总容器的宽度没有确定就乱用%单位，导致布局错乱

引发的思考：以后写代码前，一定要先布局，先布局，先布局！慎用单位，慎用单位，慎用单位！

css设置图片根据最大边自适应-爱代码爱编程

2020-10-08 标签: html css3分类: css3 html5

<div class="img_box"> <img src="1.jpg" alt="" class="img_newItem"> </div> 父级设置宽高和flex布局，子级图片设置最大宽高（max-width\max-height）为100%，宽高(width\height)为auto； .img_b

vue单页面切换动画效果-爱代码爱编程

2020-10-08 标签: html css3 vue分类: vue js css3

<transition name="slide-fade"> <router-view/> </transition> <style scoped> .slide-fade{ position: absolute;left:0;right: 0; } .slide-fade-enter-

前端基础之CSS-爱代码爱编程

2020-10-08 标签: html css 定位分类: 前端

文章目录 CSS选择器伪类标签分类盒子模型浮动定位相对定位relative绝对定位absolute固定定位fixed CSS CSS即Cascading Style Sheet(级联样式表)，是一种样式表语言，用于为HTML文档修饰外观，定义布局。优先级:行级样式表 > 内嵌样式表 > 外部样式表行级样式表直接定义在需要修

简单实现vue验证码60秒倒计时功能-爱代码爱编程

2020-10-08 标签: html css vue.js vue

简单实现vue验证码60秒倒计时功能 <div v-show="show" @click="getCode">获取验证码</div> <div-show="!show" class="count">{{count}} s</div> data(){ return { show: true, count:

拖动验证码功能-爱代码爱编程

2020-10-08 标签: html javascript css分类: vue技术 css+js动画

效果如上图（有点简陋），原理就是先给图片添加draggable="false"禁止默认拖动事件，获取眼睛图片对象添加addEventListener，通过公式（移动后鼠标点击位置距离左边的长度 - （移动前鼠标点击位置距离左边的长度-移动前眼睛图片距离左边的长度）求得移动后眼睛图片距离左边的长度，通过定位设置眼睛最终的位置，高度同理，然后documen

表格的增加和删除含有鼠标悬浮颜色的变化-爱代码爱编程

2020-10-08 标签: html javascript js分类: 前端学习

表格的增加和删除涉及小点： 1.表格的增加-插入（一定要找到父节点插入后记得在对应位置 append ） 2.删除是找到父亲的父亲，这样才能删完整行表的内容var tr=obj.parentNode.parentNode; <!DOCTYPE HTML> <head> <title学生数据表</title&

小程序获取元素样式（宽高间距）-爱代码爱编程

2020-10-08 标签: css 小程序分类: 小程序 css3

//获取宽度，设置高度等于宽度 var query = wx.createSelectorQuery().in(this); var that = this; query.select('.chooseImgItem').boundingClientRect(function (rect) { console.log(

前端基础之CSS-爱代码爱编程

2020-10-08 标签: html css 定位分类: 前端

文章目录 CSS选择器伪类标签分类盒子模型浮动定位相对定位relative绝对定位absolute固定定位fixed CSS CSS即Cascading Style Sheet(级联样式表)，是一种样式表语言，用于为HTML文档修饰外观，定义布局。优先级:行级样式表 > 内嵌样式表 > 外部样式表行级样式表直接定义在需要修

前端面试知识点（四）--- 清除浮动的常用方法-爱代码爱编程

2020-10-08 标签: css 前端分类: 前端面试题汇总

为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0（高度塌陷）的问题如下所示： <div class="father"> <div class="son" style=" width: 300px; background: pink;">111</div> <d

Counterfactual Samples Synthesizing for Robust Visual Question Answering 2020cvpr论文阅读-爱代码爱编程

2020-10-10 标签: css 深度学习计算机视觉分类: VQA vqa论文阅读

摘要：目前的方法不能使基于全局的模型同时有效利用两种不可或缺的特征：1、图像可解释性：模型在生成答案时应该依赖正确的图像区域；2、对问题敏感性：模型应该对问题的语言变化要敏感所以论文作者提出了一种跨模型的训练策略叫Counterfactual Samples Synthesizing（反事实样本合成）。通过给图像或者问题加mask，然后对应的设定不

简单实现vue验证码60秒倒计时功能-爱代码爱编程

2020-10-08 标签: html css vue.js vue

简单实现vue验证码60秒倒计时功能 <div v-show="show" @click="getCode">获取验证码</div> <div-show="!show" class="count">{{count}} s</div> data(){ return { show: true, count:

nth-child的坑 - 不管元素的类型-爱代码爱编程

2020-10-09 标签: css

nth-child的坑 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素. :nth-child(n) / nth-last-child选择器匹配属于其父元素的第 n 个子元素 / 倒数开始数第n个元素，不论元素的类型。 <style> li:nth-last-child(2) {

【学习笔记】HTML+CSS模仿静态淘宝首页-爱代码爱编程

一、先上一张成果图

二、已上传Github

三、直接上代码（头大预警）

HTML:

CSS：

补充：感谢自己能写完，但是又发现了一个大问题，当屏幕宽度变小时，布局就会发生错乱，下次有空再更新吧

发现的问题： 总容器的宽度没有确定就乱用%单位，导致布局错乱

引发的思考：以后写代码前，一定要先布局，先布局，先布局！慎用单位，慎用单位，慎用单位！

发现的问题：总容器的宽度没有确定就乱用%单位，导致布局错乱