品优购静态页面（html+css）——主页

最新推荐文章于 2022-07-11 23:03:39 发布

原创最新推荐文章于 2022-07-11 23:03:39 发布 · 2.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

我又来了，又是一个静态页面(●’◡’●)

html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品优购-正品低价、品质保障、配送及时、都是我编的！</title>
    <meta
      name="description"
      content="品优购-这是一个啥也买不了的网站，走过路过不要错过，反正都买不了，看看就行！"
    />
    <meta
      name="keywords"
      content="手机、电脑、笔记本、玛莎拉蒂、兰博基尼、我啥都卖！"
    />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="list.html" />
    <link rel="stylesheet" href="register.html" />
  </head>
  <body>
    <div class="shortcut">
      <div class="w">
        <span
          >品优购欢迎您！&nbsp;<a href="#">请登录 &nbsp;</a>
          <a href="register.html"> 免费注册 </a></span
        >
        <ul>
          <li><a href="#">我的订单</a></li>
          <li class="iconfont"><a href="#">我的品优购</a></li>
          <li><a href="#">品优购会员</a></li>
          <li><a href="#">企业采购</a></li>
          <li class="iconfont"><a href="#">关于品优购</a></li>
          <li class="iconfont"><a href="#">客户服务</a></li>
          <li class="iconfont"><a href="#">网站导航</a></li>
        </ul>
      </div>
    </div>
    <header class="w header clearfix">
      <div class="logo">
        <!-- logo SEO 优化 -->
        <h1>
          <a href="index.html" title="品优购商城">品优购商城</a>
        </h1>
      </div>
      <div class="search">
        <input type="search" placeholder="语言开发" />
        <input type="button" value="搜索" />
        <ul class="hotwords">
          <li><a href="#">优惠购首发</a></li>
          <li><a href="#">亿元优惠</a></li>
          <li><a href="#">9.9元团购</a></li>
          <li><a href="#">满99元减30</a></li>
          <li><a href="#">办公用品</a></li>
          <li><a href="#">电脑</a></li>
          <li><a href="#">通信</a></li>
        </ul>
      </div>
      <div class="shopcar iconfont">
        <a href="">我的购物车</a>
        <i class="count">79999999</i>
      </div>
    </header>
    <nav class="nav">
      <div class="w">
        <div class="dropdown">
          <div class="dt">全部商品分类</div>
          <div class="fixed">
            <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>
              <li><a href="#">家用电器</a></li>
              <li><a href="#">家用电器</a></li>
              <li><a href="#">家用电器</a></li>
            </ul>
          </div>
          <div class="dd">
            <ul class="iconfont">
              <li>
                <a href="list.html" target="_blank">手机、</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>
              </li>
              <li>
                <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>
              </li>
              <li>
                <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>
              </li>
              <li>
                <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>
              </li>
              <li>
                <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>
              </li>
            </ul>
          </div>
        </div>
        <div class="navitems">
          <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>
    <div class="w clearfix">
      <div class="main">
        <div class="focus">
          <img src="images/focus.png" alt="" />
        </div>
        <div class="newsflash">
          <div class="news">
            <div class="tit">
              <h3>品优购快报</h3>
              <a class="iconfont" href="#">更多 </a>
            </div>
            <ul>
              <li>
                <span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a>
              </li>
              <li>
                <span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a>
              </li>
              <li>
                <span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a>
              </li>
              <li>
                <span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a>
              </li>
              <li>
                <span>[特惠] </span><a href="#">备战开学季，全面半价购数码</a>
              </li>
            </ul>
          </div>
          <div class="flash">
            <ul>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
              <li>
                <div></div>
                <a href="">话费</a>
              </li>
            </ul>
          </div>
          <div class="bargain">
            <img src="images/bargain.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="recommend w">
      <div class="today_recommend">
        <img src="images/recom.png" alt="" />
      </div>
      <div class="recommend_goods">
        <ul>
          <li>
            <div>
              <h3>优质好货</h3>
              <h3>满300减100</h3>
              <p>满500减200</p>
              <a href="#">团购</a>
            </div>
            <img src="images/recom_goods.png" alt="" />
          </li>
          <li>
            <div>
              <h3>优质好货</h3>
              <h3>满300减100</h3>
              <p>满500减200</p>
              <a href="#">团购</a>
            </div>
            <img src="images/recom_goods.png" alt="" />
          </li>
          <li>
            <div>
              <h3>优质好货</h3>
              <h3>满300减100</h3>
              <p>满500减200</p>
              <a href="#">团购</a>
            </div>
            <img src="images/recom_goods.png" alt="" />
          </li>
          <li>
            <div>
              <h3>优质好货</h3>
              <h3>满300减100</h3>
              <p>满500减200</p>
              <a href="#">团购</a>
            </div>
            <img src="images/recom_goods.png" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <div class="guess_u_like w">
      <nav class="iconfont">
        <h2>猜你喜欢</h2>
        <a href="#">换一批 </a>
      </nav>
      <article>
        <ul>
          <li>
            <img src="images/guess_u_like.png" alt="" />
            <div>
              <a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
              <a href="#">&yen;1.00</a>
            </div>
          </li>
          <li>
            <img src="images/guess_u_like.png" alt="" />
            <div>
              <a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
              <a href="#">&yen;1.00</a>
            </div>
          </li>
          <li>
            <img src="images/guess_u_like.png" alt="" />
            <div>
              <a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
              <a href="#">&yen;1.00</a>
            </div>
          </li>
          <li>
            <img src="images/guess_u_like.png" alt="" />
            <div>
              <a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
              <a href="#">&yen;1.00</a>
            </div>
          </li>
          <li>
            <img src="images/guess_u_like.png" alt="" />
            <div>
              <a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
              <a href="#">&yen;1.00</a>
            </div>
          </li>
          <li>
            <img src="images/guess_u_like.png" alt="" />
            <div>
              <a href="#">阳光美包新款单肩包女 包时尚子母包四件套女</a>
              <a href="#">&yen;1.00</a>
            </div>
          </li>
        </ul>
      </article>
    </div>
    <div class="fun w">
      <h2>传智播客·有趣区</h2>
      <article>
        <div class="book">
          <img src="images/books.png" alt="" />
        </div>
        <div class="good_things">
          <h3 class="little_tit">好东西</h3>
          <div class="father_box">
            <div class="box">
              <h2>达人推荐</h2>
              <p>雷神金属机械键盘</p>
              <a href="#">与你相见恨晚</a>
            </div>
          </div>
          <ul>
            <li class="father_box">
              <div class="box">
                <h2>达人推荐</h2>
                <p>雷神金属机械键盘</p>
                <a href="#">与你相见恨晚</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="brand_street">
          <h3 class="little_tit">品牌街</h3>
          <div class="father_box">
            <div class="box">
              <h2>苏泊尔</h2>
              <p>返场大秀场</p>
              <a href="#">爆品直降一百元</a>
            </div>
          </div>
          <ul>
            <li class="father_box">
              <div class="box">
                <h2>达人推荐</h2>
                <p>雷神金属机械键盘</p>
                <a href="#">与你相见恨晚</a>
              </div>
            </li>
            <li class="father_box">
              <div class="box">
                <h2>达人推荐</h2>
                <p>雷神金属机械键盘</p>
                <a href="#">与你相见恨晚</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="logos">
          <img src="images/logos.png" alt="" />
        </div>
      </article>
    </div>
    <div class="phone w">
      <div class="head">
        <h2>手机通讯</h2>
        <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>
          <li><a href="#">高性价比</a></li>
        </ul>
      </div>
      <div class="body">
        <div class="menu">
          <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>
          </ul>
          <h2>中兴A1 低至499元</h2>
          <p>国民指纹，超6万好评</p>
          <img src="images/menu.png" alt="" />
        </div>
        <div class="chart">
          <h2>360 N4S限量版</h2>
          <p>1199元抢购</p>
          <div>
            <img src="images/chart.png" alt="" />
            <ul class="promo">
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
          </div>
        </div>
        <div>
          <ul class="main_phone">
            <li>
              <h2>Moto X极</h2>
              <p>低至¥2999</p>
              <img src="images/main_phone.png" alt="" />
            </li>
            <li>
              <h2>Moto X极</h2>
              <p>低至¥2999</p>
              <img src="images/main_phone.png" alt="" />
            </li>
          </ul>
          <ul class="main_phone1">
            <li>
              <h2>G9青春版玫瑰金首发</h2>
              <p>赢0元试用</p>
              <img src="images/main_phone1.png" alt="" />
            </li>
          </ul>
          <ul class="main_phone">
            <li>
              <h2>Moto X极</h2>
              <p>低至¥2999</p>
              <img src="images/main_phone.png" alt="" />
            </li>
            <li>
              <h2>Moto X极</h2>
              <p>低至¥2999</p>
              <img src="images/main_phone.png" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="sponsor">
        <img src="images/sponsor.png" alt="" />
      </div>
    </div>
    <footer class="footer">
      <div class="mod_service">
        <ul class="w">
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
          <li>
            <img src="images/ft1.png" alt="" />
            <div>
              <h3>正品保障</h3>
              <p>提供发票，正品保障</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="mod_help">
        <div class="w">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>帮助中心</dt>
            <dd><img src="images/wx_cz.jpg" alt="" /></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
        </div>
      </div>
      <div class="mod_copyright">
        <div class="w">
          <ul class="clearfix">
            <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>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
          </ul>
          <p>
            地址：XXXXXXXXXXXXXXXXXXXXXXXXXX 邮编：XXXXXX
            电话：400-618-XXXX 传真：010-XXXXXXXX 邮箱: zXXXXXXX.cn
          </p>
          <p>京ICP备XXXXXXXXXXXXXX号京公网安备XXXXXXXXXXX2</p>
        </div>
      </div>
    </footer>
  </body>
</html>

css部分
common.css

common.css
.w {
  width: 1200px;
  margin: 0 auto;
}
.shortcut {
  height: 31px;
  background-color: #f1f1f1;
  line-height: 31px;
}
.shortcut span a:last-of-type {
  color: #c81623;
}
.shortcut ul {
  float: right;
}
.shortcut ul li {
  height: 31px;
  line-height: 31px;
  float: left;
}
.shortcut ul li a {
  padding: 0 14px;
  border-right: 1px solid;
  font-size: 12px;
}
.shortcut ul li:nth-child(2) a::after,
.shortcut ul li:nth-child(n + 5) a::after {
  content: '\e66f';
  padding-left: 5px;
}
.shortcut ul li:last-child a {
  border: none;
}
.logo {
  float: left;
  width: 175px;
  height: 55px;
  margin: 27px 0 24px;
}
.logo h1 a {
  float: left;
  display: block;
  width: 175px;
  height: 55px;
  background-image: url(../images/logo.png);
  background-repeat: no-repeat;
  font-size: 0;
}
.search {
  float: left;
  margin: 27px 0 24px 170px;
}

.search input[type='search'] {
  float: left;
  width: 455px;
  height: 34px;
  padding: 0 5px;
  border: 2px solid #c81623;
  border-right: none;
  outline: #c81623;
}

.search input[type='button'] {
  float: left;
  width: 83px;
  height: 34px;
  color: white;
  background-color: #c81623;
  border: none;
  outline: #c81623;
  cursor: pointer;
}
.search .hotwords li {
  float: left;
  margin: 3px 12px 0;
}
.shopcar {
  position: relative;
  float: right;
  width: 108px;
  height: 35px;
  margin-top: 27px;
  margin-right: 64px;
  padding: 0 16px;
  line-height: 35px;
  font-size: 12px;
  border: 1px solid #dfdfdf;
  background-color: #f7f7f7;
}
.shopcar::before {
  font-size: 16px;
  padding-right: 5px;
  content: '\e600';
  color: #c81623;
}
.shopcar::after {
  float: right;
  content: '\e666';
}
.shopcar .count {
  position: absolute;
  /* 左对齐更好看 */
  left: 105px;
  top: -5px;
  height: 14px;
  line-height: 14px;
  color: #ffffff;
  border: 1px solid #c81623;
  padding: 0 4px;
  background-color: #c81623;
  border-radius: 7px 7px 7px 0;
}
.footer {
  height: 417px;
  width: 100%;
  background-color: #f1f1f1;
  margin-top: 40px;
}
.mod_service {
  height: 109px;
  border-bottom: 2px solid #ededed;
}
.footer .mod_service li {
  float: left;
  margin: 30px;
}
.footer .mod_service li img {
  float: left;
  margin-left: 7px;
}
.footer .mod_service li div {
  float: left;
  position: relative;
  top: 5px;
  margin-left: 7px;
}
.mod_help {
  height: 188px;
  border-bottom: 2px solid #ededed;
}
.footer .mod_help dl {
  float: left;
  margin: 22px 50px 19px 60px;
}
.footer .mod_help dl dt {
  font-size: 16px;
  padding-bottom: 5px;
  color: #484848;
}
.footer .mod_help dl img {
  width: 98px;
  height: 98px;
}
.footer .mod_help dl:last-child {
  text-align: center;
  font-size: 14px;
}
.footer .mod_copyright ul {
  width: 935px;
  margin: 20px auto;
}

.footer .mod_copyright li {
  float: left;
  margin: 0 auto;
}
.footer .mod_copyright li a {
  margin: 20px 0;
  padding: 0 14px;
  border-right: 1px solid #484848;
}
.footer .mod_copyright li:last-child a {
  border: none;
}
.footer .mod_copyright p:first-of-type {
  font-size: 10px;
  width: 732px;
  margin: 0 auto;
}
.footer .mod_copyright p:last-of-type {
  font-size: 10px;
  width: 272px;
  margin: 0 auto;
}

base.css

base.css
/* 清除内外边距 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 400;
}
/* 清除斜体 */
em,
i {
  font-style: normal;
}
/* 清除小圆点 */
li {
  list-style: none;
}

img {
  /* 照顾低版本浏览器 */
  border: 0;
  /* 解决图片底部空白问题 */
  vertical-align: middle;
}
/* 鼠标变小手 */
button {
  cursor: pointer;
}
a {
  color: #666;
  text-decoration: none;
}
a:hover {
  color: #c81623;
}
button,
input {
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    '\5B8B\4F53', sans-serif;
}
body {
  /* 抗锯齿性 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  /* '\5B8B\4F53'宋体的以时，这样兼容性比较好 */
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    '\5B8B\4F53', sans-serif;
  color: #666;
}
.hide,
.none {
  display: none;
}
/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: '.';
  height: 0;
}
.clearfix {
  *zoom: 1;
}

index.css

index.css
.fixed {
  position: fixed;
  width: 66px;
  height: 341px;
  right: 50%;
  margin-right: 613px;
}
.fixed ul li {
  height: 31px;
  width: 61px;
  margin: 5px;
  line-height: 31px;
  text-align: center;
  border-bottom: 1px solid #e4e4e4;
}
.fixed ul li:hover {
  background-color: #c81623;
}
.fixed ul li:hover a {
  color: #ffffff;
}
.nav {
  height: 45px;
  border-bottom: 2px solid #c81623;
}
nav .dropdown {
  float: left;
}

nav .dropdown .dt {
  width: 206px;
  height: 45px;
  line-height: 45px;
  background-color: #b1191a;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}
nav .dropdown .dd {
  width: 206px;
  height: 467px;
  background-color: #c81623;
}
nav .dropdown .dd li {
  padding: 0 10px;
}
nav .dropdown .dd li a {
  height: 31px;
  line-height: 31px;
  font-size: 14px;
  color: #ffffff;
}
nav .dropdown .dd li:hover {
  background-color: #ffffff;
}
nav .dropdown .dd li:hover a {
  color: #c81623;
}
nav .dropdown .dd li::after {
  float: right;
  content: '\e666';
  color: #ffffff;
  font-size: 12px;
}
nav .navitems li {
  float: left;
  line-height: 45px;
}
nav .navitems li a {
  padding-left: 30px;
  padding-right: 20px;
  font-size: 14px;
}
.main {
  position: relative;
  float: left;
  width: 980px;
  height: 455px;
  margin: 10px 0 10px 10px;
}
.main .focus {
  position: absolute;
  left: 0;
  width: 718px;
  height: 455px;
}
.main .focus img {
  width: 100%;
  height: 100%;
}
.newsflash {
  position: absolute;
  right: 0;
  width: 251px;
  height: 375px;
  border: 1px solid #e4e4e4;
}
.newsflash .news .tit {
  height: 165px;
}
.newsflash .news .tit {
  height: 34px;
  line-height: 34px;
  padding: 0 15px;
  border-bottom: 1px dotted #e4e4e4;
}
.newsflash .news .tit h3 {
  float: left;
  font-weight: 400;
}
.newsflash .news .tit a {
  float: right;
  font-size: 12px;
}
.newsflash .news .tit a::after {
  content: '\e666';
}
.newsflash .news ul {
  border-bottom: 1px solid #e4e4e4;
  height: 131px;
}
.newsflash .news ul li {
  height: 24px;
  line-height: 24px;
  padding: 0 15px;
}
.newsflash .news ul li span {
  font-weight: 700;
}
.newsflash .flash ul {
  width: 252px;
  height: 207px;
}
.newsflash .flash li {
  float: left;
  width: 63px;
  height: 70px;
  text-align: center;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  overflow: hidden;
}
.newsflash .flash li div {
  width: 24px;
  height: 24px;
  margin: 12px auto;
  background-image: url(../images/icons.png);
  background-position: -17px -16px;
}
.newsflash .bargain {
  height: 76px;
  width: 251px;
  padding-top: 5px;
}
.newsflash .bargain img {
  width: 100%;
  height: 100%;
}
.recommend {
  height: 163px;
  background-color: #ebebeb;
}
.recommend .today_recommend {
  float: left;
  width: 207px;
  height: 163px;
  line-height: 163px;
  background-color: #5c5251;
  text-align: center;
}

.recommend .recommend_goods li {
  float: left;
  width: 228px;
  height: 143px;
  padding: 12px;
  margin: 10px;
  border-right: 2px solid #e4e4e4;
}
.recommend .recommend_goods li div {
  float: left;
}
.recommend .recommend_goods li img {
  float: right;
}
.recommend .recommend_goods li:last-child {
  border: none;
}
.recommend .recommend_goods li div h3:first-of-type {
  font-size: 16px;
  color: #333333;
  margin-bottom: 10px;
}
.recommend .recommend_goods li div h3:last-of-type {
  padding: 0 3px;
  font-weight: 500;
  background-color: #00a0e8;
  color: #ffffff;
}
.recommend .recommend_goods li div p {
  font-weight: 700;
}
.recommend .recommend_goods li div a {
  display: block;
  height: 20px;
  width: 67px;
  margin-top: 21px;
  text-align: center;
  background-color: #00a0e8;
  border: 1px solid #00a0e8;
  border-radius: 10px;
  color: #ffffff;
}
.guess_u_like {
  height: 292px;
  border-bottom: 1px solid #e4e4e4;
}
.guess_u_like nav {
  position: relative;
  height: 59px;
  border-bottom: 1px solid #e4e4e4;
}
.guess_u_like nav h2 {
  position: absolute;
  left: 0;
  padding-top: 30px;
  font-weight: 400;
}
.guess_u_like nav a {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-right: 20px;
}
.guess_u_like nav a::after {
  content: '\e6e1';
  font-size: 14px;
}
.guess_u_like article li {
  float: left;
  width: 200px;
  height: 233px;
  text-align: center;
}
.guess_u_like article li a {
  display: block;
}
.guess_u_like article li div {
  padding: 10px 35px;
  border-right: 1px solid #e4e4e4;
  text-align: left;
}
.guess_u_like article li:last-child div {
  border: none;
}
.guess_u_like article li div a:first-of-type {
  -webkit-line-clamp: 2;
}
.guess_u_like article li div a:last-of-type {
  font-size: 16px;
  color: #c81623;
  font-weight: 700;
}
.fun {
  height: 465px;
  border-bottom: 1px solid #e4e4e4;
}
.fun > h2 {
  height: 59px;
  font-size: 18px;
  padding-top: 30px;
  font-weight: 400;
  border-bottom: 1px solid #e4e4e4;
}
.fun article .book {
  float: left;
  width: 404px;
  height: 406px;
  background-color: #b8bddd;
}
.fun article .book img {
  margin: 20px 50px 30px 20px;
}
.fun article .good_things {
  float: left;
  width: 228px;
  height: 406px;
  border-right: 1px solid #e4e4e4;
}
.fun article .little_tit {
  height: 40px;
  line-height: 40px;
  margin: 0 18px;
  text-align: center;
  border-bottom: 1px dashed #e4e4e4;
}
.fun article .father_box {
  position: relative;
  height: 192px;
  width: 218px;
  margin-bottom: 16px;
  padding-left: 10px;
  background-image: url(../images/keyboard.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}
.fun article .box {
  position: absolute;
  left: 10px;
  top: 35%;
  width: 100px;
  height: 70px;
}
.fun article .box h2 {
  font-weight: 400;
}
.fun article .box a {
  color: #c81623;
}
.fun article .brand_street {
  float: left;
  width: 406px;
  height: 406px;
  border-right: 1px solid #e4e4e4;
  background-color: #f7f7f7;
}
.fun article .brand_street > div {
  width: 346px;
  margin-left: 50px;
  background-image: url(../images/supor.png);
  background-repeat: no-repeat;
}
.fun article ul .father_box {
  background-image: url(../images/clothes.png);
  background-position: right bottom;
  height: 159px;
  width: 228px;
}
.fun article ul li {
  float: left;
  border-top: 1px solid #e4e4e4;
}
.fun article .brand_street ul li {
  width: 202px;
}
.fun .logos {
  float: left;
  width: 160px;
  height: 406px;
}
.phone {
  position: relative;
  height: 504px;
}
.head {
  height: 30px;
  line-height: 30px;
  border-bottom: 2px solid #c81623;
  padding-top: 25px;
}
.head h2 {
  float: left;
  font-weight: 400;
  color: #c81623;
}
.head ul {
  float: right;
}
.head ul li {
  float: left;
}
.head ul li a {
  padding: 0 16px;
  border-right: 1px solid #e4e4e4;
}
.head ul li:last-child a {
  border: none;
}
.body {
  height: 360px;
}
.body .menu {
  float: left;
  text-align: center;
  width: 207px;
  height: 360px;
  background-color: #f9f9f9;
}
.body .menu ul {
  width: 207px;
  height: 100px;
}
.body .menu ul li {
  float: left;
  width: 90px;
  height: 32px;
  line-height: 32px;
  margin: 0 6px;
  border-bottom: 1px solid #e4e4e4;
}
.body .menu h2 {
  margin-top: 27px;
  font-weight: 400;
  color: #c81623;
}
.body .menu p {
  color: #c81623;
}
.body .menu img {
  margin-top: 20px;
}
.body .chart {
  float: left;
  width: 268px;
  height: 312px;
  background-color: #c6e8b6;
  padding: 38px 30px 10px;
}
.body .chart div {
  position: relative;
  width: 268px;
  height: 240px;
  text-align: center;
  margin-top: 38px;
}
.body .chart h2,
.body .chart p {
  color: #4c852a;
  font-weight: 400;
}

.body .chart div .promo {
  position: absolute;
  bottom: 15px;
  left: 104px;
  width: 60px;
  height: 16px;
}

.body .chart div .promo li {
  float: left;
}
.body .chart div .promo li a {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border-radius: 6px;
  background-color: #ffffff;
}
.body .chart div .promo li a:hover {
  background-color: #3e3e3e;
}
.body .main_phone {
  float: left;
  width: 207px;
  height: 360px;
}
.body .main_phone li {
  position: relative;
  float: left;
  height: 180px;
  width: 207px;
  padding-top: 25px;
  padding-left: 25px;
}
.body .main_phone li img {
  position: absolute;
  right: 0;
  bottom: 0;
}
.body .main_phone li p {
  color: #c81623;
}
.body .main_phone1 li {
  float: left;
  width: 207px;
  height: 360px;
  text-align: center;
  padding-top: 72px;
}
.body .main_phone1 li img {
  padding-top: 40px;
}
.phone .sponsor {
  position: absolute;
  bottom: 0;
}

在这里插入图片描述