行业知识
HTML+CSS做的商城页面
2026-10-30 18:45:48
来源：互联网转载
包括三个静态页面，主页面以及商品页面（目前只写了手机的页面）还有注册页面
一、index.html(主页面)+index.css
index.html
品优购商城-综合网购首选-正品低价、品质保障、及时送达、轻松购物
- 品优购欢迎您！
- 请登录 免费注册
- 我的订单
- 我的品优购
- 品优购会员
- 企业采购
- 关注品优购
- 客户服务
- 网站导航
品优购
搜索 优惠购首发亿元优惠 9.9元团购 美满99减30 办公用品电脑 通信 我的购物车 8 全部商品分类- 家用电器
- 手机、数码、通信
- 电脑、办公
- 家居、家具、家装、厨具
- 男装、女装、童装、内衣
- 个户化妆、清洁用品、宠物
- 鞋靴、箱包、珠宝、奢侈品
- 运动户外、钟表
- 汽车、汽车用品
- 母婴、玩具乐器
- 食品、酒类、生鲜、特产
- 医药保健
- 图书、音像、电子书
- 彩票、旅行、充值、票务
- 理财、众筹、白条、保险
- 服装城
- 美妆馆
- 传智超市
- 全球购
- 闪购
- 团购
- 拍卖
- 有趣
品优购快报 更多
-
[特惠]
备战开学季 全民半价购数码 -
[公告]
品优稳占家电网购六成份额 99 -
[特惠]
百元中秋全品类礼券限量领 -
[公告]
上品优生鲜 享阳澄湖大闸蟹 -
[特惠]
每日享折扣品优品质游
猜你喜欢
换一批-
阳光美包新款单肩包女
包时尚子母包四件套女￥116.00
-
爱仕达 30CM炒锅不粘
锅NWG8330E电磁炉炒￥99.00
-
捷波朗
(jabra) BOOSI劲步￥245.00
-
欧普
JYLZ08面板灯平板灯铝￥238.00
-
三星
(G5500)移动联￥649.00
-
韩国所望
紧致湿润精华露400ml￥649.00
家用电器
- 热门|
- 大家电|
- 生活电器|
- 厨房电器|
- 个护健康|
- 应季电器|
- 空气/净水|
- 新奇特|
- 高端电器
- 节能补贴
- 4K电视
- 空气净化器
- IH电饭煲
- 滚筒洗衣机
- 电热水器
烧水壶智能光控泡茶壶茶具套装
满299.00减40.00
-
-
正品保障
正品保障，index.php/tags-331.html" >提供发票
-
极速物流
急速物流，急速送达
-
无忧售后
7天无理由退换货
-
特色服务
私人定制家电套餐
-
帮助中心
您的购物指南
- 关于我们
- 联系我们
- 联系客服
- 商家入驻
- 营销中心
- 手机品优购
- 友情链接
- 销售联盟
- 品优购社区
- 品优购公益
- English Site
- Contact U
京ICP备08001421号京公网安备110108007702index.css
-
.main { width: 980px; height: 455px; margin: 10px 220px;}.focus { position: relative; float: left; width: 721px;}.focus .pref,.focus .next { position: absolute; display: block; top: 50%; margin-top: -12px; width: 25px; height: 25px; text-align: center; line-height: 25px; color: #fff; background: rgba(0, 0, 0, .3);}.focus .pref:hover,.focus .next:hover { color: #b1191a;}.focus .pref { border-bottom-right-radius: 12px; border-top-right-radius: 12px;}.focus .next { right: 0; border-bottom-left-radius: 12px; border-top-left-radius: 12px;}.promo-nav { position: absolute; bottom: 15px; left: 50%; margin-left: -50px; width: 100px; height: 20px; border-radius: 10px; background: rgba(0, 0, 0, .4);}.promo-nav li { float: left; width: 12px; height: 12px; background-color: #fff; margin-left: 6px; margin-top: 5px; border-radius: 6px;}.promo-nav li:hover { background-color: #b1191a;}.newsflash { float: right; width: 250px; height: 100%; border: 1px #ccc solid;}.news { height: 165px; border-bottom: 1px #ccc solid;}.news-hd { height: 32px; line-height: 32px; font-size: 14px; padding-left: 1em; border-bottom: 1px #ccc dotted;}.news .news-bd { padding-top: 10px;}.news .news-bd a { line-height: 22px; margin-left: 1em;}.news .news-bd li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.news-bd h4 { display: inline; font-size: 14px; margin-right: 5px;}.news-hd a { margin-left: 112px; font-size: 13px;}.news-hd a::after { content: '\e646'; font-family: 'iconfont';}.liveservice { width: 100%; height: 208px;}.liveservice a { position: relative; display: block; float: left; width: 62px; height: 70px; margin-top: 0; border-left: 1px #ccc solid; border-bottom: 1px #ccc solid;}.liveservice a i { position: absolute; bottom: 7px; left: 16px;}.liveservice a:nth-child(1) { background: url(../images/icons.png);}.liveservice a:nth-child(2) { background: url(../images/icons.png) -62px 0px no-repeat;}.liveservice a:nth-child(3) { background: url(../images/icons.png) -125px -0px no-repeat;}.liveservice a:nth-child(4) { background: url(../images/icons.png) -189px 0px no-repeat;}.liveservice a:nth-child(5) { background: url(../images/icons.png) 0px -70px no-repeat;}.liveservice a:nth-child(6) { background: url(../images/icons.png) -60px -70px no-repeat;}.liveservice a:nth-child(7) { background: url(../images/icons.png) -126px -70px no-repeat;}.liveservice a:nth-child(8) { background: url(../images/icons.png) -190px -70px no-repeat;}.liveservice a:nth-child(9) { background: url(../images/icons.png) 0px -145px no-repeat;}.liveservice a:nth-child(10) { background: url(../images/icons.png) -62px -145px no-repeat;}.liveservice a:nth-child(11) { background: url(../images/icons.png) -126px -74px no-repeat;}.liveservice a:nth-child(12) { background: url(../images/icons.png) -190px -146px no-repeat;}.liveservice a:nth-child(1),.liveservice a:nth-child(5),.liveservice a:nth-child(9) { border-left: 0;}.bargain { height: 76px; margin-top: 5px;}.recom { height: 162px; background-color: #ebebeb;}.recom .recom-hd { float: left; width: 205px; height: 162px; text-align: center; padding-top: 29px; background-color: #5c5251;}.recom-bd ul li { position: relative; float: left; width: 247px; height: 162px;}.recom-bd img { width: 247px; height: 100%;}.recom-bd ul li:nth-child(-n+3):after { content: ''; position: absolute; right: 0; top: 10px; width: 2px; height: 143px; background-color: #dddddd;}/* 猜你喜欢guesslike */.guesslike { height: 260px; margin-top: 30px;}.guesslike-hd { height: 28px;}.guesslike h4 { float: left; font-size: 18px; font-weight: normal;}.guesslike button { float: right; font-size: 12px; background-color: transparent; margin-right: 18px;}.guesslike button::after { content: '\e6e1'; font-family: 'iconfont'; margin-left: 8px;}.guesslike-bd { height: 232px; margin-top: 10px; border: 1px #ededed solid;}.guesslike-bd li { position: relative; float: left; width: 199px; height: 232px;}.guesslike-bd li img { width: 100%;}.guesslike-bd li span { position: absolute; bottom: 10px; left: 0; width: 199px; height: 64px; padding-left: 34px;}.guesslike-bd li:nth-child(-n+5) span { border-right: 1px #ededed solid;}.guesslike-bd li span p { line-height: 20px; font-size: 14px;}.guesslike-bd li span h5 { color: #df3033; font-size: 16px;}/* 家电模块 */.jiadian { margin-top: 28px;}.jiadian .box-hd { height: 30px; border-bottom: 2px #c81623 solid;}.jiadian .box-hd h3 { float: left; font-size: 18px; color: #c81623;}.jiadian .tab-list { float: right;}.jiadian .tab-list li { float: left; font-size: 12px; line-height: 30px; text-align: center;}/* 此方法过于麻烦 *//* .jiadian .tab-list li:nth-child(-n+8)::after { position: absolute; content: ''; top: 9px; right: 0; width: 1px; height: 12px; background-color: #999999;} */.jiadian .tab-list li a { margin: 0 12px;}.jiadian .box-bd { height: 442px;}.jiadian .box-bd .tab-content .tab_list_item { height: 361px;}.jiadian .box-bd .tab-content .tab_list_item>p { float: left; height: 361px;}.col-210 { width: 210px; padding-left: 14px; padding-top: 10px; text-align: center; background-color: #f9f9f9;}.col-210 li { float: left; width: 86px; height: 20px; margin-right: 10px; text-align: center; line-height: 20px; border-bottom: 1px #ccc solid;}.col-328 { position: relative; width: 328px; background-color: #aed6d8;}.col-328 .text { position: absolute; top: 37px; left: 30px; color: #066c7d;}.col-328 .text h4 { font-size: 18px;}.col-328 .text p { font-size: 16px;}.col-328 img { position: absolute; left: 55px; top: 110px;}.col-328 ul { position: absolute; height: 12px; width: 60px; bottom: 10px; left: 50%; margin-left: -30px;}.col-328 ul li { float: left; width: 10px; height: 10px; margin: 1px 5px; background-color: #3e3e3e; border-radius: 5px;}.col-328 ul li:hover { background-color: #fff;}.col-220 { width: 220px; border-right: 1px solid #ccc;}.col-220 a { display: block;}.bd { border-bottom: 1px solid #ccc;}.col-222 { width: 222px;}.col-222 a { display: block;}.box-bd .brand-nav { height: 66px; margin-top: 18px; background-color: #f7f7f7;} 二、list.html+list.css商品页面
list.html
列表页-综合网购首选-正品低价、品质保障、及时送达、轻松购物
- 品优购欢迎您！
- 请登录 免费注册
- 我的订单
- 我的品优购
- 品优购会员
- 企业采购
- 关注品优购
- 客户服务
- 网站导航
品优购
搜索 优惠购首发亿元优惠 9.9元团购 美满99减30 办公用品电脑 通信 我的购物车 8- 品优秒杀
- 即将售罄
- 超值低价
- 女装
- 女鞋
- 男装
- 男鞋
- 母婴童装
- 食品
- 智能数码
- 运动户外
- 更多分类
- Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
- 已售87%
- 剩余29件
- Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
- 已售87%
- 剩余29件
- Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
- 已售87%
- 剩余29件
- Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机
¥6088
¥6988
- 已售87%
- 剩余29件
-
正品保障
正品保障，提供发票
-
极速物流
急速物流，急速送达
-
无忧售后
7天无理由退换货
-
特色服务
私人定制家电套餐
-
帮助中心
您的购物指南
- 关于我们
- 联系我们
- 联系客服
- 商家入驻
- 营销中心
- 手机品优购
- 友情链接
- 销售联盟
- 品优购社区
- 品优购公益
- English Site
- Contact U
京ICP备08001421号京公网安备110108007702
list.css
.miaosha { position: absolute; left: 183px; bottom: 32px; height: 30px; padding-left: 12px; border-left: 1px solid #b1191a;}.sk { height: 45px; line-height: 45px;}.sk-list li { float: left; font-size: 16px; font-weight: bold;}.sk-list li a { padding: 0 32px; font-size: 14px;}.sk-con li a { float: left; padding: 0 26px;}.sk-con li:last-child a::after { content: '\e65c'; font-family: 'iconfont';}.sk_hd { height: 120px;}.sk_bd { margin-top: 24px;}.sk_bd a { float: left; display: block; width: 288px; height: 456px; margin-right: 12px; border: 1px solid transparent;}.sk_bd a:hover { border: 1px solid #b1191a;}.sk_bd .text_phone { padding: 2px 12px; height: 110px; margin: 4px 0;}.container_name { font-size: 14px; line-height: 20px; margin-bottom: 12px;}.sk_bd .text_phone h4 { display: inline-block; font-size: 22px;}.sk_bd .text_phone .oldprice { text-decoration: line-through; font-size: 14px; margin-left: 5px; color: #ccc;}.sale li { float: left; padding: -1px 5px;}.bar { width: 132px; height: 12px; margin-top: 4px; border-radius: 6px; background-color: #fff; border: 1px solid #ed282e; padding: 2px;}.bar-in { width: 116px; height: 100%; background-color: #ed282e; border-radius: 6px; /* 此处加transition是为了复习之前的过渡知识点 */ transition: width 1s;}.bar-in:hover { width: 100%;}.sk_bd .purchase { height: 48px; width: 100%; font-size: 20px; text-align: center; color: #fff; line-height: 48px; background-color: #b1191a;} 三、register.html+register.css（注册页面）
register.html
注册页面注册新用户 我有账号，去登录
- 手机号：手机号码格式不正确，请重新输入
- 短信验证码：保存成功
- 登录密码：密码少于6位数，请从新输入
- 安全程度 弱中强
- 确认密码：密码不一致，请重新输入
- 同意协议并注册 《知果果用户协议》
- 关于我们
- 联系我们
- 联系客服
- 商家入驻
- 营销中心
- 手机品优购
- 友情链接
- 销售联盟
- 品优购社区
- 品优购公益
- English Site
- Contact U
京ICP备08001421号京公网安备110108007702
register.css
.w { width: 1200px; margin: 0 auto;}a { cursor: pointer;}header { height: 80px; line-height: 80px; border-bottom: 2px solid #b1191a;}.registerarea { height: 520px; border: 1px solid #dfdfdf; margin-top: 18px;}.registerarea h3 { line-height: 40px; font-size: 18px; font-weight: 400; padding: 0 5px; background-color: #ececec; height: 40px; border-bottom: 1px solid #dfdfdf;}.registerarea h3 .login { float: right; font-size: 14px;}.register-form { width: 600px; margin: 50px auto;}.register-form li { margin-bottom: 18px;}.register-form label { display: inline-block; width: 80px; text-align: right;}.register-form .inp { width: 234px; height: 34px; border: 1px solid #ccc;}.register-form .safe { margin-left: 152px; color: #ccc;}.register-form .safe em { display: inline-block; width: 36px; text-align: center; margin-right: 1px;}.register-form .safe em:nth-child(1) { background-color: #de1111;}.register-form .safe em:nth-child(2) { background-color: #40b83f;}.register-form .safe em:nth-child(3) { background-color: #f79100;}.error { color: #b1191a;}.error::before,.success::before { content: '\e613'; margin-left: 10px; font-family: 'iconfont'; vertical-align: middle; font-size: 20px;}.success { color: green;}.success::before { content: '\e6cc'; font-size: 25px;}.agree { font-size: 12px; margin-left: 80px; margin-top: 40px;}.agree input { vertical-align: middle;}.agree a:hover { color: #93caf0;}.over { width: 200px; height: 32px; background-color: #c81623; color: #ffff; margin-left: 100px; margin-top: 40px;}.mod-coperight { margin: 18px 0; text-align: center;}.link { height: 28px; text-align: center; margin-left: 115px;}.link ul li { float: left; padding: 0 12px; font-size: 12px; border-right: 1px #cccc solid;}.link ul li:last-child { border-right: 0;} 四、公共样式common.css
@font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.woff2?t=1664338114197') format('woff2'), url('../fonts/iconfont.woff?t=1664338114197') format('woff'), url('../fonts/iconfont.ttf?t=1664338114197') format('truetype');}.iconfont { font-family: "iconfont" !important; font-size: normal; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/* 版心 */.w { width: 1200px; margin: 0 auto;}.font-style-red { color: #c40000}/* 导航栏 */.shortcut { height: 30px; line-height: 30px; background-color: #f1f1f1;}.shortcut .w .fl ul li { float: left;}.shortcut .fl { float: left;}.shortcut .fr { float: right;}.shortcut .w .fr ul li { float: left;}.shortcut .w .fr ul li:nth-child(even) { width: 1px; height: 10px; background-color: #666666; margin: 9px 13px;}.arrow-icon::after { content: '\e6b9'; font-family: 'iconfont'; margin-left: 2px;}/* 头部header */.header { position: relative; padding: 27px 0; height: 105px; /* background-color: pink; */}.header .logo { position: absolute; width: 171px; height: 61px;}.logo a { display: block; width: 171px; height: 61px; background: url(../https://blog.csdn.net/qq_53682646/article/details/images/pinyou.com.png) no-repeat; font-size: 0;}.search { position: absolute; left: 347px; width: 537px; height: 35px; border: 2px #b1191a solid;}.search input { float: left; width: 453px; height: 31px; padding-left: 6px;}.search button { float: left; width: 80px; height: 31px; background-color: #b1191a; font-size: 17px; color: #fff;}/* 热词模块 */.hotwords { position: absolute; left: 355px; bottom: 24px;}.hotwords a { margin: 0 10px;}.header .shopcar { position: absolute; right: 63px; width: 140px; height: 36px; background-color: #f7f7f7; border: 2px #dfdfdf solid; line-height: 36px; text-align: center;}.header .shopcar::before { margin-right: 5px; content: '\e600'; font-family: 'iconfont'; color: #b1191a;}.header .shopcar::after { content: '\e646'; font-family: 'iconfont';}.count { position: absolute; top: -5px; left: 105px; height: 15px; padding: 0 4px; line-height: 15px; background-color: #b1191a; color: #fff; border-radius: 7px 7px 7px 0;}/* 导航模块 */.nav { width: 100%; height: 47px; border-bottom: 2px #b1191a solid;}.dropdown { float: left; height: 45px; width: 210px; text-align: center; line-height: 45px; background-color: #b1191a;}.dropdown .dh { width: 100%; height: 100%; font-size: 16px; color: #fff;}.dropdown .dd { width: 100%; height: 465px; background-color: #c81623; border-left: 1px #c81623 solid; margin-top: 2px;}.dropdown .dd li { position: relative; width: 100%; height: 31px; padding-left: 9px; line-height: 31px; text-align: left;}.dropdown .dd li a { color: #fff; font-size: 14px;}.dropdown .dd li::after { position: absolute; right: 10px; content: '\e646'; font-family: 'iconfont'; color: #ffff;}.w .dropdown .dd li:hover { background-color: #fff; color: #c81623;}.w .dropdown .dd li:hover a { color: #c81623;}.navitems { float: left; width: 741px; height: 45px;}.navitems li { float: left;}/* 给a设置高度与padding放大点击范围 */.navitems li a { display: block; height: 45px; padding: 0 25px; font-size: 16px; line-height: 45px;}/* .navitems li .first { margin-left: 15px;} */.footer { height: 417px; background-color: #f5f5f5; margin-top: 38px;}.mod-service { height: 105px; padding-top: 30px; border-bottom: 1px solid #ccc;}.mod-service li { float: left; display: block; width: 240px; height: 50px; padding-left: 33px;}.mod-service li h4 { font-size: 14px;}.mod-service li p { font-size: 12px;}/* 此处设置浮动是为了让文字围绕图片显示 */.mod-service li .fore1,.mod-service li .fore2,.mod-service li .fore3,.mod-service li .fore4,.mod-service li .fore5 { float: left; display: block; width: 50px; height: 50px;}.mod-service li .fore1 { background: url(../images/icons.png) no-repeat -252px -3px;}.mod-service li .fore2 { background: url(../images/icons.png) no-repeat -255px -55px;}.mod-service li .fore3 { background: url(../images/icons.png) no-repeat -257px -106px;}.mod-service li .fore4 { background: url(../images/icons.png) no-repeat -258px -157px;}.mod-service li .fore5 { background: url(../images/icons.png) no-repeat -258px -210px;}.mod-help { height: 188px; border-bottom: 1px #ccc solid; padding-top: 20px; /* padding-left: 50px; */}.mod-help dl { position: relative; float: left; padding: 0 60px;}.mod-help dt { color: #797979; font-size: 16px; margin-bottom: 10px;}.mod-help dd { font-size: 12px;}.mod-help dl:last-child { margin-left: 60px; padding: 0; width: 90px; height: 165px; text-align: center;}.mod-help dl:last-child::after { position: absolute; top: 67px; left: 38px; color: #c40000; font-size: 20px; content: '\e600'; font-family: 'iconfont';}.mod-coperight { margin: 18px 0; text-align: center;}.link { height: 28px; text-align: center; margin-left: 115px;}.link ul li { float: left; padding: 0 12px; font-size: 12px; border-right: 1px #cccc solid;}.link ul li:last-child { border-right: 0;} 五、基础样式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 { /* 去掉默认边框 */ border: 0; outline: none; /* "B8BF53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "B8BF53", sans-serif}body { /* CSS3 抗锯齿形 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "B8BF53", sans-serif; color: #666}.hide,.none { display: none}/* 清除浮动 */.clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0;}.clearfix { *zoom: 1}
下一篇：网络服务器怎么选择?
