前言

入门前端初学HTML和CSS基础，通过psd文件完成品优购静态网站，新手还需要不断练习网页布局，努力学习加深记忆！

一、html

1.首页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"><title>品优购商城-正品低价、品质保障、配送及时、轻松购物</title><meta name="description"content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css">
</head>
<!-- logo SEO优化 1.放一个h1 2.h1里放一个链接，logo背景图片给链接 3.文字不显示，text-indent overflowhidden/ font-size0 4.title--><body><!-- 快捷导航 start--><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您!&nbsp;</li><li><a href="#">请登录&nbsp;</a></li><li><a href="register.html" class="style_red" target="_blank">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow_icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow_icon">关注品优购</li><li></li><li class="arrow_icon">客户服务</li><li></li><li class="arrow_icon">网站导航</li></ul></div></div></section><!-- 快捷导航 end--><!-- header头部制作 start --><header class="header w"><!-- logo部分 --><div class="logo"><h1><a href="index.html" title="品优购商城" target="_blank">品优购商城</a></h1></div><!-- 搜索框部分 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- 热词部分 --><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><!-- 购物车部分 --><div class="shopcar">我的购物车<!-- 统计部分 --><i class="count">8</i></div></header><!-- header头部制作 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" target="_blank">手机</a>、<a href="#">数码</a></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>、<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>、<a href="#">生鲜</a>、<a href="#">特产</a></li><li><a href="#">医药保健</a></li><li><a href="#">图书</a>、<a href="#">音像</a></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="#">闪购</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="forcus"><ul><li><img src="upload/foucs.png" alt=""></li><a href="#" class="prev">&lt;</a><a href="#" class="next">&gt;</a><ul class="forcus-nav"><li></li><li></li><li></li><li></li><li></li></ul></ul></div><div class="newsflash"><div class="news"><div class="news_hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="news_bd"><ul><li><a href="#"><strong>[特惠]</strong>&nbsp;备战开学季&nbsp;全民半价购数码</a></li><li><a href="#"><strong>[公告]</strong>&nbsp;品优稳占家电网购六成份额</a></li><li><a href="#"><strong>[特惠]</strong>&nbsp;百元中秋全品类礼券限量领&nbsp;享受中秋佳节团园礼包</a></li><li><a href="#"><strong>[公告]</strong>&nbsp;上品优生鲜&nbsp;享阳澄湖大闸蟹</a></li><li><a href="#"><strong>[特惠]</strong>&nbsp;每日享折扣品优品质游</a></li></ul></div></div><div class="lifemodule"><ul><li><i></i><p><a href="#">话费</a></p></li><li><i></i><img src="images/jian.png" alt=""><p><a href="#">机票</a></p></li><li><i></i><p><a href="#">电影票</a></p></li><li><i></i><p><a href="#">游戏</a></p></li><li><i></i><p><a href="#">彩票</a></p></li><li><i></i><p><a href="#">加油卡</a></p></li><li><i></i><img src="images/jian.png" alt=""><p><a href="#">酒店</a></p></li><li><i></i><p><a href="#">火车票</a></p></li><li><i></i><img src="images/jian.png" alt=""><p><a href="#">众筹</a></p></li><li><i></i><p><a href="#">理财</a></p></li><li><i></i><p><a href="#">礼品卡</a></p></li><li><i></i><p><a href="#">白条</a></p></li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></div></div></div></div><!-- main end --><!-- 推荐模块 start --><div class="w recom"><div class="recom_hd"><img src="images/今日推荐.png" alt=""></div><div class="recom_bd"><ul><li><a href="#"><img src="upload/images/li1_03.png" alt=""></a></li><li><a href="#"><img src="upload/images/li2_04.png" alt=""></a></li><li><a href="#"><img src="upload/images/li3_05.png" alt=""></a></li><li><a href="#"><img src="upload/images/li4_06.png" alt=""></a></li></ul></div></div><!-- 推荐模块 end --><!-- 猜你喜欢 start --><div class="w"><div class="fav_hd"><div class="fav_hd_l">猜你喜欢</div><div class="fav_hd_r">换一批</div></div><div class="fav_bd"><ul><li><a href="#"><i><img src="upload/图层 152.png" alt=""></i><p>阳光美包新款单肩包女包时尚子母包四件套女<h4>¥116.00</h4></p></a></li><li><a href="#"><i><img src="upload/图层 153.png" alt=""></i><p>爱仕达 30CM炒锅不粘锅NWG8330E电磁炉炒<h4>¥99.00</h4></p></a></li><li><a href="#"><i><img src="upload/图层 154.png" alt=""></i><p>捷波朗（jabra）BOOSI劲步<h4>¥245.00</h4></p></a></li><li><a href="#"><i><img src="upload/图层 156.png" alt=""></i><p>欧普JYLZ08面板灯平板灯铝<h4>¥238.00</h4></p></a></li><li><a href="#"><i><img src="upload/图层 158.png" alt=""></i><p>三星（G5500）移动联通<h4>¥649.00</h4></p></a></li><li><a href="#"><i><img src="upload/图层 159.png" alt=""></i><p>韩国所望紧致湿润精华露400ml<h4>¥649.00</h4></p></a></li></ul></div></div><!-- 猜你喜欢 end --><!-- 有趣区 start --><div class="w"><div class="fan_hd"><h4>传智播客-有趣区</h4></div><div class="fan_bd"><div class="fan1"><img src="upload/images/images/01-电商-主页-gai_03_1_03.png" alt=""></div><div class="fan2"><a href="#"><img src="upload/images/images/01-电商-主页-gai_05.png" alt=""></a></div><div class="fan3"><a href="#"><img src="upload/images/images/01-电商-主页-gai_06.png" alt=""></a></div><div class="fan4"><img src="upload/images/images/01-电商-主页-gai_07.png" alt=""></div></div></div><!-- 有趣区 end --><!-- 电梯层模块 start --><div class="w floor"><!-- 家用电器 --><div class="jiayongdq"><!-- 头部 --><div class="jy_hd"><h3>家用电器</h3><div class="tab_list"><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><!-- 主体 --><div class="jy_bd"><div class="tab_content"><div class="tab_list_item1 clearfix"><div class="col210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><a href="#"><img src="upload/images/01-电商-主页-gai_03.png" alt=""></a></div><div class="col328"><a href="#"><img src="upload/images/01-电商-主页-gai_04_03.png" alt=""></a></div><div class="col220"><a href="#" class="bb"><img src="upload/images/01-电商-主页-gai05_05.png" alt=""></a><a href="#"><img src="upload/images/01-电商-主页-gai06_10.png" alt=""></a></div><div class="col220"><a href="#"><img src="upload/images/01-电商-主页-gai08_06.png" alt=""></a></div><div class="col220"><a href="#" class="bb"><img src="upload/images/01-电商-主页-gai09_07.png" alt=""></a><a href="#"><img src="upload/images/01-电商-主页-gai10_16.png" alt=""></a></div></div></div></div><!-- 广告 --><div class="w guanggao"><img src="upload/图层119.png" alt=""></div></div><!-- 手机通讯 --><div class="jiayongdq"><!-- 头部 --><div class="jy_hd"><h3>手机通讯</h3><div class="tab_list"><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><!-- 主体 --><div class="jy_bd"><div class="tab_content"><div class="tab_list_item1 clearfix"><div class="col210"><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="upload/手机区域/images/01-电商-主页-gai03_23.png" alt=""></a></div><div class="col328"><a href="#"><img src="upload/手机区域/images/01-电商-主页-gai04_24.png" alt=""></a></div><div class="col220"><a href="#" class="bb"><img src="upload/手机区域/images/01-电商-主页-gai05_24.png" alt=""></a><a href="#"><img src="upload/手机区域/images/01-电商-主页-gai06_27.png" alt=""></a></div><div class="col220"><a href="#"><img src="upload/手机区域/images/01-电商-主页-gai07_25.png" alt=""></a></div><div class="col220"><a href="#" class="bb"><img src="upload/手机区域/images/01-电商-主页-gai08_25.png" alt=""></a><a href="#"><img src="upload/手机区域/images/01-电商-主页-gai09_31.png" alt=""></a></div></div></div></div><!-- 广告 --><div class="w guanggao"><img src="upload/图层122.png" alt=""></div></div><!-- 电脑办公 --><div class="jiayongdq"><!-- 头部 --><div class="jy_hd"><h3>电脑办公</h3><div class="tab_list"><ul><li><a href="#">热门</a>|</li><li><a href="#">电脑/平板</a>|</li><li><a href="#">潮流影音</a>|</li><li><a href="#">智能/外设</a>|</li><li><a href="#">DIY硬件</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="jy_bd"><div class="tab_content"><div class="tab_list_item1 clearfix"><div class="col210"><ul><li><a href="#">SSD硬盘</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="upload/电脑区域/images/01-电商-主页-gai01_38.png" alt=""></a></div><div class="col328"><a href="#"><img src="upload/电脑区域/images/01-电商-主页-gai02_39.png" alt=""></a></div><div class="col220"><a href="#" class="bb"><img src="upload/电脑区域/images/01-电商-主页-gai03_38.png" alt=""></a><a href="#"><img src="upload/电脑区域/images/01-电商-主页-gai04_45.png" alt=""></a></div><div class="col220"><a href="#"><img src="upload/电脑区域/images/01-电商-主页-gai05_39.png" alt=""></a></div><div class="col220"><a href="#" class="bb"><img src="upload/电脑区域/images/01-电商-主页-gai06_42.png" alt=""></a><a href="#"><img src="upload/电脑区域/images/01-电商-主页-gai07_48.png" alt=""></a></div></div></div></div><!-- 广告 --><div class="w guanggao"><img src="upload/图层123.png" alt=""></div></div></div><!-- 电梯层模块 end --><!-- 热门疯抢 start --><div class="w"><div class="fq_hd"><h4>热门疯抢</h4></div><div class="fq_bd"><div class="fq_bd1"><a href="#"><img src="upload/images/01-电商-主页-gai_57.png" alt=""></a></div><div class="fq_bd2"><a href="#"><img src="upload/images/01-电商-主页-gai_58.png" alt=""></a></div><div class="fq_bd3"><img src="upload/images/01-电商-主页-gai_59.png" alt=""></div></div></div><!-- 热门疯抢 end --><!-- footer尾部 start --><footer class="footer"><div class="w"><div class="mod_servicce"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>急速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人订制家电套餐</p></div></li><li><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></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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</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="../shopping/images/erweima_03.png" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><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="#">品优购公益</a> | <a href="#">English Site</a>| <a href="#">Contact U</a></div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:zhanghj+itcast.cn <br><p class="icp">京ICP备08001421号京公网安备110108007702</p></div></div></div></footer><!-- footer尾部 end -->
</body>
165 208</html>

2.列表页list

<!DOCTYPE html>
<html lang="en"><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"><title>手机秒杀页-正品低价、品质保障、配送及时、轻松购物</title><meta name="description"content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><link rel="shortcut icon" href=" favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/list.css">
</head><body><!-- 快捷导航 start--><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您!&nbsp;</li><li><a href="#">请登录&nbsp;</a></li><li><a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow_icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow_icon">关注品优购</li><li></li><li class="arrow_icon">客户服务</li><li></li><li class="arrow_icon">网站导航</li></ul></div></div></section><!-- 快捷导航 end--><!-- header头部制作 start --><header class="header w"><!-- logo部分 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 秒杀 --><div class="miaosha"><img src="images/秒杀拷贝.png" alt=""></div><!-- 搜索框部分 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- 热词部分 --><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><!-- 购物车部分 --><div class="shopcar">我的购物车<!-- 统计部分 --><i class="count">8</i></div></header><!-- header头部制作 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_content"><ul><li><a href="#">女装</a></li><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="#" class="morefl">更多分类</a></li></ul></div></div></nav><!-- nav导航 end --><!-- 列表页主体部分 start --><div class="w sk_container"><div class="sk_hd"><img src="upload/images/images/02-电商-分类列表页_03.png" alt=""></div><div class="sk_bd clearfix"><ul><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li><li><img src="upload/图层7.png" alt=""><a href="#"><p>Apple苹果iPhone 6s Plus (A1699) 32G金色 移动联通电信4G手机</p></a><div class="sk_price clearfix"><h4>¥6088</h4><span>¥6988</span></div><div class="num"><div class="num1">已售87%</div><div class="num2"><div class="num2_red"></div></div><div class="num3">剩余<span class="style_red">29</span>件</div></div><div class="likeqg"><button>立刻抢购</button></div></li></ul></div></div><!-- 列表页主体部分 end --><!-- footer尾部 start --><footer class="footer"><div class="w"><div class="mod_servicce"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>急速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人订制家电套餐</p></div></li><li><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></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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</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="../shopping/images/erweima_03.png" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <ahref="#">商家入驻</a>| <a href="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <ahref="#">品优购社区</a> | <a href="#">品优购公益</a> | <a href="#">English Site</a>| <a href="#">Contact U</a></div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:zhanghj+itcast.cn <br><p class="icp">京ICP备08001421号京公网安备110108007702</p></div></div></div></footer><!-- footer尾部 end -->
</body></html>

3.注册页

<!DOCTYPE html>
<html lang="en"><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"><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"><!-- 头部 start--><div class="header"><div class="logo"><a href="index.html" target="_blank"><img src="images/logo.png" alt=""></a></div></div><!-- 头部 end--><!-- 注册页面 start --><div class="registerarea"><h3>注册新用户<p>我有账号，去<a href="#"><span>登陆</span></a></p></h3><div class="reg_for"><form action=""><ul><li><label for="">手机号&nbsp;:</label><input type="text" class="inp"><span class="error1"><i class="error_icon"></i>手机号码格式不正确，请从新输入</span></li><li><label for="">短信验证码&nbsp;:</label><input type="text" class="inp"><span class="succs1"><i class="succs_icon"></i>验证码正确</span></li><li><label for="">登录密码&nbsp;:</label><input type="text" class="inp"><span class="error2"><i class="error_icon"></i>密码不少于6位，请从新输入</span></li><li class="safe">安全程度&nbsp;<em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em></li><li><label for="">确认密码&nbsp;:</label><input type="text" class="inp"><span class="error3"><i class="error_icon"></i>密码不一致，请从新输入</span></li><li class="agree"><input type="checkbox" name="" id="" class="che">同意协议并注册 <a href="#">《知果果用户协议》</a></li><li class="wanchengzc"><input type="submit" value="完成注册" class="btn"></li></ul></form></div></div><!-- 注册页面 end --><!-- footer尾部 start --><footer class="footer"><div class="w"><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <ahref="#">商家入驻</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">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱:zhanghj+itcast.cn <br><p class="icp">京ICP备08001421号京公网安备110108007702</p></div></div></div></footer><!-- footer尾部 end --></div>
</body></html>

二、css

1.base.css

*{margin:0;padding:0;box-sizing: border-box;
}
em,i{font-style:normal;
}
li{list-style:none;
}
img{/* 照顾兼容性 */border:0;vertical-align:middle;
}
button{cursor:pointer;
}
a{color:#666;text-decoration:none;
}
a:hover{color:#c81623!important;
}
button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;border: 0;outline: none;
}
body{/* 抗锯齿性，让文字显示更加清晰 */-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;
}
.shortcut {height: 31px;background-color: #f1f1f1;line-height: 31px;
}
.fl {float: left;
}
.fr {float: right;
}
.shortcut ul li {float: left;
}
.style_red {color: #c81623!important;
}
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666666;margin: 9px 13px;
}
.arrow_icon::after {content: '';font-family: 'icomoon';margin-left: 9px;
}
.header {position: relative;height: 105px;/* background-color: pink; */
}
.logo {position: absolute;top: 25px;width: 171px;height: 61px;
}
.logo a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat center;/* font-size: 0; */text-indent: -9999px;overflow: hidden;
}
.search {position: absolute;top: 25px;left: 346px;width: 538px;height: 36px;border: 2px solid #b1191a;
}
.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;left: 346px;top: 66px;
}
.hotwords a {margin: 0 10px;
}
.shopcar {position: absolute;top: 25px;right: 64px;width: 140px;height: 35px;border: 1px solid #dfdfdf;background-color: #f7f7f7;line-height: 35px;text-align: center;
}
.shopcar::before {content: '';font-family: 'icomoon';margin-right: 5px;color: #d95050;
}
.shopcar::after {content: '';font-family: 'icomoon';margin-left: 10px;
}
.count {position: absolute;top: -5px;left: 105px;height: 14px;padding: 0 5px;border-radius: 7px 7px 7px 0;color: #fff;background-color: #e60012;line-height: 14px;
}
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown {float: left;width: 209px;height: 45px;margin-right: 10px;background-color: #b1191a;
}
.nav .navitems {float: left;
}
.dropdown .dt {width: 100%;height: 100%;font-size: 16px;color: #fff;text-align: center;line-height: 44px;
}
.dropdown .dd {/* display: none; */width: 100%;height: 464px;background-color: #c81623;margin-top: 2px;
}
.dropdown .dd ul li {position: relative;height: 31px;margin-left: 2px;padding-left: 8px;/* text-align: center; */line-height: 31px;color: #fff;
}
.dropdown .dd ul li::after {position: absolute;top: 3px;right: 10px;font-family: 'icomoon';content: '';color: #fff;font-size: 14px;
}
.dropdown .dd ul li:hover {background-color: #fff;
}
.dropdown .dd ul li:hover a {color: #b1191a;
}
.dropdown .dd ul li:hover::after {color: #b1191a;
}
.dropdown .dd ul li a {color: #fff;font-size: 14px;
}
.navitems ul li{float: left;text-align: center;line-height: 45px;
}
.navitems ul li a {display: block;height: 45px;padding: 0 25px;font-size: 16px;color: #494949;
}
.navitems ul li a:hover {color: #b1191a;
}
.footer {height: 417px;padding-top: 30px;background-color: #f5f5f5;
}
.mod_servicce {height: 80px;border-bottom: 2px solid #ededed;
}
.mod_servicce ul li {float: left;width: 240px;height: 80px;padding-left: 37px;
}
.mod_servicce ul li h5 {float: left;width: 50px;height: 50px;margin-right: 8px;/* background: url(../images/icons.png)  no-repeat -252px -2px; */
}
.mod_servicce ul li:first-child h5 {background: url(../images/icons.png)  no-repeat -252px -2px;
}
.mod_servicce ul li:nth-child(2) h5 {background: url(../images/icons.png)  no-repeat -254px -53px;
}
.mod_servicce ul li:nth-child(3) h5 {background: url(../images/icons.png)  no-repeat -257px -105px;
}
.mod_servicce ul li:nth-child(4) h5 {background: url(../images/icons.png)  no-repeat -258px -156px;
}
.mod_servicce ul li:last-child h5 {background: url(../images/icons.png)  no-repeat -257px -209px;
}
.service_txt h4 {margin-top: 8px;font-size: 14px;
}
.service_txt p {font-size: 12px;
}
.mod_help {height: 185px;border-bottom: 2px solid #ededed;margin-left: 53px;margin-top: 24px;
}
.mod_help dl {float: left;width: 200px;
}
.mod_help dl:last-child {width: 97px;text-align: center;
}
.mod_help dl dt {color: #797979;margin-bottom: 14px;font-size: 16px;
}
.mod_help dl dd {color: #666666;font-size: 12px;
}
.mod_copyright {text-align: center;margin-top: 20px;
}
.mod_copyright .links a {padding: 0 8px;
}
.mod_copyright .copyright {margin-top: 14px;line-height: 20px;
}
.mod_copyright .copyright .icp {letter-spacing: 1px;
}

3.index.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;
}
.main {width: 980px;height: 454px;margin: 10px 0 10px 220px;
}
.forcus {position: relative;float: left;width: 719px;height: 100%;
}
.forcus .prev,.forcus .next{position: absolute;top: 50%;margin-top: -19px;width: 38px;height: 38px;text-align: center;line-height: 38px;font-size: 20px;color: #fff;background: rgba(255,255,255,.3);}
.forcus .prev {left: -8px;border-bottom-right-radius: 19px;border-top-right-radius: 19px;
}
.forcus .next {right: -8px;border-bottom-left-radius: 19px;border-top-left-radius: 19px;
}
.forcus-nav {position: absolute;bottom: 0;left: 50%;padding-left: 0;margin-left: -35px;width: 70px;height: 13px;background: rgba(255, 255, 255, .5);border-radius: 7px;
}
.forcus-nav li {float: left;width: 8px;height: 8px;margin: 3px;background-color: #fff;border-radius: 50%;
}
.forcus-nav li:hover {cursor: pointer;background-color: red;
}
.newsflash {float: right;width: 251px;height: 100%;
}
.news {height: 165px;border: 1px solid #e4e4e4;
}
.news_hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #e4e4e4;padding: 0 15px;
}
.news_hd h5 {float: left;font-size: 14px;color: #494949;
}
.news_hd .more {float: right;font-size: 14px;color: #494949;
}
.news_hd .more::after {font-family: 'icomoon';content: '';margin-left: 5px;
}
.news_bd {padding: 5px 15px;
}
.news_bd ul li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.lifemodule {overflow: hidden;height: 209px;margin-bottom: 5px;border: 1px solid #e4e4e4;border-top: 0;
}
.lifemodule ul {width: 253px;
}
.lifemodule ul li {position: relative;float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}
.lifemodule ul li img {position: absolute;top: 0;right: 0;
}
.lifemodule ul li i {display: inline-block;margin-top: 10px;width: 24px;height: 28px;
}
.lifemodule ul li:first-child i {background: url(../images/icons.png) no-repeat -16px -17px;
}
.lifemodule ul li:nth-child(2) i {background: url(../images/icons.png) no-repeat -79px -16px;
}
.lifemodule ul li:nth-child(3) i {background: url(../images/icons.png) no-repeat -142px -16px;
}
.lifemodule ul li:nth-child(4) i {background: url(../images/icons.png) no-repeat -206px -16px;
}
.lifemodule ul li:nth-child(5) i {background: url(../images/icons.png) no-repeat -17px -88px;
}
.lifemodule ul li:nth-child(6) i {background: url(../images/icons.png) no-repeat -77px -88px;
}
.lifemodule ul li:nth-child(7) i {background: url(../images/icons.png) no-repeat -142px -88px;
}
.lifemodule ul li:nth-child(8) i {background: url(../images/icons.png) no-repeat -207px -87px;
}
.lifemodule ul li:nth-child(9) i {background: url(../images/icons.png) no-repeat -16px -158px;
}
.lifemodule ul li:nth-child(10) i {background: url(../images/icons.png) no-repeat -79px -158px;
}
.lifemodule ul li:nth-child(11) i {background: url(../images/icons.png) no-repeat -141px -154px;
}
.lifemodule ul li:last-child i {background: url(../images/icons.png) no-repeat -206px -159px;
}.lifemodule ul li p {margin-top: 1px;font-size: 14px;color: #666666;
}
.recom {height: 163px;margin-bottom: 31px;
}
.recom_hd {float: left;width: 205px;height: 163px;padding-top: 29px;background-color: #5c5251;text-align: center;
}
.recom_bd {float: left;width: 995px;height: 163px;background-color: #ebebeb;
}
.recom_bd ul li {float: left;
}
.recom_bd ul li:hover {box-shadow: 10px 10px 10px -7px rgba(0, 0, 0, .3);
}
.recom_bd ul li img {width: 248px;height: 163px;
}
.fav_hd {width: 1200px;height: 33px;
}
.fav_hd .fav_hd_l {float: left;font-size: 18px;color: #7d7d7d;
}
.fav_hd .fav_hd_r {float: right;margin-top: 3px;margin-right: 45px;font-size: 12px;color: #7d7d7d;
}
.fav_hd .fav_hd_r:hover {color:#c81623;cursor: pointer;
}
.fav_hd .fav_hd_r::after {font-family: 'icomoon';content: '';margin-left: 8px;
}
.fav_bd {height: 233px;width: 1202px;margin-bottom: 30px;border: 1px solid #ededed;
}
.fav_bd ul li {position: relative;float: left;width: 200px;height: 233px;
}
.fav_bd ul li::after {position: absolute;right: 0;bottom: 10px;content: '';width: 1px;height: 60px;background-color: #ededed;
}
.fav_bd ul li i {display: block;width: 140px;height: 129px;margin: 0 30px 0 30px;text-align: center;}
.fav_bd ul li img {width: 100%;height: 100%;
}
.fav_bd ul li:nth-child(3) img {width: 37px;
}
.fav_bd ul li:nth-child(4) img {height: 62px;margin-top: 34px;
}
.fav_bd ul li:nth-child(5) img {width: 115px;
}
.fav_bd ul li:last-child img {width: 60px;
}
.fav_bd ul li p {padding: 0 35px;margin-top: 12px;line-height: 16px;font-size: 12px;color: #666666;
}
.fav_bd ul li a {display: block;width: 100%;padding-top: 24px;
}
.fav_bd ul li a:hover {box-shadow: 10px 10px 10px -7px rgba(0, 0, 0, .3);
}
.fav_bd ul li h4 {font-weight: normal;font-size: 18px;color: #df3033;padding: 0 35px 7px;
}
.fan_hd {height: 33px;
}
.fan_hd h4 {float: left;font-size: 18px;color: #6e6e6e;font-weight: normal;
}
.fan_bd {height: 405px;margin-bottom: 28px;
}
.fan_bd>div {float: left;
}
.fan_bd div:first-child {width: 405px;
}
.fan_bd div:nth-child(2){width: 222px;
}
.fan_bd div:nth-child(3){width: 410px;
}
.fan_bd div:last-child{width: 160px;
}
.jy_hd {height: 33px;border-bottom: 2px solid #c81623;
}
.jy_hd h3 {float: left;height: 30px;font-size: 18px;color: #c81623;font-weight: normal;
}
.tab_list {float: right;padding-top: 5px;
}
.tab_list ul li {float: left;color: #999999;font-size: 12px;
}
.tab_list ul li a {margin: 0 15px;
}
.jy_bd {margin-bottom: 20px;
}
.tab_list_item1>div {float: left;
}
.col210 {width: 210px;padding-left: 13px;background-color: #f9f9f9;text-align: center;
}
.col210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ededed;margin-right: 13px;text-align: center;line-height: 34px;
}
.col328 {width: 328px;
}
.col220 {width: 220px;border-left: 1px solid #ccc;
}
.col220 a {display: block;
}
.bb {border-bottom: 1px solid #ccc;
}
.guanggao {margin-bottom: 29px;height: 65px;
}
.fq_hd {height: 30px;
}
.fq_hd h4 {float: left;font-size: 18px;font-weight: normal;color: #5d5d5d;
}
.fq_bd {height: 283px;border: 1px solid #ccc;margin-bottom: 38px;
}
.fq_bd>div {float: left;
}
.fq_bd a {display: block;
}
.fq_bd1 {width: 240px;
}
.fq_bd2 {width: 660px;
}
.fq_bd3 {width: 298px;border-left: 1px solid #ccc;
}

4.列表页.css

.miaosha {position: absolute;top: 40px;left: 185px;border-left: 2px solid #c81523;padding: 5px 0 5px 13px;
}
.sk_list {float: left;
}
.sk_content {float: left;
}
.sk_list ul li {float: left;
}
.sk_list ul li a {display: block;height: 45px;padding: 0 30px;line-height: 45px;font-size: 16px;color: #424242;font-weight: 700;
}
.sk_content ul li {float: left;height: 45px;
}.morefl::after {font-family: 'icomoon';content: '';margin-left: 3px;
}
.sk_content ul li a {display: block;height: 45px;padding: 0 24px;line-height: 45px;font-size: 14px;color: #666666;
}
.sk_container {margin-bottom: 200px;
}
.sk_hd {margin-bottom: 25px;
}
.sk_bd ul li {float: left;width: 290px;height: 458px;margin-right: 12px;
}
.sk_bd ul li:nth-child(4n) {margin-right: 0;
}
.sk_bd ul li img {width: 290px;height: 290px;
}
.sk_bd ul li a {display: block;
}
.sk_bd ul li a p {padding: 0 15px;margin-bottom: 18px;font-size: 14px;line-height: 20px;color: #666666;
}
.sk_bd ul li a p:hover{color: red;
}
.sk_price {padding: 0 15px;
}
.sk_price h4 {float: left;font-size: 22px;color: #e60012;
}
.sk_price span {float: left;font-size: 14px;color: #a4a4a4;margin-left: 10px;margin-top: 7px;text-decoration: line-through;
}
.num {height: 41px;padding: 14px 15px 9px;
}
.num .num1 {float: left;font-size: 14px;color: #a3a3a3;margin-right: 7px;
}
.num .num2 {float: left;width: 132px;height: 12px;border-radius: 6px;border: 1px solid #ed282e;margin-top: 5px;
}
.num .num2 .num2_red {width: 87%;height: 12px;border-radius: 6px;border: 1px solid transparent;background-color: #ed282e;transition: width .3s;
}
.num .num2 .num2_red:hover {width: 100%;
}
.num .num3 {float: left;margin-left: 5px;font-size: 14px;color: #a3a3a3;
}
.likeqg button{display: block;width: 290px;height: 35px;background-color: #b1191a;line-height: 35px;text-align: center;font-size: 20px;color: #fff;
}

5.注册页.css

.w {width: 1200px;margin: 0 auto;
}
.header {height: 83px;border-bottom: 1px solid #c71b2a;margin-bottom: 23px;
}
.logo {padding-top: 17px;
}
.logo a {display: block;
}
.registerarea {height: 521px;border: 1px solid #ccc;
}
.registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;padding-left: 10px;line-height: 42px;font-size: 18px;color: #767676;font-weight: 400;background-color: #ececec;
}
.registerarea h3 p {float: right;font-size: 14px;color: #767676;margin-right: 11px;
}
.registerarea h3 p span {color: #c71b2a;
}
.reg_for {width: 565px;margin: 0 auto;margin-top: 28px;
}
.reg_for label {display: inline-block;width: 90px;text-align: right;
}
.reg_for .inp {width: 240px;height: 38px;border: 1px solid #ccc;margin: 0 9px 20px;
}
.reg_for ul li:nth-child(3) input {margin-bottom: 10px;
}
.reg_for ul li:nth-child(4){margin-bottom: 20px;
}
.reg_for ul li:nth-child(5) {margin-bottom: 43px;
}
.error_icon {display: inline-block;vertical-align: middle;width: 21px;height: 21px;margin-right: 5px;background: url(../images/电商-注册_03.png);
}
.succs1 {color: green;
}
.succs_icon {display: inline-block;vertical-align: middle;width: 17px;height: 16px;margin-right: 5px;background: url(../images/checked.png);
}
.safe {color: #d3d3d3;margin-left: 178px;
}
.safe em {padding: 0 12px;color: #fff;
}
.ruo {background-color: #de1111;
}
.zhong{background-color: #40b83f;
}
.qiang{background-color: #f79100;
}
.agree {margin-bottom: 50px;
}
.agree a {color: #1ba1e6;
}
.agree .che {margin-left: 101px;margin-right: 14px;vertical-align: middle;
}
.wanchengzc .btn {width: 198px;height: 34px;margin-left: 111px;background-color: #c81623;line-height: 34px;text-align: center;font-size: 14px;color: #fff;
}
.footer {margin-top: 30px;
}
.mod_copyright {text-align: center;margin-top: 20px;
}
.mod_copyright .links a {padding: 0 8px;
}
.mod_copyright .copyright {margin-top: 14px;line-height: 20px;
}
.mod_copyright .copyright .icp {letter-spacing: 1px;
}

总结

初学HTML和CSS，了解SEO优化和常见静态网页布局
未来会深入学习html和css深层次的知识，
正在学习js，同时通过CSS权威指南和一些相关博客深入了解体会HTML和CSS

品优购静态页面，前端初学一个半月，努力相关推荐

品优购静态页面--首页的制作
一公共样式 common.css index.html 1 网站图标 favicon.ico 显示在浏览器的地址栏或者标签上 1.1 制作favicon 图标 ① 将logo 图标切成 png图片 ...
品优购静态页面（html+css）——商品详情页
HTML部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
PC端品优购注册页面 resgister.css以及web服务器学习
注册页类名命名注册页面:register.html 注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化注册专区: registerarea 注册内容 reg-form 错误 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
纯HTML、CSS实现搭建品优购商城的静态网站这布局还好吗？超适合前端入门者
这个静态网站非常适合前端入门者,我们很多时候学习的都是理论知识,我们应该多动手,把理论转化为实践,前端知识多,多动手才能加深印象. 网站地址:在PC端,点击这里,查看完整静态网站. 下面我们先来看看静 ...
基于HTML(品优购)电商项目项目的设计与实现（html前端源码和论文设计）
XXXX职业学院毕业论文题目: 基于HTML品优购项目的设计与实现所属系部: 信息工程学院专业班级: 学生姓名: 指导教师: 2020 年 11 月 29 日摘要品优购网上商城是 ...
黑马程序员前端实战项目---PC端品优购（下）
目标能够写出列表页能够写出注册页能够把品优购网站部署到本地服务器能够把品优购网站上传到远程服务器教程推荐:Web前端零基础入门HTML5+CSS3+前端项目品优购项目首页制作 main ...
前端基础第一天项目品优购
品优购项目-上目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化 ...

品优购静态页面，前端初学一个半月，努力

文章目录

前言

一、html

1.首页index

2.列表页list

3.注册页

二、css

1.base.css

2.common.css

3.index.css首页样式

4.列表页.css

5.注册页.css

总结

品优购静态页面，前端初学一个半月，努力相关推荐

最新文章

热门文章