HTML+CSS做的商城页面

码农世界 2024-05-28 前端 71 次浏览 0个评论

包括三个静态页面，主页面以及商品页面（目前只写了手机的页面）还有注册页面

一、index.html(主页面)+index.css

index.html

品优购商城-综合网购首选-正品低价、品质保障、及时送达、轻松购物

品优购欢迎您！
请登录免费注册

我的订单
我的品优购
品优购会员
企业采购
关注品优购
客户服务
网站导航

品优购

优惠购首发亿元优惠 9.9元团购美满99减30 办公用品电脑通信我的购物车 8 全部商品分类

家用电器
手机、数码、通信
电脑、办公
家居、家具、家装、厨具
男装、女装、童装、内衣
个户化妆、清洁用品、宠物
鞋靴、箱包、珠宝、奢侈品
运动户外、钟表
汽车、汽车用品
母婴、玩具乐器
食品、酒类、生鲜、特产
医药保健
图书、音像、电子书
彩票、旅行、充值、票务
理财、众筹、白条、保险

服装城
美妆馆
传智超市
全球购
闪购
团购
拍卖
有趣

< >

品优购快报更多

[特惠]
备战开学季全民半价购数码
[公告]
品优稳占家电网购六成份额 99
[特惠]
百元中秋全品类礼券限量领
[公告]
上品优生鲜享阳澄湖大闸蟹
[特惠]
每日享折扣品优品质游

话费机票 电影票 游戏彩票 加油站 酒店 火车票 众筹理财 礼品卡 白条

家用电器

热门|
大家电|
生活电器|
厨房电器|
个护健康|
应季电器|
空气/净水|
新奇特|
高端电器

节能补贴
4K电视
空气净化器
IH电饭煲
滚筒洗衣机
电热水器

烧水壶智能光控泡茶壶茶具套装

满299.00减40.00

正品保障

正品保障，提供发票
极速物流

急速物流，急速送达
无忧售后

7天无理由退换货
特色服务

私人定制家电套餐
帮助中心

您的购物指南

购物指南: 购物流程; 会员介绍; 生活旅行/团购; 常见问题; 大家电; 联系客服

配送方式: 上门自提; 211限时达; 配送服务查询; 配送费收取标准; 海外配送

支付方式: 货到付款; 在线支付; 分期付款; 邮局汇款; 公司转账

售后服务: 售后政策; 价格保护; 退款说明; 返修/退换货; 取消订单

特色服务: 夺宝岛; DIY装机; 延保服务; 品优购E卡; 品优购通信

帮助中心: 品优购客户端

关于我们
联系我们
联系客服
商家入驻
营销中心
手机品优购
友情链接
销售联盟
品优购社区
品优购公益
English Site
Contact U

index.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>div {
    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天无理由退换货
                    
                    
                        
                        特色服务
                        私人定制家电套餐
                    
                    
                        
                        帮助中心
                        您的购物指南
                    
                
            
            
                
                    
                        购物指南
                    
                    
                        
                            购物流程
                        
                    
                    
                        会员介绍
                    
                    
                        生活旅行/团购
                    
                    
                        常见问题
                    
                    
                         大家电
                    
                    
                        
                            联系客服
                        
                    
                
                
                    
                        配送方式
                    
                    
                        
                            上门自提
                        
                    
                    
                        211限时达
                    
                    
                        配送服务查询
                    
                    
                        配送费收取标准
                    
                    
                         海外配送
                    
                
                
                    
                        支付方式
                    
                    
                        
                            货到付款
                        
                    
                    
                        在线支付
                    
                    
                        分期付款
                    
                    
                        邮局汇款
                    
                    
                         公司转账
                    
                
                
                    
                        售后服务
                    
                    
                        
                            售后政策
                        
                    
                    
                        价格保护
                    
                    
                        退款说明
                    
                    
                        返修/退换货
                    
                    
                        取消订单
                    
                
                
                    
                        特色服务
                    
                    
                        
                            夺宝岛
                        
                    
                    
                        DIY装机
                    
                    
                        延保服务
                    
                    
                        品优购E卡
                    
                    
                         品优购通信
                    
                
                
                    帮助中心
                    
                        
                        品优购客户端
                    
                
            
            
                
                    
                        关于我们
                        联系我们
                        联系客服
                        商家入驻
                        营销中心
                        手机品优购
                        友情链接
                        销售联盟
                         品优购社区
                        品优购公益
                         English Site
                        Contact U
                    
                
                
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn

                    京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
                    
                
                
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn

                    京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(../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;
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}
.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}
.clearfix {
    *zoom: 1
}

转载请注明来自码农世界，本文标题：《HTML+CSS做的商城页面》

码农世界 37815篇文章站点微博

每一天，每一秒，你所做的决定都会改变你的人生！

发表评论取消回复

评论列表（暂无评论，71人围观）参与讨论

码农世界管理员

HTML+CSS做的商城页面

一、index.html(主页面)+index.css

index.html

index.css

二、list.html+list.css商品页面

list.html

list.css

三、register.html+register.css（注册页面）

register.html

register.css

四、公共样式common.css

五、基础样式base.css

发表评论取消回复

还没有评论，来说两句吧...

文章目录

码农世界管理员

HTML+CSS做的商城页面

一、index.html(主页面)+index.css

index.html

品优购

品优购快报 更多

[特惠]

[公告]

[特惠]

[公告]

[特惠]

猜你喜欢

￥116.00

￥99.00

￥245.00

￥238.00

￥649.00

￥649.00

家用电器

烧水壶智能光控泡茶壶茶具套装

正品保障

极速物流

无忧售后

特色服务

帮助中心

index.css

二、list.html+list.css商品页面

list.html

品优购

¥6088

¥6988

¥6088

¥6988

¥6088

¥6988

¥6088

¥6988

正品保障

极速物流

无忧售后

特色服务

帮助中心

list.css

三、register.html+register.css（注册页面）

register.html

注册新用户 我有账号，去登录

register.css

四、公共样式common.css

五、基础样式base.css

Visual Studio 连接 MySQL 数据库 实现数据库的读写（C++）

[工业自动化-1]：PLC架构与工作原理

网络编程（六）TCP并发服务器

Vue3、Element Plus使用v-for循环el-form表单进行校验

Ceph: vdbench 测试ceph存储rbd块设备

linux如何部署前端项目和安装nginx

Windows OpenVPN的安装之服务器自动启动连接

服务器数据恢复—KVM虚拟机被误删除如何恢复虚拟磁盘文件？

发表评论取消回复

还没有评论，来说两句吧...

文章目录

品优购快报更多

注册新用户我有账号，去登录

Visual Studio 连接 MySQL 数据库实现数据库的读写（C++）