当前位置： 首页 > news >正文

品优购项目（HTML\CSS）

news 来源：原创 2025/5/31 9:05:15

项目效果可访问 http://zhousunyu.3vdo.club  查看

主页

<!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">
<!-- main板块的样式文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 设置icon标签栏的网页图标 -->
<link rel="shortcut icon" href="favicon.ico"></head>
<body><!-- 快捷导航模块 --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp; </li><li><a href="login.html">请登录&nbsp</a><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="mypin">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="focuspin">关注品优购</li><li></li><li class="clientcare">客户服务</li><li></li><li class="naviationofwebsite">网站导航</li></ul></div></div></div><!-- 快捷导航模块end --><!-- header 模块start --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 搜索模块 --><div class="search"><input type="search" placeholder="请输入搜索关键词,例如：语言开发"><button>搜索</button></div><!-- hotwords 热点词制作 --><div class="hotwords"><a href="#" class="style_red">品优购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">每满99减30</a><a href="#">百亿补贴</a><a href="#">电脑</a><a href="#">办公用品</a></div><!-- 购物车 shopcar模块 --><div class="shopcar"><i class="count">8</i>我的购物车</div></header><!-- heaader 模块 end--><!-- nav 模块的制作 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="list.html">手机</a> <a href="#">数码</a> <a href="#">通讯</a></li><li><a href="#">电脑</a> <a href="#">办公</a> </li><li><a href="#">家居</a> <a href="#">家具</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">童装</a> <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> <a href="#">珠宝</a></li><li><a href="#">运动户外</a> <a href="#">钟表</a></li><li><a href="#">汽车</a> <a href="#">汽车用品</a></li><li><a href="#">母婴</a> <a href="#">玩具乐器</a></li><li><a href="#">食品</a> <a href="#">酒水</a></li><li><a href="#">医药</a> <a href="#">保健</a></li><li><a href="#">图书影像</a> <a href="#">电子书</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li><li><a href="#">理财</a> <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="#">Zavier法拍</a></li><li><a href="#">企业购 | 团购</a></li><li><a href="#">全球行</a></li><li><a href="#">排行榜</a></li></ul></div></div></nav><!-- nav 模块的制作 end --><!-- main模块的制作 start -->
<div class="w"><div class="main"><div class="focus"><!-- 注意： 结构不能直接插入图片必须添加li  具体操作看前面写的淘宝轮播图完善--><ul><li><img src="upload/focus1.png" alt=""></img></li></ul></div><div class="newsflash"><div class="news"><div class="hd"><h5>品优购快报</h5><div class="gengduo"><a href="#">更多</a></div></div><div class="bd"><ul><li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码产品</a></li><li><a href="#"><strong>[特惠]</strong> 品优网占家电网购份额六成</a></li><li><a href="#"><strong>[特惠]</strong> 百元端午全品类礼券限时领取 先到先得</a></li><li><a href="#"><strong>[特惠]</strong> 心动购物季 家装焕新日 全品类商品八折起</a></li><li><a href="#"><strong>[特惠]</strong> 国补×百亿补贴，价格大作战遇上清凉节</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li><li><i></i><br>话费</li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></img></div></div></div>
</div>
<!-- main模块的制作 end --><!-- 推荐模块制作 start -->
<div class="w recom"><div class="recom_hd"><img src="images/recom.png" alt="今日推荐"></div><div class="recom_bd"><ul><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li><li><img src="upload/recom_03.jpg"></li></ul></div>
</div> 
<!-- 推荐模块制作 end --><!-- 楼层区域制作  start -->
<div class="floor"><!-- 一楼家电模块制作  start --><div class="jiadian w"><div class="firstfloor_hd"><h3>家用电器</h3><!-- 注意，下边的这个名字不可以随意进行更改 --><div class="tab_list"><ul><li><a href="#" class="tab_list_hot">热门</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="firstfloor_bd"><!-- 先放一个 后面学JS再补 --><div class="tab_content"><div class="tab_list_tiem"><div class="col_210"><ul><li><a href="#">节能补贴</a></li></ul><ul><li><a href="#">节能补贴</a></li></ul><ul><li><a href="#">节能补贴</a></li>   </ul><ul><li><a href="#">节能补贴</a></li> </ul><ul><li><a href="#">节能补贴</a></li>           </ul><ul><li><a href="#">节能补贴</a></li>               </ul><a href="#"><img src="upload/floor-1-1.png"></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="b"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区域制作  end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li class="zhengpin"><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li class="wuliu"><h5></h5><div class="service_txt"><h4>极速物流</h4><p>极速物流，极速送达</p></div></li><li class="shouhou"><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>七天无理由退货</p></div></li><li class="service"><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人订制个性化套餐</p></div></li><li  class="help"><h5></h5><div class="service_txt"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><div class="mod_help"><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="#">211限时达</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="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd> <img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="copyright_top"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <a href="#">品优购公益</a> | <a href="#">English Site</a> | <a href="#">Contact U</a></div><div class="copyright_bottom">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end --></body></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="keywords" content="正品低价、品质保证、配送及时、轻松购物、手机、笔记本、电脑、家居百货"><meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货！"></meta><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共的样式文件 --><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css">
</head>
<style>.box {position: relative;width: 290px;height: 460px;border: 1px solid transparent;}.mobile img {width: 283px;height: 290px;}.trade_intro {width: 265px;height: 35px;margin: 7px 12px 10px 13px;}.trade_intro h5 {font-size: 14px;line-height: 17px;font-weight: 400;color: rgb(102, 102, 102);}.price {position: relative;width: 120px;height: 18px;/* border: 1px solid red; *//* background-color: pink; */margin: 0px 155px 6px 15px;padding: 0 10px;}.price h6 {position: absolute;top: -2px;left: -8px;display: block;float: left;font-size: 22px;line-height: 21px;font-weight: 700;color: red;}.price del {display: block;float: right;color: #a4a4a4;font-size: 14px;}.bar {float: left;width: 133px;height: 13px;border: 1px solid red;border-radius: 3px;padding: 1px;}.bar_in {width: 87%;height: 100%;background-color: red;}.good_progress h8 {display: block;float: left;width: 49px;height: 14px;font-family: SimSun;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 21px;letter-spacing: 0px;color: #666666;margin: 0 11px 13px 15px;}.good_progress .extra {float: left;display: block;margin: 0px 7px 13px 7px;width: 59px;height: 14px;font-family: SimSun;font-size: 14px;font-weight: normal;font-stretch: normal;line-height: 21px;letter-spacing: 0px;color: #666666;}.extra i {font-style: normal;color: red;}.buy_imi {position: absolute;right: 0;bottom: 0;width: 290px;height: 46px;background-color: #b1191a;}.buy_imi h3 {display: block;margin: 15px 105px 13px 105px;width: 80px;height: 19px;font-family: SimSun;font-size: 20px;font-weight: normal;font-stretch: normal;line-height: 19px;letter-spacing: 0px;color: #ffffff;/* padding: 18px 106 13px 105px; */}
</style>
<body><!-- 快捷导航模块 --><div class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp; </li><li><a href="login.html">请登录&nbsp</a><a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="mypin">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="focuspin">关注品优购</li><li></li><li class="clientcare">客户服务</li><li></li><li class="naviationofwebsite">网站导航</li></ul></div></div></div><!-- 快捷导航模块end --><!-- header 模块start --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 列表页的秒杀模块 --><div class="sk"><img src="images/sk.png" alt="秒杀"></div><!-- 搜索模块 --><div class="search"><input type="search" placeholder="请输入搜索关键词,例如：语言开发"><button>搜索</button></div><!-- hotwords 热点词制作 --><div class="hotwords"><a href="#" class="style_red">品优购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">每满99减30</a><a href="#">百亿补贴</a><a href="#">电脑</a><a href="#">办公用品</a></div><!-- 购物车 shopcar模块 --><div class="shopcar"><i class="count">8</i>我的购物车</div></header><!-- heaader 模块 end--><!-- nav 模块的制作 start --><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="#" class="sk_con_secondli">女装</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="#" class="sk_con_lastli">更多分类</a> </li></ul></div></div></nav><!-- nav 模块的制作 end --><!-- 列表页主体部分 start -->
<div class="w sk_container"><div class="sk_hd"><img src="upload//bg_03.png"></div><div class="sk_bd"><ul class="clearfix"><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div>    </li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li><li><div class="box"><div class="mobile"><img src="images/mobile.jpg" alt="手机"></div><div class="trade_intro"><h5>Apple苹果Iphone6 pro（A2199）512G金色 移动联通电信5G手机</h5></div><div class="price"><h6>¥6088 </h6><del>￥6988</del></div><div class="good_progress"><h8>已售87%</h8><div class="bar"><div class="bar_in"></div></div><h9 class="extra">剩余<i>29</i>件</h9></div><div class="buy_imi"><a><h3>立即抢购</h3></a></div></div></li></ul></div>
</div><!-- 列表页主体部分 end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li class="zhengpin"><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li class="wuliu"><h5></h5><div class="service_txt"><h4>极速物流</h4><p>极速物流，极速送达</p></div></li><li class="shouhou"><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>七天无理由退货</p></div></li><li class="service"><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人订制个性化套餐</p></div></li><li class="help"><h5></h5><div class="service_txt"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><div class="mod_help"><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="#">211限时达</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="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">品优购E卡</a></dd><dd><a href="#">品优购通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="copyright_top"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <ahref="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <ahref="#">品优购社区</a> | <a href="#">品优购公益</a> | <a href="#">English Site</a> | <a href="#">ContactU</a></div><div class="copyright_bottom">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end --></body>
</html>

注册页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head>
<!-- 引入初始化样式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 设置icon标签栏的网页图标 -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/register.css">
<body><div class="w"><div class="header"><div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div></div><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登录</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号：</label><input type="text" class="inp">  <i class="error_icon"></i><spanclass="error">手机号格式不正确，请查证后重新输入</span></li><li><label for="">手机验证码：</label><input type="text" class="inp">  <i class="error_icon"></i><spanclass="error">手机验证码输入错误</span></li><li><label for="">输入密码：</label><input type="text" class="inp">  <i class="error_icon"></i><spanclass="error">密码格式不正确，密码的格式为6-18位</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li><li><label for="">确认密码：</label><input type="text" class="inp">  <i class="success_icon"></i><spanclass="success">确认密码输入正确</span></li><li class="agree"><input type="checkbox" name="" id="">同意协议并注册<a href="#">《知晓用户协议》</a></li><li><input type="submit" value="提交注册" class="btn"></li></ul></form></div>
</div><div class="footer"><div class="mod_copyright"><div class="copyright_top"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a>| <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <ahref="#">品优购公益</a> | <a href="#">English Site</a> | <a href="#">ContactU</a></div><div class="copyright_bottom">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></div>
</body>
</html>

样式模块：

base.css
 

/* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */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;/* 默认有灰色边框我们需要手动去掉 */border: 0; outline: none;
}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;
}

common.css

/* icomoon声明   注意此处要注意路径的变化*/
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?mfgl5q');src: url('../fonts/icomoon.eot?mfgl5q#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?mfgl5q') format('truetype'),url('../fonts/icomoon.woff?mfgl5q') format('woff'),url('../fonts/icomoon.svg?mfgl5q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版 心 */
.w {width: 1200px;margin: 0 auto;
}/* 快捷导航模块 */
.shortcut {/* width: 100%; */height: 31px;background-color: #f1f1f1;line-height: 31px;
}.shortcut ul li {float: left;
}.style_red {color: #c81623;
}.fl {float: left;}.fr {float: right;
}/* 选择所有偶数的li */
.shortcut .w .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0px;
}.mypin::after {font-family: 'icomoon';content: '';margin-left: 6px;
}.focuspin::after {content: '';margin-left: 6px;font-family: 'icomoon';
}.clientcare::after {content: '';font-family: 'icomoon';margin-left: 6px;
}.naviationofwebsite::after {content: '\e91e';font-family: 'icomoon';margin-left: 6px;
}.header {position: relative;height: 105px;/* background-color: aquamarine; */
}.logo { position: absolute;top: 25px;
width: 171px;
height: 61px;
/* background-color: skyblue; */
}.logo h1 a  { display: block;width: 171px;height: 61px;background: url("../images/logo.png") no-repeat;font-size: 0;
}
.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;/* margin: 346px auto; */
}
.search input { float: left;width: 454px;height: 32px;padding-left: 10px;
}
.search button { float: left;width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #fff;
}
.hotwords {position: absolute;top: 66px;left: 346px;
}
.hotwords a { 
margin:0 10px; 
}.shopcar{position: absolute;right: 60px;top: 25px;line-height: 35px;text-align: center;width: 140px;height: 35px;background-color: #f7f7f7;border: 2px solid #dfdfdf;
}
.shopcar::before{content: '\e93a';font-family: 'icomoon';margin-right: 10px;color: #b1191a;
}
.shopcar::after{content: '\e920';font-family: 'icomoon';margin-left: 5px;
}
.count{position: absolute;top: -5px;/* right: 20px;  注意左对齐效果更好*/left: 105px; height: 14px;color: #fff;background-color: #600012;padding: 0 5px;line-height: 14px;border-radius: 7px 7px 7px 0;
}
.nav{height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown{float: left;position: relative;width: 210px;height: 45px;background-color: #b1191a;
}
.nav .navitems{float: left;
}
.dropdown .dt{width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}
.dropdown .dd{/* display: none; */position: absolute;top: 45px;left: 0;width: 210px;height: 465px;background-color: #c81623;/* overflow: hidden;transition: all 0.5s; */
}
.dropdown .dd ul li{position: relative;width: 100%;height: 31px;line-height: 31px;margin-left: 2px;
}
.dropdown .dd ul li::after {content: '\e920';font-family: 'icomoon';position: absolute;right: 10px; top: 1px;color:#fff ;
}
.dropdown .dd ul li:hover{background-color: #fff;}
.dropdown .dd ul li a{font-size: 14px;color: #fff;padding-left: 10px;
}
.dropdown .dd ul li:hover a{color: #c81623;
}.navitems li{float: left;
}
.navitems li a{display: block;line-height: 45px;padding: 0 25px;height: 45px;font-size: 16px;
}.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service{height: 110px;border-bottom: 1px solid #ccc;
}.mod_service ul li{float: left;width: 240px;height: 50px;/* background-color: pink; */padding-left: 35px;
}
.mod_service ul .zhengpin h5{float: left;background:url("../images/icons.png") no-repeat -252px -2px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .wuliu h5 {float: left;background: url("../images/icons.png") no-repeat -254px -54px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .shouhou h5 {float: left;background: url("../images/icons.png") no-repeat -257px -105px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .service h5 {float: left;background: url("../images/icons.png") no-repeat -257px -156px;width: 50px;height: 50px;margin-right: 10px;
}.mod_service ul .help h5 {float: left;background: url("../images/icons.png") no-repeat -257px -209px;width: 50px;height: 50px;margin-right: 10px;
}.service_txt{float:left
}
.service_txt h4{font-size: 14px;
}
.service_txt p{font-size: 12px;
}.mod_help{height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}
.mod_help dl dt {font-size: 16px;margin-bottom: 10px;
}
.mod_help dl{float: left;width: 200px;
}
.mod_help dl:last-child{width: 90px;text-align: center;
}
.mod_copyright{line-height: 15px;text-align: center;padding-top: 20px;
}
.copyright_top {margin-bottom: 15px;
}
.copyright_top a{ margin:0 3px;}

index.css

/* 此处的css文件是针对 main模块而设计的 */
@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?mfgl5q');src: url('../fonts/icomoon.eot?mfgl5q#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?mfgl5q') format('truetype'),url('../fonts/icomoon.woff?mfgl5q') format('woff'),url('../fonts/icomoon.svg?mfgl5q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}.main {width: 980px;height: 455px;/* background-color: aqua; */margin-left: 220px;margin-top: 10px;
}.focus {float: left;width: 721px;height: 455px;background-color: bisque;
}.newsflash {float: right;width: 250px;height: 455px;/* background-color: #ccc; */
}.news {height: 165px;background-color: rgb(255, 255, 255);
}.lifeservice {overflow: hidden;height: 209px;/* background-color: blanchedalmond; */border: 1px solid #e4e4e4;border-top: 0;
}.lifeservice ul {width: 252px;
}/* 编者按：由于下方的li样式过大，导致ul、lifeservice的宽度容纳不下，右下方向都会多出来一块，此时设置一个overflow:hidden; 过大的部分直接切掉 不影响视觉效果*/.lifeservice ul li {float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}.lifeservice ul li i {margin-top: 12px;display: inline-block;width: 24px;height: 28px;/* background-color: aqua; */background: url(../images/icons.png)no-repeat -18px -15px;
}.bargain {margin-top: 5px;
}.newsflash .news {border: 1px dotted #e4e4e4;
}.newsflash .news .hd {height: 35px;border-bottom: 1px dotted #e4e4e4;
}.newsflash .news .hd h5 {float: left;padding-left: 15px;font-size: 14px;line-height: 35px;
}.newsflash .news .hd .gengduo {padding-right: 5px;line-height: 35px;float: right;
}.newsflash .news .hd .gengduo::after {content: '\e920';font-family: 'icomoon';
}.newsflash .news .bd {padding: 5px 15px 0px;
}.newsflash .news .bd ul li {height: 24px;line-height: 24px;/* 超出文字省略号表示  三个步骤 : 超出部分隐藏 文字必须一行显示 超出部分ellipsis */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.recom {height: 163px;background-color: rgb(255, 255, 255);margin-top: 12px;
}.recom .recom_hd {float: left;width: 205px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}.recom .recom_bd {position: relative;float: left;
}.recom .recom_bd ul li {position: relative;float: left;
}.recom .recom_bd ul li:nth-child(-n+3)::after {/* 注意after是行内元素 */display: block;position: absolute;right: 0;top: 10px;content: '';width: 1px;height: 145px;background-color: #ddd;
}/* 家用电器模块 */
.floor .jiadian .firstfloor_hd {margin-top: 29px;border-bottom: 2px solid rgb(200, 22, 25);color: rgb(200, 22, 25);height: 30px;line-height: 21px;
}.floor .jiadian .firstfloor_hd h3 {font-size: 18px;float: left;color: #c81623;font-weight: 400;}/* 下述为 标准的错误写法 热门本来在第一个回转而变成最后一个 解决方式是li 上再加浮动left
.tab_list li{float:right;line-height: 30px;
}
.tab_list li a{margin:15px;
}.tab_list ul .tab_list_hot{color: #c81623;
} */.tab_list {float: right;line-height: 30px;
}.tab_list li{float: left;
}
.tab_list li a {margin: 15px;
}.tab_list ul .tab_list_hot {color: #c81623;
}
.jiadian .firstfloor_bd{height: 361px;/* background-color: pink; */
}
.tab_list_tiem>div{float: left;height: 361px;
}
.col_210{width: 210px;text-align: center;background-color: #f9f9f9;
}
.col_210 ul li{width: 85px;height: 34px;border-bottom: 1px solid #ccc;float:left;text-align: center;line-height: 34px;padding-right:10px;
}.col_210 ul{padding-left: 12px;
}.col_329{width: 329px;
}
.col_221{width: 221px;border-right: #ccc 1px solid;
}.col_219{width: 219px;
}
.bb{/* 一般情况下，a如果包含有宽度的盒子，a需要转化为块级元素 */display: block;border-bottom: #ccc 1px solid;
}

list.css

/* 列表页专有的CSS样式 */
.nav{overflow: hidden;
}
.sk{position: absolute;border-left: 1px solid #c81523;left: 190px;top: 40px;padding: 3px 0 0 14px;
}
.sk_list{float: left;
}
.sk_list ul li{float: left;
}
.sk_list ul li a{float: left;display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color:black
}.sk_con{float: left;
}.sk_con ul li{float: left;
}.sk_con ul li:hover a{color: #c81523;}.sk_con ul li a{display: block;line-height: 49px;padding: 0 20px;font-size: 14px;font-weight: 400;color: black;}.sk_con .sk_con_secondli{color: #c81623;
}.sk_con .sk_con_lastli::after{display: inline-block;content: '\e91e';font-family: 'icomoon';padding-left:2px ;
}.sk_bd  li{float: left;margin-right: 2px;margin-top: 2px;
}.sk_bd li:hover{border: #c81523 1px solid;
}.sk_bd li:nth-child(4n){margin-right: 0;
}

register.css

.w { margin: 0 auto;width: 1200px;;}.header{height: 84px;border-bottom:2px solid #c81623;
}.logo{padding-top: 18px;
}.registerarea{height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3{height: 42px;border: 1px solid #ccc;background-color: #e4e4e4;line-height: 42px;font-size: 18px;padding: 0 10px;font-weight: normal;
}.registerarea h3 .login{float: right;font-size: 14px;
}.login a{color: #c81623;}.reg_form {width: 600px;margin:50px auto 0;/* background-color:pink; */
}.reg_form ul li label{display: inline-block;width: 88px;text-align: center;
}.reg_form ul li .inp{width: 242px;height: 37px;border: 1px solid #ccc;
}.reg_form ul li{margin-bottom: 20px;
}
.error{color: #c81523;
}.reg_form ul li .error_icon{display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url("../images/error.png") no-repeat;margin-top: -2px;
}.success{color: #00a854;}
.success_icon{display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/success.png);
}.safe {padding-left: 175px;
}.safe em{padding: 0 12px;color: #fff;
}.ruo{background-color: #de1111;
}.zhong {background-color: greenyellow;
}.qiang {background-color: #f79100;
}.agree{padding-left: 95px;
}.agree input{vertical-align: middle;
}.btn{width: 200px;height: 34px;background-color: #c81523;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}.mod_copyright {line-height: 15px;text-align: center;padding-top: 20px;
}.copyright_top {margin-bottom: 15px;
}.copyright_top a {margin: 0 3px;
}

相关文章：

  • 2.linux目录切换命令:cd与pwd以及路径与路径符
  • 家庭智能监控系统实现实时监控主要依托传感器网络
  • C++ RB_Tree
  • nginx源码下载和测试
  • spring4第4课-ioc控制反转-详解如何注入参数
  • Linux环境基础开发工具-＞gcc/g++
  • 深入理解C#中的委托与事件：从基础到高级应用
  • 图片压缩工具 | 发布到咸鱼并配置网盘自动发货
  • 如何利用categraf的exec插件实现对Linux主机系统用户及密码有效期进行监控及告警？
  • 【Redis技术进阶之路】「原理分析系列开篇」探索事件驱动枚型与数据特久化原理实现（文件事件驱动执行控制）
  • C# Costura.Fody 排除多个指定dll
  • Cobra CLI 工具使用指南：构建 Go 语言命令行应用的完整教程
  • Java面试实战：从Spring到大数据的全栈挑战
  • QT6搭建和使用MQTT
  • 【LangChain】
  • 【Redis】第3节｜深入理解Redis线程模型
  • Python中的__init__和__new__方法解析
  • 纵览网丨病毒学领域的 AI 变局：机遇、隐忧与监管之路
  • AI如何让你的智能设备电池更“聪明”？——Python实现智能电池管理
  • jdk 国内下载镜像站
  • 怎么看网站是什么程序做的/seo软件全套
  • wordpress+技术类模板下载/seo优化要做什么
  • 百度网做网站吗/seo中文含义
  • dw网站引导页怎么做/谷歌浏览器怎么下载
  • 学网站开发多久/广州优化营商环境条例
  • 聊城做网站的公司效果/免费网站站长查询