书再再接上文，首页模块制作完成后，开始制作商品列表界面，新建list.html，同样的进行SEO优化，修改TDK。并引入base.css,common.css和新建的list.css。 品优购商城-正品低价、品质保障、配送及时、轻松购物！ 将头部的html布局直接粘贴过来： 品优购欢迎您！ 请登录 免费注册 我的订单 我的品优购 品优购会员 企业采购 关注品优购 客户服务 网站导航 品优购商城 搜索 优惠购首发 亿元优惠 9.9团购 每满99-30 办公用品 电脑 通信 我的购物车 99+ 接下来做nav导航栏模块 品优秒杀 即将售罄 超值低价 女装 女鞋 男装 男鞋 母婴童装 食品 智能数码 运动户外 更多分类 css代码如下：.sk { position: absolute; border-left: 1px solid #c81523; top: 40px; left: 190px; padding-left: 14px; padding-top: 3px; }[scode type="yellow"]这里将list,li左侧浮动[/scode].sk_list { float: left; } .sk_list ul li { float: left; } .sk_list ul li a { display: block; font-size: 16px; font-weight: 700; line-height: 47px; color: #000; padding: 0 30px; }[scode type="yellow"]这里将con右侧浮动[/scode].sk_con { float: right; } .sk_con ul li { float: left; } .sk_con ul li a { display: block; font-size: 14px; line-height: 49px; padding: 0 20px; }[scode type="yellow"]这里用伪元素选择器::after引入符号[/scode].sk_con ul li:last-child a::after { content: "\e91e"; font-family: icomoon; margin-left: 2px; }浏览器效果如下：接下来做商品模块，非常的简单，用ul>li，我拿之前做好的复制粘贴进来即可 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 小米移动电源3 10000mAh USB-C双向快充版 黑色 双向18W快充 / 输入输出双接口 / 可上飞机，安全贴心 99.00元 129元 登陆后抢购 css代码如下：[scode type="yellow"]这里的bd模块设置了溢出隐藏，宽度不够时也可以使元素在一行显示[/scode].sk_bd { width: 1300px; overflow: hidden; }[scode type="yellow"]transition: all .3s使所有的变换效果有0.3秒的过渡效果[/scode].sk_bd ul li { float: left; margin-right: 3px; width: 298px; height: 550px; background-color: #ffffff; border: 1px solid transparent; transition: all .3s; }[scode type="yellow"]translateY(-10px)当鼠标经过元素，使其在y方向向上移动10px[/scode].sk_bd ul li:hover { transform: translateY(-10px); box-shadow: 5px 5px 8px 2px rgba(0, 0, 0, .3); } .sk_bd ul li img { width: 100%; } .review { height: 50px; font-size: 14px; padding: 0 28px; margin-top: 30px; } .appraise { font-size: 12px; color: #b0b0b0; /* margin-top: 20px; */ padding: 0 28px; } .price { color: red; height: 50px; font-size: 20px; padding: 0 28px; margin-top: 20px; } del { margin-left: 10px; font-size: 12px; color: gray; } .sk_bd ul li .btn { width: 120px; height: 32px; display: inline-block; background-color: #c81523; color: white; font-size: 12px; text-align: center; text-decoration: none; position: relative; right: -80px; line-height: 32px; }浏览器效果如下：最后加入footer的布局，直接在index.html中复制粘贴过来。 正品保障 正品保障，提供发票 极速物流 极速物流，极速送达 无忧售后 7天无理由退换货 特色服务 私人定制家电套餐 帮助中心 您的购物指南 购物指南 购物流程 会员介绍 生活旅行/团购 常见问题 大家电 联系客服 配送方式 上门自提 211限时达 配送服务查询 配送费收取标准 海外配送 支付方式 货到付款 在线支付 分期付款 邮局汇款 公司转账 售后服务 售后政策 价格保护 退款说明 返修/退换货 取消订单 特色服务 夺宝岛 DIY装机 延保服务 品优购E卡 品优购通信 帮助中心 品优购客户端 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn 京ICP备08001421号京公网安备110108007702 最后的商品列表页面浏览器效果如下：接下来制作个人注册页面，因为个人注册页面涉及至用户隐私，所以不会做SEO优化，引入相应的icon,base.css和新建的register.css。 个人注册 注册页面用form + ul>li布局，并复制index.html的footer部分copyright模块粘贴过来： 注册用户 已有账号，点击登陆 手机号： 手机号码格式不正确，请重新输入 短信验证码： 短信验证码输入正确 登陆密码： 密码不少于6位数，请重新输入 安全程度 弱 中 强 确认密码： 密码不一致 同意协议并注册《知晓用户协议》 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn 京ICP备08001421号京公网安备110108007702 css布局如下：.w { width: 1200px; margin: 0 auto; } header { height: 84px; border-bottom: 2px solid #c81623; padding-top: 18px; } .registerarea { height: 522px; border: 1px solid #ccc; margin-top: 20px; } .registerarea h3 { background-color: #ececec; border-bottom: 1px solid #ccc; height: 42px; line-height: 42px; font-weight: normal; font-size: 18px; padding: 0 10px; } .registerarea h3 .login { float: right; font-size: 14px; } .registerarea h3 .login a { color: #c81623; } .reg_form { width: 600px; margin: 50px auto 0; } .reg_form ul li { margin-bottom: 20px; }[scode type="yellow"]这里的label转化为inline-block[/scode].reg_form ul li label { display: inline-block; width: 88px; text-align: right; } .reg_form ul li .inp { width: 242px; height: 37px; border: 1px solid #ccc; } .reg_form ul li .error { color: #c81623; }[scode type="yellow"]这里用vertical-align: middle使图标和文字居中对齐[/scode].reg_form ul li .error_icon, .reg_form ul li .success_icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-top: -2px; background: url(../images/error.png) no-repeat; } .reg_form ul li .success_icon { background: url(../images/success.png) no-repeat; } .reg_form ul .safe { padding-left: 165px; } .reg_form ul .safe em { padding: 0 12px; } .reg_form ul .safe .ruo { background: #de1111; } .reg_form ul .safe .zhong { background: #40b84f; } .reg_form ul .safe .qiang { background: #f79100; } .reg_form ul .agree { display: inline-block; margin-top: 10px; padding-left: 120px; } .reg_form ul .agree input { vertical-align: middle; margin-right: 5px; } .reg_form ul .agree a { color: #1ba1e6; }[scode type="yellow"]这里用cursor: pointer使鼠标经过变小手[/scode].reg_form ul .btn { width: 200px; height: 34px; background-color: #c81623; font-size: 14px; color: #fff; margin: 0 0 0 100px; cursor: pointer; } .mod_copyright { text-align: center; margin-top: 20px; } .mod_copyright .links { margin-bottom: 15px; } .links a { margin: 0 3px; } .mod_copyright .copyright { line-height: 20px; }最后浏览器效果如下：关于html的品优购项目就暂时到此结束了，我好累 ::twemoji:tilted::素材下载：[button color="dark" icon="glyphicon glyphicon-save" url="https://pan.baidu.com/s/1AACkTMHBa7yaGQBWwM29gQ" type=""]品优购项目（html+css）【uqnr】[/button]演示地址：[button color="dark" icon="glyphicon glyphicon-send" url="http://pyg.dghome.xyz/" type=""]品优购项目（html+css）[/button]
书再接上文，接下来做首页的焦点图，也叫轮播图，不过实现轮播需要JavaScript来实现。布局如下： 没什么好说的，注意边距及左侧浮动就好，css代码如下：.main { width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .main .focus { float: left; width: 721px; height: 455px; }浏览器效果如下：接下来是快报栏模块，标题用h5标签，整体用ul>li，加粗用strong标签，布局如下： 品优购快报 更多 【特惠】 备战开学季 全民半价购数码 【公告】 品优稳占家电网购六成份额 【特惠】 百元中秋全品类礼券限量领 【公告】 上品优生鲜 享阳澄湖大闸蟹 【特惠】 每日享折扣 品优品质游 css代码如下：.main .newsflash { float: right; width: 250px; height: 455px; } .main .newsflash .news { height: 165px; width: 250px; border: 1px solid #e4e4e4; } .main .newsflash .news_hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #e4e4e4; padding: 0 15px; } .main .newsflash .news_hd h5 { font-size: 14px; float: left; }[scode type="yellow"]这里.more用的伪元素选择器::after，并且用了定位（子绝父相原则），让arrow居中更好看一些。[/scode].main .newsflash .news_hd .more { position: relative; float: right; } .main .newsflash .news_hd .more::after { position: absolute; font-size: 14px; font-family: 'icomoon'; content: '\e920'; } .main .newsflash .news_bd { padding: 5px 15px 0; }[scode type="yellow"]注意这里的小li使用了溢出隐藏，并让溢出的内容显示为省略号。[/scode].main .newsflash .news_bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }浏览器效果如下：接下来是生活服务模块和促销模块，ul>li实现，布局如下： 话费 机票 电影票 游戏 彩票 加油卡 酒店 火车票 众筹 理财 礼品卡 白条 每行最后一个小li的右边框溢出，所以.lifeservice中使用了溢出隐藏，css代码如下：.main .lifeservice { overflow: hidden; height: 209px; width: 250px; border: 1px solid #e4e4e4; border-top: 0px; } .main .lifeservice ul { width: 252px; } .main .lifeservice ul li { position: relative; float: left; width: 63px; height: 71px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center; }[scode type="yellow"]注意这里一般情况下，当a包含有宽度的盒子，a转换为块级元素。[/scode].main .lifeservice ul li a { display: inline-block; width: 63px; height: 71px; }[scode type="yellow"]这里的小图片也是用了简单的定位（子绝父相原则）。[/scode].main .lifeservice ul li img { position: absolute; top: -1px; right: -1px; }[scode type="yellow"]利用小i标签插入精灵图，精灵图依然可以使用JavaScript的for循环实现，但这里仍然手动定位。[/scode].main .lifeservice ul li i { display: inline-block; width: 24px; height: 28px; background: pink; margin-top: 12px; background: url(../images/icons.png) no-repeat -19px -15px; } .main .lifeservice ul li .icon2 { background: url(../images/icons.png) no-repeat -79px -15px; } .main .lifeservice ul li .icon3 { background: url(../images/icons.png) no-repeat -142px -15px; } .main .lifeservice ul li .icon4 { background: url(../images/icons.png) no-repeat -205px -15px; } .main .lifeservice ul li .icon5 { background: url(../images/icons.png) no-repeat -17px -85px; } .main .lifeservice ul li .icon6 { background: url(../images/icons.png) no-repeat -79px -85px; } .main .lifeservice ul li .icon7 { background: url(../images/icons.png) no-repeat -143px -85px; } .main .lifeservice ul li .icon8 { background: url(../images/icons.png) no-repeat -206px -84px; } .main .lifeservice ul li .icon9 { background: url(../images/icons.png) no-repeat -17px -155px; } .main .lifeservice ul li .icon10 { background: url(../images/icons.png) no-repeat -79px -155px; } .main .lifeservice ul li .icon11 { background: url(../images/icons.png) no-repeat -140px -151px; } .main .lifeservice ul li .icon12 { background: url(../images/icons.png) no-repeat -205px -155px; } .main .bargain { margin-top: 5px; }浏览器效果如下：接下来是今日推荐模块，布局如下： 今日推荐 css代码如下：.recom { height: 163px; background: #ebebeb; margin-top: 12px; } .recom_hd { float: left; width: 205px; height: 163px; background: #5c5251; text-align: center; padding-top: 30px; } .recom_hd p { margin-top: 10px; font-size: 20px; color: #fff; } .recom_bd { float: left; } .recom_bd ul { margin-left: 3px; } .recom_bd ul li { position: relative; float: left; } .recom_bd ul li img { width: 248px; height: 163px; }[scode type="yellow"]注意这里用了结构伪类选择器:nth-chil和伪元素选择器::after，利用-n+3来将前三张图片的右侧加上一条分割线，[/scode].recom_bd ul li:nth-child(-n+3)::after { position: absolute; content: ''; right: 0; top: 10px; width: 1px; height: 145px; background: #ddd; }浏览器效果如下：接下来是楼层模块，种类栏ul>li布局如下： 家用电器 热门丨 大家电丨 生活电器丨 厨房电器丨 个护健康丨 应季电器丨 空气/净水丨 新奇特丨 高端电器 这里没什么好说的，两个盒子分别是左侧及右侧浮动，css代码如下：.floor .box_hd { height: 30px; border-bottom: 2px solid #c81623; line-height: 30px; } .floor .box_hd h3 { float: left; font-size: 18px; color: #c81623; font-weight: 400; } .floor .box_hd .tab_list ul { float: right; } .floor .box_hd .tab_list ul li { float: left; } .floor .box_hd .tab_list ul li a { margin: 0 15px; } .floor .w { margin-top: 30px; }浏览器效果如下：接下来是楼层模块主体，布局如下：[scode type="blue"]当鼠标指向不同的类别时，会出现相应种类的界面，后期JavaScript会实现。[/scode] 家用电器 热门丨 大家电丨 生活电器丨 厨房电器丨 个护健康丨 应季电器丨 空气/净水丨 新奇特丨 高端电器 节能补贴 4k电视 空气净化器 IH电饭煲 滚筒洗衣机 电热水器 css代码如下：.tab_list_item { height: 361px; } .tab_list_item>div { height: 361px; float: left; } .col_210 { width: 210px; background: #f9f9f9; text-align: center; } .col_210 ul { margin-left: 12px; } .col_210 ul li { float: left; width: 85px; height: 34px; border-bottom: 1px solid #ccc; text-align: center; line-height: 34px; margin-right: 10px; } .col_329 { width: 329px; } .col_221 { width: 221px; border-right: 1px solid #ccc; } .col_221 { width: 221px; border-right: 1px solid #ccc; } .col_219 { width: 219px; } [scode type="yellow"]注意这里一般情况下，当`a`包含有宽度的盒子，`a`转换为块级元素。[/scode] .bb { display: block; border-bottom: 1px solid #ccc; }最后将楼层模块复制粘贴，进行相应修改，品优购首页布局就完成啦！浏览器效果如下：今天就学到这了，我好累！ ::twemoji:tilted:: [button color="info" icon="glyphicon glyphicon-hand-right" url="https://chouxiang.life/index.php/20200512/177.html" type="" ]品优购项目案例学习day4[/button]
书接上文，接下来做导航栏模块，用ul>li标签布局如下： 全部商品分类 家用电器 手机、数码、通信 电脑、办公 家居、家具、家装、厨具 男装、女装、童装、内衣 个护化妆、清洁用品、宠物 鞋靴、箱包、珠宝、奢侈品 运动户外、钟表 汽车、汽车用品 母婴、玩具乐器 食品、酒类、生鲜、特产 医药保健 图书、音像、电子书 彩票、旅行、充值、票务 理财、众筹、白条、保险 css代码如下：.nav { height: 47px; border-bottom: 2px solid #b1191a; } .nav .dropdown { float: left; width: 210px; height: 45px; background-color: #b1191a; } .nav .navitems { float: left; } .nav .dropdown .dt { width: 100%; height: 100%; font-size: 16px; text-align: center; line-height: 45px; color: #fff; margin-top: 2px; }[scode type="yellow"]注意这里display:none，是为了一会做footer时更方便[/scode].nav .dropdown .dd { /* display: none; */ width: 210px; height: 465px; background: #c81623; } .nav .dropdown .dd ul li { position: relative; height: 31px; font-size: 14px; line-height: 31px; padding-left: 10px; margin-left: 2px; } .nav .dropdown .dd ul li:hover { background: #fff; }[scode type="yellow"]注意这里用伪元素选择器::after，并用定位子绝父相原则（其实用float:right也可以实现）。[/scode].nav .dropdown .dd ul li::after { position: absolute; top: 1px; right: 10px; font-family: 'icomoon'; content: '\e920'; color: #fff; font-size: 14px; } .nav .dropdown .dd ul li a { color: #fff; } .nav .dropdown .dd ul li:hover a { color: #e60012; }浏览器效果如下：紧接着做导航栏项目模块，整体布局如下： 服装城 美妆馆 品牌超市 全球购 闪购 团购 拍卖 有趣 css代码如下：.nav .navitems ul li { float: left; } .nav .navitems ul li a { display: block; height: 45px; line-height: 45px; font-size: 16px; padding: 0 25px; }基本没什么难度和要注意的地方，就是左侧浮动和调整内边距及一些基本属性，浏览器效果如下：接下来将.nav .dropdown .dd的display值写为none，使其隐藏，不影响我们接下来写底端的footer模块，footer模块内分为service、help、copyright三个小模块，先写service模块。 正品保障 正品保障，提供发票 极速物流 极速物流，极速送达 无忧售后 7天无理由退换货 特色服务 私人定制家电套餐 帮助中心 您的购物指南 也没什么好说的，用的ul>li写就可以。css代码如下：.footer { height: 415px; background-color: #f5f5f5; padding-top: 30px; } .mod_service { height: 80px; border-bottom: 1px solid #ccc; } .mod_service ul li { float: left; width: 240px; height: 50px; padding-left: 35px; } .mod_service h5 { float: left; width: 50px; height: 50px; background: url(../images/icons.png) no-repeat -252px -2px; margin-right: 8px; }[scode type="yellow"]这里要注意，icon是用的精灵图，所以logo2-logo5可以用JavaScript的for循环实现，但此处用的是简单的定位精灵图。[/scode].mod_service .logo2 { background: url(../images/icons.png) no-repeat -255px -53px; } .mod_service .logo3 { background: url(../images/icons.png) no-repeat -256px -105px; } .mod_service .logo4 { background: url(../images/icons.png) no-repeat -258px -156px; } .mod_service .logo5 { background: url(../images/icons.png) no-repeat -257px -208px; } .mod_service h5 h4 { font-size: 14px; } .mod_service h5 p { font-size: 12px; }[scode type="yellow"]这里的.service_txt用了相对定位，使文本和图片能够居中对齐，当然，实现方式有很多种。[/scode].service_txt { position: relative; top: 5px; line-height: 20px; }浏览器效果如下：接下来是很简单的help模块，同样是用dl>dt>dd标签，整体布局如下： 购物指南 购物流程 会员介绍 生活旅行/团购 常见问题 大家电 联系客服 配送方式 上门自提 211限时达 配送服务查询 配送费收取标准 海外配送 支付方式 货到付款 在线支付 分期付款 邮局汇款 公司转账 售后服务 售后政策 价格保护 退款说明 返修/退换货 取消订单 特色服务 夺宝岛 DIY装机 延保服务 品优购E卡 品优购通信 帮助中心 品优购客户端 css代码如下：.footer .mod_help { height: 185px; border-bottom: 1px solid #ccc; padding-top: 20px; padding-left: 50px; } .footer .mod_help dl { float: left; width: 200px; }[scode type="yellow"]这里有必要说一下，因为版心的宽度是1200px，,mod_help有50px的左侧内边距，每个dl宽度为200px，从而导致宽度装不下所有的dl，使最后的dl自动换行，所以这里用结构伪类选择器:last-child重新设置最后的dl宽度。[/scode].footer .mod_help dl:last-child { width: 90px; text-align: center; } .footer .mod_help dt { font-size: 16px; margin-bottom: 10px; } .footer .mod_help dd { line-height: 20px; font-size: 12px; } .footer .mod_help img { width: 90px; height: 90px; }浏览器效果如下：最后写底部copyright模块，分为links模块和小copyright模块，整体布局如下： 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn 京ICP备08001421号京公网安备110108007702 没什么可说的，就是使其居中和调整基本的字体及间距属性，css代码如下：.mod_copyright { text-align: center; margin-top: 20px; } .mod_copyright .links { margin-bottom: 15px; } .links a { margin: 0 3px; } .mod_copyright .copyright { line-height: 20px; }整体公共模块浏览器效果如下：到这基本上所有的common.css就完成了，下次就要开始做主体了。今天就学到这了，我累了。 ::twemoji:tilted:: [button color="info" icon="glyphicon glyphicon-hand-right" url="https://chouxiang.life/index.php/20200503/153.html" type="" ]品优购项目案例学习day3[/button]
新项目学习计划！启动！新建项目文件夹，并新建css fonts images js upload文件夹和index.html。针对搜索引擎进行SEO优化，修改TDK。 品优购商城-正品低价、品质保障、配送及时、轻松购物！ 在css文件夹下导入base.css，新建common.css，并引入ico（ico生成）及初始化css和通用css。 base.css代码如下： /* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; border: 0px; 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 } [scode type="yellow"]其中btn int为此次修改。[/scode] button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; border: 0px; outline: none; } 在common.css引入icomoon字体，并将fonts文件夹粘贴至项目根目录下。 @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; }导航栏整体布局： 品优购欢迎您！ 请登录 免费注册 我的订单 我的品优购 品优购会员 企业采购 关注品优购 客户服务 网站导航 css代码如下（写在通用common.css里）： .w { width: 1200px; margin: 0 auto; } .fl { float: left; } .fr { float: right; } .style_red { color: #c81623; } .shortcut { line-height: 31px; height: 31px; background: #f1f1f1; } .shortcut ul li { float: left; }[scode type="yellow"]注意这里用了结构伪类选择器:nth-child选择偶数。[/scode] .shortcut .fr ul li:nth-child(even) { width: 1px; height: 12px; background: #666666; margin: 9px 15px; } [scode type="yellow"]注意这里用了伪元素选择器::after。[/scode] .arrow-icon::after { content: "\e91e"; font-family: 'icomoon'; margin-left: 6px; }浏览器效果如下：头部整体布局： 品优购商城 搜索 优惠购首发 亿元优惠 9.9团购 每满99-30 办公用品 电脑 通信 我的购物车 99+ css代码如下： .header { position: relative; height: 105px; }[scode type="yellow"]logo用定位（子绝父相原则）。[/scode] .header .logo { position: absolute; top: 25px; width: 171px; height: 61px; } .logo a { display: block; width: 171px; height: 61px; background: url(../images/logo.png) no-repeat; font-size: 0px; }[scode type="yellow"]搜索框用定位（子绝父相原则）。[/scode] .header .search { position: absolute; left: 346px; top: 25px; width: 538px; height: 36px; border: 2px solid #b1191a; }[scode type="yellow"]int btn均在header盒子里左侧浮动，盒子宽度足够就不会换行。[/scode] .header .search input { float: left; width: 454px; height: 32px; padding-left: 10px; } .header .search button { float: left; width: 80px; height: 32px; font-size: 16px; background-color: #b1191a; }[scode type="yellow"]热词用定位（子绝父相原则）。[/scode] .header .hotwords { position: absolute; left: 346px; top: 66px; } .header .hotwords a { margin: 0px 10px; }[scode type="yellow"]购物车模块用定位（子绝父相原则）。[/scode] .header .shopcar { position: absolute; right: 60px; top: 25px; width: 140px; height: 35px; border: 1px solid #dfdfdf; background: #f7f7f7; text-align: center; line-height: 35px; }[scode type="yellow"]购物车模块前后均用伪元素选择器::before、::after。[/scode] .header .shopcar::before { font-family: 'icomoon'; content: '\e93a'; margin-right: 5px; color: #b1191a; } .header .shopcar::after { font-family: 'icomoon'; content: '\e920'; margin-left: 10px; } .header .shopcar .count { position: absolute; top: -5px; left: 105px; color: #fff; height: 14px; line-height: 14px; background-color: #e60012; padding: 0 5px; border-radius: 7px 7px 7px 0; }浏览器效果如下：今天就学到这了，我累了。 ::twemoji:tilted:: [button color="info" icon="glyphicon glyphicon-hand-right" url="https://chouxiang.life/index.php/20200501/139.html" type="" ]品优购项目案例学习day2[/button]