书再再接上文，首页模块制作完成后，开始制作商品列表界面，新建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]
一、html规范1.块级元素div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul...特点：总是在新行上开始，高度、行高以及顶和底边距都可控制，不设置宽度，宽度是它的容器的100%，除非设定一个宽度。功能：主要用来搭建网站架构、页面布局、承载内容。2.行内元素span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var...特点：和其他元素都在一行上，高、行高及顶和底边距不可改变，宽度就是它的文字或图片的宽度，不可改变。功能：用于加强内容显示,控制细节，例如：加粗、斜体等。1)块级元素与块级元素平级、内嵌元素与内嵌元素平级 // × span是行内元素，p是块级元素 // √2)块元素可以包含内联元素或某些块元素，但内联元素不能包含块元素，它只能包含其它的内联元素 3)有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素h1、h2、h3、h4、h5、h6、p、dt4)块级元素不能放在标签p里面5)li 标签可以包含 div 标签，因为li 和 div 标签都是装载内容的容器二、CSS规范1.命名空间规范(了解)1.布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。2.状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。3.工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。4.组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。5.钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。2.CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)3.CSS书写规范使用CSS缩写属性，CSS有些属性是可以缩写的，比如padding，margin，font等等，这样精简代码同时又能提高用户的阅读体验。4.去掉小数点前的“0”5.连字符CSS选择器命名规范1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键；浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）；能良好区分JavaScript变量命名（JS变量命名是用“_”）6.字符小写定义的选择器名，属性及属性值的书写皆为小写。在xhtml标准中规定了所有标签、属性和值都小写，CSS书写也应该遵循此约定。7.选择器当一个规则包含多个选择器时，每个选择器独占一行。、+、~、> 选择器的两边各保留一个空格。8.代码注释单行注释：星号与内容之间必须保留一个空格。多行注释星号要一列对齐，星号与内容之间必须保留一个空格。规则声明块内注释使用 // 注释，// 后面加上一个空格，注释独立一行。.foo{ border: 0; // .... }文件注释文件顶部必须包含文件注释，用@name标识文件说明。星号要一列对齐，星号与内容之间必须保留一个空格，标识符冒号与内容之间必须保留一个空格。 /** * @name: 文件名或模块名 * @description: 文件或模块描述 * @author: author-name(mail-name@domain.com) * author-name2(mail-name2@domain.com) * @update: 2015-04-29 00:02 */@description为文件或模块描述。@update为可选项，建议每次改动都更新一下。当该业务项目主要由固定的一个或多个人负责时，需要添加@author标识，一方面是尊重劳动成果，另一方面方便在需要时快速定位责任人。9.不要随意使用IDid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。10.为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。11.CSS命名规范（规则）常用的CSS命名规则：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service注册：regsiter状态：status投票：vote合作伙伴：partnerId的命名:1)页面结构:容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：register搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright
书再接上文，接下来做首页的焦点图，也叫轮播图，不过实现轮播需要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]