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

最新推荐文章于 2022-07-11 23:03:39 发布
最新推荐文章于 2022-07-11 23:03:39 发布
阅读量2.4k 收藏 20
点赞数 3
CC 4.0 BY-SA版权
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ttxwwdn/article/details/109498659

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

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;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Starry577
关注
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
专注于dreamweaver网页设计制作
08-18 959
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
web前端期末大作业——品优购项目(7页)含设计 HTML+CSS+JavaScript
12-02 1572
HTML5期末大作业：品优购项目网站设计——品优购项目(7页)含设计 HTML+CSS+JavaScript 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电
pc端品优购静态网页.zip
04-24
pc端品优购静态网页主要包含首页、列表页和注册页的制作
品优购静态页面（html+css）——注册页
ttxwwdn的博客
11-04 997
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/common.css" /> <link
品优购静态网页项目(1)
Czc1357618897的博客
03-24 597
品优购静态网页
品优购静态页面--首页的制作
m0_50789696的博客
04-11 1025
一公共样式 common.css index.html 1网站图标 favicon.ico 显示在浏览器的地址栏或者标签上 1.1 制作favicon 图标 ① 将logo 图标切成 png图片 ②把png 转换为ico 图标，利用第三方网站 比特虫 在线制作 ico图标 1.2 favicon 图标放到网站根目录下 1.3 HTML 页面引入favicon 图标 <!-- 引入网站图标 --> <link rel="shortcut icon" hre..
品优购电商静态页面项目
weixin_42044763的博客
06-10 1654
一、首页制作 因为首页的头部和尾部在其他页面中是一样的，所以这两部分我们要把样式写到公共的common.css里 比较合适的命名： 1.快捷导航栏shortcut
HTML5期末大作业：品优购网站设计——品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板 学生网页制作源代码下载
11-25 860
HTML5期末大作业：品优购网站设计——品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网
基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）
qq_365392777
10-22 1万+
HTML5期末大作业：电商网站设计——仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作
HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-06 5万+
HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支
品优购静态页面结果，内含psd文件。
07-20
学习完基础的HTML及CSS知识后，独立完成的品优购项目，运用到了浮动、定位、清除浮动、页面跳转等知识，能够熟练运用常用的标签。
品优购静态页资源psd
08-05
品优购
商品详情静态页面
07-04
商品详情静态页面，很好看的商品详情静态页面，有规格参数、商品介绍、商品评价、售后保障、扫手机下单、加入购物车
优购商城模板
07-12
优购商城静态页模板，包括首页，栏目列表页，购物车页，订单页，品牌页等等
品优购前端静态页面(HTML+CSS)
weixin_48681975的博客
07-11 2295
最近在复习前端的知识，在B站上面跟着黑马前端pink老师过了一部分HTML+CSS的知识，然后跟着视频写了一下品优购的项目。在跟着pink老师敲完品优购和商品列表这几个页面后，pink老师为了不水视频时长，还剩下几个页面没有完成就没出视频带着我们来做了。秉着复习和巩固的心态，自己对照着ps效果图把剩下的两个比较重要的页面给做出来了，仅以此文章来纪念复习的一个小阶段。 品优购项目里面还剩下注册页面，提交订单页面等几个较简单的页面没做出来，那几个页面布局比较简单，暂时就不再花时间去做了，希望以后有时间再把那几
品优购10——网页静态化解决方案
武汉小喽啰
02-27 381
因为生成静态页面属于一个单独的功能，我们新建一个单独的工程来实现 1. 服务层 1）创建pinyougou-page-interface工程，创建com.pinyougou.page.service包,包下创建接口 2）创建war工程pinyougou-page-service 3）依赖 <dependency> <groupId>org.freemarke...
品优购网页
danke的博客
04-07 1万+
品优购网页制作 因为疫情大一没开学自己在家无聊学了HTML和CSS 以下是学习这么久以来的总结与作品（B站里pink老师的课讲得非常棒） 在这里插入图片描述 好像只能上传一张图片 总共做了四个不同网页（主页，手机页，注册页，学习页） 大概学了二十多天 其实也比较简单 就是记得东西比较多而且很杂 要多多复习 ...
前端初尝试---品优购首页（只用HTML和CSS）
weixin_52025712的博客
03-03 2940
网站大体如下 主页HTML码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" > <meta http-equiv="x-ua-compatible" content="ie=edge">
品优购首页html和css代码 记录
weixin_46427707的博客
06-17 1314
品优购首页代码
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值