品优购练习（完整版）

于 2024-03-13 19:51:19 发布
阅读量524 收藏 8
点赞数 22
文章标签： html5 css 前端 css3 firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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
关注
  • 22
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
品优购
尧子陌
04-26 1262
项目之前期准备 开发工具: Webstrom + photoshop+ 谷歌浏览器 技术栈:HTML + CSS 项目之目标 能够引入ico图标 掌握网站优化的三大标签 掌握css的字体图标 掌握css属性的书写顺序 代码规范 HTML规范 DOCTYPE 声明 <!DOCTYPE html> HTML5标准模板 ...
品优购首页html和css代码 记录
weixin_46427707的博客
06-17 1121
品优购首页代码
品优购全套讲义
02-09
1.品优购电商系统开发讲义，2.品优购电商系统部署讲义
品优购项目
最新发布
2301_80486256的博客
02-23 406
项目名称：品优购项目描述：品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作1. 品优购项目整体介绍（制作首页、列表页、注册页三个页面）2. 品优购项目学习目的（里面包含技术较多，能极大锻炼我们布局技术）3. 开发工具以及技术实践（切图用PS，代码用VScode，测试用chrome，大量使用HTML5+CSS3）注意：一般稳定的服务器都是要收费的。比如：阿里云免费的远程服务器（免费空间）http://free.3v.do/具体建议再看一下黑马前端视频的354集。
品优购项目实战
guai_guai_guai的博客
02-02 974
gaouwuche品优购项目搭建工作： 创建文件夹以及文件 名称 说明 shoping 项目文件夹 images 样式类图片文件夹 css 样式文件夹 upload 产品类图片文件夹 fonts 字体类文件夹 js 脚本文件夹 首页 index.html CSS初始化样式文件 base.css CSS公共样式文件 common.css 模块化开发 模块化：将一个项目按照功能划分 一个
品优购案例，一个购物页面全部代码
04-09
品优购代码，html+css+images+favicon
品优购项目html+css-----初学者
奶茶控
08-06 440
品优购项目html+css 作为一个初学者，品优购项目通过简单的hml+css完成的几个页面，包括：首页面、登录页面、注册页面、手机页面、详情页面。下面是该项目的总结 ico图标，显示浏览器中的网页图标和收藏图标 只需要在抵制 ...
web前端 品优购首页+源代码(1)
phoebemeng的博客
07-05 4349
web前端 品优购首页+源代码(1)
品优购项目制作（html5+css3）
m0_73560798的博客
10-23 654
因为首页的头部和尾部在其他页面中是一样的，所以这两部分我们要把样式写到公共common.css里。
品优购商城完整版源码
02-09
品优购商城源码，html，css，图片，icon都在里面，完整版
黑马品优购系统开发
01-28
该系统为黑马学院的品优购开发系统，保证真实有效
js黑马品优购项目案例
06-16
通过对js的学习和html搭建品优购项目，有素材
品优购网页设计 期末作业 质量保证
03-20
仅完成首页、分类列表页、产品详情页 使用到html、css、js web网络开发作业（满分级） 代码布局合理，编写优美，质量有保证
品优购静态页资源psd
08-05
品优购
品优购---品优购项目制作---8.4
weixin_50768118的博客
08-08 886
品优购首页制作、品优购列表页制作、品优购注册页制作、Web服务器
CSS 8 品优购项目
weixin_62302666的博客
02-27 575
1.品优购项目规划 1.1网站制作流程
品优购项目--登录页面
WangJiaYi948的博客
09-20 6191
效果图 HTML部分 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;品优购登录&lt;/title&gt; &lt;link rel="shortcut icon" href=&quot
前端与移动开发----购物商城案例（品优购PC项目上）
東三城的博客
10-26 3533
品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 品优购项目规划 网站制作流程 原型图： 页面的布局，告知我们开发人员，整个页面的结构是怎样的，说白了就是什么地方放什么内容 效果图：告知我们开发人员，最终做出来的成品应该是什么样子，相比原型图，效果图里面包含内容，风格，字体大小等等 品优购项目介绍 项目名称：品优购 项目描述：品优购是一个电商网站，我
品优购快报html代码
12-15
品优购快报 品优购快报 欢迎订阅品优购快报，获取最新的优惠信息和新品推荐。 <li>2022年1月1日 - 新年特惠，全场商品7折优惠 <li>2022年2月14日 - 情人节特惠，购买礼品满500元即送精美礼盒一份 <li>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值