品优购练习（完整版）

于 2024-03-13 19:51:19 发布
阅读量666 收藏 10
点赞数 22
文章标签： html5 css 前端 css3 firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_63342197/article/details/136689166
版权

一、页面展示

1.首页界面展示

2.注册页界面展示

3.列表页界面展示

二、代码部分

（1）html代码部分

 1.首页代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>品优购</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
  <!-- 快捷导航模块 -->
  <section>
    <div class="shortcut w">
      <ul class="shortcut_left">
        <li><a href="#">品优购欢迎您！</a></li>
        <li><a href="#">请登录</a></li>
        <li><a href="register.html">免费注册</a></li>
      </ul>
      <ul class="shortcut_right">
        <li>
          <a href="#">我的订单</a>
        </li>
        <li> | </li>
        <li class="arrow-icon">
          <a href="#">我的品优购</a>
        </li>
        <li> | </li>
        <li>
          <a href="#">品优购会员</a>
        </li>
        <li> | </li>
        <li>
          <a href="#">企业采购</a>
        </li>
        <li> | </li>
        <li class="arrow-icon">
          <a href="#">关注品优购</a>
        </li>
        <li> | </li>
        <li class="arrow-icon">
          <a href="#">客户服务</a>
        </li>
        <li> | </li>
        <li class="arrow-icon">
          <a href="#">网站导航</a>
        </li>
      </ul>
    </div>
  </section>

  <div class="w header">
    <div class="logo">
      <h1><a href="#" title="品优购商城">品优购商城</a></h1>
    </div>
    <ul class="searchlan">
      <li><input type="text"></li>
      <li><button>搜索</button></li>
      <li><button><a>&nbsp;我的购物车</a>&nbsp;></button></li>
    </ul>
    <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="nav w">
    <ul>
      <li class="first_nav"><a href="#">全部商品分类</a></li>
      <li class="second_nav"><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="line"></div>
  <div class="dropdown w">
    <ul class="dropdown_nav">
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="list.html">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#">测试文字<i>></i></a></li>
      <li><a href="#" class="special">测试文字</a></li>
      <li><a href="#">测试文字</a></li>
      <li><a href="#">测试文字</a></li>
    </ul>
    <ul class="center_shop">
      <li><a href=""><img src="images/center.png" alt=""></a></li>
    </ul>
    <ul class="jianbao">
      <li class="first_jianbao"><a href="#">品优购快报</a><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>
    <ul class="function">
      <li><a href="#">话费</a></li>
      <li><a href="#">话费<i class="xiaozaizi">减</i><i class="xiaozaizi1"></i></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>
    <ul class="little_photo">
      <li>
        <a href="#"><img src="images/images/01gai_04.png" alt=""></a>
      </li>
    </ul>
    <ul class="bottom_photo">
      <li><a href="#"><img src="images/images/dianshang2.png" alt=""></a></li>
    </ul>
  </div>


  <div>
    <div class="w jiadian">
      <div class="box_hd">
        <h3>家用电器</h3>
        <div class="tab_list">
          <ul>
            <li><a href="#" class="style_red">热门</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>
      <div class="box_bd">
        <div class="tab_content">
          <div class="tab_list_item">
            <div class="col_210">
              <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>
              <a href="#">
                <img src="images/center.png" alt="">
              </a>
            </div>
            <div class="col_329">
              <img src="images/images/dianshang1.png" alt="">
            </div>
            <div class="col_221_1">
              <img src="images/images/daochu2gai_06.png" alt="">
              <img src="images/images/daochu2gai_15.png" alt="">
            </div>
            <div class="col_221">
              <img src="images/images/daochu2gai_08.png" alt="">
            </div>
            <div class="col_219">
              <img src="images/images/daochu2gai_03.png" alt="">
              <img src="images/images/daochu2gai_16.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w dianshi">
      <div class="box_hd">
        <h3>家用电器</h3>
        <div class="tab_list">
          <ul>
            <li><a href="#" class="style_red">热门</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>
      <div class="box_bd">
        <div class="tab_content">
          <div class="tab_list_item">
            <div class="col_210">
              <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>
              <a href="#">
                <img src="images/center.png" alt="">
              </a>
            </div>
            <div class="col_329">
              <img src="images/images/dianshang1.png" alt="">
            </div>
            <div class="col_221_1">
              <img src="images/images/daochu2gai_06.png" alt="">
              <img src="images/images/daochu2gai_15.png" alt="">
            </div>
            <div class="col_221">
              <img src="images/images/daochu2gai_08.png" alt="">
            </div>
            <div class="col_219">
              <img src="images/images/daochu2gai_03.png" alt="">
              <img src="images/images/daochu2gai_16.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>








  <footer class="footer">
    <div class="w">
      <ul class="mod_service">
        <li><img src="images/tuceng138.png" alt="">
          <p>测试文字</p></br>
          <p>测试文字</p>
        </li>
        <li><img src="images/tuceng138.png" alt="">
          <p>测试文字</p></br>
          <p>测试文字</p>
        </li>
        <li><img src="images/tuceng138.png" alt="">
          <p>测试文字</p></br>
          <p>测试文字</p>
        </li>
        <li><img src="images/tuceng138.png" alt="">
          <p>测试文字</p></br>
          <p>测试文字</p>
        </li>
        <li><img src="images/tuceng138.png" alt="">
          <p>测试文字</p></br>
          <p>测试文字</p>
        </li>
      </ul>
      <div class="zhongbu">
        <ul>
          <li><a href="#" class="first_xio">测试文字</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>
        <ul>
          <li><a href="#" class="first_xio">测试文字</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>
        <ul>
          <li><a href="#" class="first_xio">测试文字</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>
        <ul>
          <li><a href="#" class="first_xio">测试文字</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>
        <ul>
          <li><a href="#" class="first_xio">测试文字</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>
        <ul>
          <li><a href="#" class="first_xio">测试文字</a></li>
          <li><img src="images/duobianxing1.png" alt=""></li>
          <li><a href="#">测试文字</a></li>
        </ul>
      </div>
      <ul class="shortcut1">
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
        <li></li>
        <li>测试文字</li>
      </ul>
      <p class="dizhi">测试文字</p>
      <p class="dizhi1">测试文字</p>
    </div>
  </footer>
</body>

</html>
2.登录页代码
<!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="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/register.css">

</head>

<body>
    <div class="w">
        <header>
            <div class="logo">
                <img src="images/logo1.png" alt="">
            </div>
        </header>
        <div class="registerarea">
            <h3>注册新用户
                <div class="login">我有账号，去<a href="index.html">登陆</a></div>
            </h3>
            <div class="reg_form">
                <form action="">
                    <ul>
                        <li><label for="">手机号： </label> <input type="text" class="inp"><span class="error"> <i
                                    class="error_icon"></i>请重新输入</span></li>
                        <li><label for="">短信验证码： </label> <input type="text" class="inp"><span class="success"> <i
                                    class="success_icon"></i>正确</span></li>
                        <li><label for="">登陆密码： </label> <input type="password" class="inp"><span class="error"> <i
                                    class="error_icon"></i>请重新输入</span></li>
                        <li class="safe">安全程度 <em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em></li>
                        <li><label for="">确认密码： </label> <input type="password" class="inp"><span class="error"> <i
                                    class="error_icon"></i>请重新输入</span></li>
                        <li class="agree"><input type="checkbox">我同意<a href="#">协议</a></li>
                        <li>
                            <input type="submit" value="提交注册" class="btn">
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <footer>
            <ul class="shortcut1">
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
            </ul>
            <p class="dizhi">测试文字</p>
            <p class="dizhi1">测试文字</p>
            </div>
        </footer>
    </div>
</body>

</html>
3.例表页代码
<!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="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 引入列表css -->
    <link rel="stylesheet" href="css/list.css">
</head>

<body>
    <section>
        <div class="shortcut w">
            <ul class="shortcut_left">
                <li><a href="#">品优购欢迎您！</a></li>
                <li><a href="#">请登录</a></li>
                <li><a href="#">免费注册</a></li>
            </ul>
            <ul class="shortcut_right">
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li> | </li>
                <li class="arrow-icon">
                    <a href="#">我的品优购</a>
                </li>
                <li> | </li>
                <li>
                    <a href="#">品优购会员</a>
                </li>
                <li> | </li>
                <li>
                    <a href="#">企业采购</a>
                </li>
                <li> | </li>
                <li class="arrow-icon">
                    <a href="#">关注品优购</a>
                </li>
                <li> | </li>
                <li class="arrow-icon">
                    <a href="#">客户服务</a>
                </li>
                <li> | </li>
                <li class="arrow-icon">
                    <a href="#">网站导航</a>
                </li>
            </ul>
        </div>
    </section>
    <div class="w header">
        <div class="logo">
            <h1><a href="#" title="品优购商城">品优购商城</a></h1>
        </div>

        <div class="sk">
            <img src="images/miaosha.png" alt="">
        </div>
        <ul class="searchlan">
            <li><input type="text"></li>
            <li><button>搜索</button></li>
            <li><button><a>&nbsp;我的购物车</a>&nbsp;></button></li>
        </ul>
        <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>
    <nav class="nav">
        <div class="w">
            <div class="sk_list">
                <ul>
                    <li><a href="#">品牌秒杀</a></li>
                    <li><a href="#">品牌秒杀</a></li>
                    <li><a href="#">品牌秒杀</a></li>
                </ul>
            </div>
            <div class="sk_con">
                <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>
    </nav>
    <div class="w sk_container">
        <div class="sk_hd">
            <img src="images/ZZQG.png" alt="">
        </div>
        <div class="sk_bd">
            <ul class="clearfix">
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
                <li><img src="images/danpin1.png" alt=""></li>
            </ul>
        </div>
    </div>


















    <footer class="footer">
        <div class="w">
            <ul class="mod_service">
                <li><img src="images/tuceng138.png" alt="">
                    <p>测试文字</p></br>
                    <p>测试文字</p>
                </li>
                <li><img src="images/tuceng138.png" alt="">
                    <p>测试文字</p></br>
                    <p>测试文字</p>
                </li>
                <li><img src="images/tuceng138.png" alt="">
                    <p>测试文字</p></br>
                    <p>测试文字</p>
                </li>
                <li><img src="images/tuceng138.png" alt="">
                    <p>测试文字</p></br>
                    <p>测试文字</p>
                </li>
                <li><img src="images/tuceng138.png" alt="">
                    <p>测试文字</p></br>
                    <p>测试文字</p>
                </li>
            </ul>
            <div class="zhongbu">
                <ul>
                    <li><a href="#" class="first_xio">测试文字</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>
                <ul>
                    <li><a href="#" class="first_xio">测试文字</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>
                <ul>
                    <li><a href="#" class="first_xio">测试文字</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>
                <ul>
                    <li><a href="#" class="first_xio">测试文字</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>
                <ul>
                    <li><a href="#" class="first_xio">测试文字</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>
                <ul>
                    <li><a href="#" class="first_xio">测试文字</a></li>
                    <li><img src="images/多边形 1 拷贝.png" alt=""></li>
                    <li><a href="#">测试文字</a></li>
                </ul>
            </div>
            <ul class="shortcut1">
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
                <li></li>
                <li>测试文字</li>
            </ul>
            <p class="dizhi">测试文字</p>
            <p class="dizhi1">测试文字</p>
        </div>
    </footer>

</body>

</html>

（2）css代码部分

1.base.css
/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle;
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    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;
}
2.common.css(通用部分)
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}

/* 快捷导航模块 */
section {
    height: 30px;
    background-color: #f1f1f1;
}

section .shortcut {
    height: 30px;
}

.shortcut .shortcut_left li {
    float: left;
    padding-left: 12px;
    line-height: 30px;
}

.shortcut .shortcut_left li:first-child {
    padding: 0;
}

.shortcut .shortcut_left li:last-child a {
    color: #c81623;
}

.shortcut .shortcut_right {
    float: right;
    line-height: 30px;
}

.shortcut .shortcut_right li {
    float: left;
    padding-right: 12px;
}

.shortcut .shortcut_right li:last-child {
    padding-right: 0;
}

.shortcut .shortcut_right .arrow-icon::after {
    content: '\e91e';
    font-family: 'icomoon';
}

.header {
    position: relative;
    margin-top: 27px;
    height: 61px;
}


/* 头部制作 */
.logo {
    position: absolute;
    width: 171px;
    height: 61px;
}

.logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo1.png) no-repeat;
    font-size: 0;
}




.header .searchlan {
    position: absolute;
    left: 344px;
    margin-top: 0;
    width: 789px;
    height: 35px;
}

.header .searchlan li {
    float: left;
}

.header .searchlan li:last-child {
    float: right;
}

.header .searchlan li:first-child {
    border: #c81623 solid 1px;
    border-right: transparent;
    float: left;
}

.header .searchlan li:first-child input {
    width: 455px;
    height: 35px;
    border: transparent;
}

.header .searchlan li:first-child {
    border: #c81623 solid 1px;
    border-right: transparent;
    float: left;
}

.header .searchlan li:nth-child(2) button {
    width: 83.5px;
    height: 37px;
    background-color: #c81623;
    border: transparent;
    line-height: 37px;
    color: #ffffff;
    font-weight: 550;
}

.header .searchlan li:nth-child(3) button {
    width: 140px;
    height: 35px;
    line-height: 35px;
    background-color: #f7f7f7;
    border: #dfdfdf 1px solid;
}

.header .searchlan li:nth-child(3) button::after {
    float: left;
    margin-left: 15px;
    content: '\e93a';
    font-family: 'icomoon';
}


.header .hotwords {
    position: absolute;
    bottom: 0px;
    left: 359px;
    height: 12px;

}

.header .hotwords li {
    float: left;
    padding-right: 22px;
    font-size: 9px;

}

.header .hotwords li:first-child a {
    color: #c81623;
}

.nav {
    margin-top: 24px;
    height: 45px;
}

.nav ul li {
    float: left;
    padding-left: 50px;
    line-height: 45px;
}

.nav ul .first_nav {
    padding: 0 58px;
    background-color: #b1191a;
}

.nav ul .second_nav {
    padding-left: 40px;
}

.nav ul li a {
    color: #333333;
    font: 16px "microsoft yahei";
}

.nav ul .first_nav a {
    color: #ffffff;
}

/* 红线开发 */
.line {
    height: 2px;
    background-color: #b1191a;
}


.footer {
    position: relative;
    bottom: 0;
    margin-bottom: 0;
    height: 500px;
    background-color: #ffffff;
    padding-top: 30px;
}

.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}

.mod_service li {
    float: left;
    height: 80px;
   margin: 0 65px;
}
.mod_service li img {
    float: left;
}

.mod_service li p {
    float: left;
    padding-left : 6px ;
    margin-top: 5px;
   
}

.zhongbu {
    height: 170px;
    margin-top: 22px;
    border-bottom: 1px solid #ccc;
}

.zhongbu ul {
    float: left;
}
.zhongbu ul li {
    padding: 0 60px;
}

.zhongbu ul li .first_xio {
    display: block;
    font-size: 16px;
font-weight: 500;
padding-bottom: 10px;
}

.shortcut1 {
    height: 20px;
    margin-top: 16px;
    margin-left: 116px;
  
}

.shortcut1 li {
float: left;
font-size: 12px;
}

.shortcut1 li:nth-child(even) {
    width: 1px;
    height: 12px;
    border: #ccc solid 1px;
    margin: 2px 15px;
    
}

.dizhi {
    display: inline-block;
    margin-top: 10px;
    margin-left: 500px;
}

.dizhi1 {
    margin-top: 10px;
    margin-left: 500px;
}
3.首页部分index.css
.dropdown {
    position: relative;
    height: 641px;
}

.dropdown .dropdown_nav {
    position: absolute;
    width: 212px;
    height: 470px;
    background-color: #c81623;
}




.dropdown .dropdown_nav li a {
    padding-left: 10px;
    display: block;
    height: 31px;
    line-height: 31px;
    color: #ffffff;
}

.dropdown .dropdown_nav li a:hover {
    background-color: #ffffff;
    color: #c81623;
}



.dropdown .dropdown_nav li a i {
    float: right;
    margin-right: 10px;
}

.center_shop {
    position: absolute;
    top: 10px;
    left: 222px;
}

.center_shop li a img {
    width: 725px;
    height: 460px;
}

.jianbao {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 248px;
    height: 165px;
    border: #e4e4e4 solid 1px;
    background-color: #ffffff;
}

.jianbao li {
    margin-top: 4px;
    font-size: 14px;
    color: #333333;
}

.jianbao .first_jianbao {
    margin-top: 0;
    padding: 5px;
    font-size: 14px;
    border-bottom: #e4e4e4 dashed 1px;
    line-height: 20px;
}

.jianbao li a {
    padding-left: 16px;
}

.jianbao .first_jianbao a:last-child {
    float: right;
    margin-right: 14px;
}


.function {
    position: absolute;
    right: 0;
    top: 175px;
    width: 248px;
    height: 210px;

    border: #e4e4e4 solid 0.5px;
}

.function li {
    float: left;
    border: #e4e4e4 solid 0.5px;
}

.function li a {
    position: relative;
    display: inline-block;
    padding: 10px 18px;
    height: 67.9px;
}

.function li a::before {
    display: block;
    float: top;
    content: "\e958";
    font-family: 'icomoon';
    font-size: 21px;
}


.function li a .xiaozaizi {
    padding-left: 4px;
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    width: 20px;
    height: 30px;
    background-color: green;
    color: #ffffff;
}

.function li a .xiaozaizi1 {
    position: absolute;
    display: block;
    right: 0;
    top: 15px;
    width: 20px;
    height: 30px;
    border-radius: 10px 10px 0 0;
    background-color: #ffffff;
}

.little_photo {
    position: absolute;
    right: 0px;
    bottom: 172px;
}

.bottom_photo li a {
    display: block;
}

.bottom_photo {
    position: absolute;
    bottom: 0;
}

.box_hd {
    height: 30px;
    border-bottom: 2px #c81623 solid;
}

.box_hd h3 {
    float: left;
    font-size: 18px;
    font-weight: 400;
}

.tab_list {
    float: right;
    line-height: 30px;
}

.tab_list ul li {
    float: left;
}

.tab_list ul li a {
    margin: 0 15px;
}

.floor .w {
    margin-top: 30px;
}

.box_bd {
    height: 361px;
}

.tab_list_item>div {
    float: left;
}

.col_210 {
    width: 210px;
    height: 361px;
    background: color #f9f9f9;
    text-align: center;
}
.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    border-bottom: #333333 solid 1px;
    text-align: center;
    line-height: 33px;
    margin-right: 10px;
}
.col_210 ul {
    padding-left: 12px;
}

.col_210 img {
    width: 100%;
    height: 258px;
}

.col_329 {
    width: 329px;
}
.col_329 img {
    width: 100%;
    height: 100%;
}

.col_221 {
    width: 217px;
}
.col_221 img {
    width: 100%;

}

.col_221_1 {
    width: 214px;
}
.col_221_1 img {
    width: 100%;
}

.col_221_1 img:first-child {
    height: 173px;
}

.col_221_1 img:nth-child(2) {
    height: 180px;
}

.col_219 {
    width: 230px;
}
.col_219 img {
    width: 100%;
}
.col_219 img:nth-child(2) {
    height: 168px;
}

.box_bd img {
    border-bottom: #ededed solid 1px;
    border-right: #ededed solid 1px;
}

.dianshi {
    margin-top: 10px;
}
4.注册界面register.css
.w {
    width: 1200px;
    margin: 0 auto;
}

header {
    height: 84px;
    border-top: 2px solid red;
}

.logo {
    padding-top: 18px;
}

.registerarea {
    height: 522px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
}

.registerarea h3 .login {
    float: right;
    font-size: 14px;
}

.registerarea h3 .login a {
    color: red;
}

.reg_form {
    width: 600px;
    margin: 50px auto 0;
}

.reg_form ul li {
    margin-bottom: 20px;
}

.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}

.reg_form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}

.error {
    color: red;
}

.error_icon {
    margin-top: -2px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../images/tuoyuan4.png) no-repeat;
}

.success {
    color: green;
}

.success_icon {
    margin-top: -2px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../images/tuoyuan4.png) no-repeat;
}

.safe {
    padding-left: 175px;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

.ruo {
    background-color: red;
}

.zhong {
    background-color: yellow;
}

.qiang {
    background-color: green;
}

.agree {
    padding-left: 95px;
}

.agree input {
    vertical-align: middle;
}

.agree a {
    color: blue;
}

.btn {
    width: 200px;
    height: 34px;
    background-color: red;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 70px;
}

.shortcut1 {
    height: 20px;
    margin-top: 16px;
    margin-left: 116px;

}

.shortcut1 li {
    float: left;
    font-size: 12px;
}

.shortcut1 li:nth-child(even) {
    width: 1px;
    height: 12px;
    border: #ccc solid 1px;
    margin: 2px 15px;

}

.dizhi {
    display: inline-block;
    margin-top: 10px;
    margin-left: 500px;
}

.dizhi1 {
    margin-top: 10px;
    margin-left: 500px;
}
5.列表页list.css
.sk {
    position: absolute;
    border-left: 1px solid #000;
    left: 190px;
    top: 15px;
    padding: 3px 0 0 14px;
}

.nav {
    border-bottom: red solid 2px;
    overflow: hidden;
}

.sk_list {
    float: left;
}

.sk_list ul li {
    float: left;
}

.sk_list ul li a {
    display: block;
    line-height: 47px;
    padding: 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.sk_con {
    float: left;
}

.sk_con ul li a {
    display: block;
    line-height: 49px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

}

.sk_con ul li:last-child a::after {
    content: '\e91e';
    font-family: 'icomoon';
}

.sk_bd ul li {
    overflow: hidden;
    float:left;
    margin-right: 13px;
    width: 290px;
    height: 460px;
border:1px solid tansparent;
}

.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}

.sk_bd ul li:hover {
   border:1px solid #c81532;
}

COLDEHY
关注
web前端 品优购首页+源代码(1)
phoebemeng的博客
07-05 4642
web前端 品优购首页+源代码(1)
品优购项目html代码
qq_43544490的博客
08-03 2609
* ## index首页 * <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
品优购项目html+css-----初学者
奶茶控
08-06 551
品优购项目html+css 作为一个初学者，品优购项目通过简单的hml+css完成的几个页面，包括：首页面、登录页面、注册页面、手机页面、详情页面。下面是该项目的总结 ico图标，显示浏览器中的网页图标和收藏图标 只需要在抵制 ...
品优购案例，一个购物页面全部代码
04-09
品优购代码，html+css+images+favicon
html简单网页代码：于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作
最新发布
12-17 4890
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
前端品优购网页项目源码
09-07
【前端品优购网页项目源码】是一个涵盖了前端开发技术的实践项目，旨在提供一个电商网站的用户界面。在这个项目中，我们可以深入学习和理解多种前端技术，包括HTML、CSS、JavaScript，以及可能用到的前端框架如React...
品优购商城完整版源码解析与下载指南
资源摘要信息:"品优购商城完整版源码" 1. 概述： 品优购商城完整版源码是一个包含了前端所有必要元素的电商网站构建套件。它为开发者提供了一套可以直接部署或进一步定制的网站模板，包含HTML、CSS文件以及网站所需...
品优购电商网站源码分享，新手练习的理想模板
品优购网站源码被描述为“免费的资源”，这意味着它可以被任何人下载和使用。在开源社区中，这样的资源对于学习和实践是非常宝贵的。开源资源通常伴随着源代码的自由使用、修改和分发的权利，鼓励开发者之间的合作和...
前端实战新体验：品优购项目开发解析
资源摘要信息:"品优购实战练习是针对前端开发领域的项目实战练习，该练习主要是通过构建一个具体的前端项目——品优购，让学习者能够将所学的HTML等前端技术应用于实践中，以此来加深对前端开发的理解和掌握。...
品优购HTML+CSS项目资源包，可直接运行与复刻
资源摘要信息: "品优购练习项目，HTML+CSS.zip" 是一个包含了完整源码、工程文件以及相关说明文档的压缩包资源。该资源通过了严格的测试，能够直接运行成功且功能正常。它适合用于项目开发、毕业设计、课程设计、...
品优购css静态网页制作 博客1
qq_53101767的博客
09-27 379
这篇博客主要是记录在跟随b站pink老师学习前端的一些过程，便于以后复习一些惯用的html还有css基础样式。 文章目录快捷导航栏制作首页头部制作logo部分搜索模块购物车模块nav模块制作 快捷导航栏制作 快捷导航栏置于一个section中 <section class="shortcut"> <section/> .shortcut{ height: 31px; background: color #f1f1f1;; line-height: 31px;
品优购页面
qq_43716830的博客
05-05 799
文章目录页面截图index.htmllist.htmlregister.htmlbase.csscommon.cssindex.csslist.cssregister.css 页面截图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
web前端 品优购首页+源代码(3)
phoebemeng的博客
07-06 822
品优购首页
品优购项目源代码
imByte的博客
09-09 1万+
文章目录HTML 源代码1. index.html2. list.html3. register.htmlCSS 源代码1. base.css2. common.css3. index.css4. list.html5. register.css HTML 源代码 1. index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta
PC端品优购项目
qq_45064040的博客
08-09 1209
转载自：https://jerry-z-j-r.github.io/2021/02/17/HTML-CSS-Cheat-Sheet-14/ （来自 JERRY） PC端品优购项目一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于
品优购静态页面--注册页面
m0_50789696的博客
04-11 1659
注册页面：registe.html 注意： 注册页面比较隐私为了保护用户信息，不需要对当前页面做seo优化。 仍需引入网站图标 注册页面的结构和样式全部重新写，只需引入自己的regist.css，以及初始化base.css即可。 1 头部模块 header 1.1 HTML 结构 <!-- header头部模块start --> <header class="header w"> <div class="logo"> ...
品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
热门推荐
imByte的博客
09-09 2万+
品优购项目规划 1. 网站制作流程 现阶段，主要是做前台页面设计 2. 品优购项目整体介绍 项目名称：品优购 项目描述：品优购是一个电商网站，需求是完成 PC 端首页、列表页、注册页面 的制作 3. 开发工具以及技术栈 开发工具 VScode 、Photoshop（fw）、主流浏览器（以Chrome浏览器为主） 技术栈 利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式 采取结构与样式相分离，模块化开发 ...
CSS综合案例-品优购电商04
奋斗的小能能的博客
08-12 2062
目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍 模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详细信息区域制作 itemInfo_wrap 6). 产品细节模块 product_detail 6.1) aside 布局 6.2) detail 布局 7.详情页代码 8. 注册页面 register 8.1 registerarea布局 9.注册页代码 1. 品优购项目(.
前端练习项目——品优购 Day9 列表页搭建
Acc222222的博客
08-05 676
（1）列表页面是新的页面，我们需要新建页面文件list.html。 （2）他因为列表页的头部和底部与index.html基本一致，所以要把首页中的头部和底部结构复制过去。 （3）头部和底部的样式也需要，因此list.html还需要引入common.css （4）需要新的list.css样式文件，这是列表页专门的样式文件。 （5）还需要把meta的内容移植过来，更改一下即可。 <meta name="description" content="品优购 - 亚洲较大的网上交易平
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值