项目链接：品优购商城-正品低价、品质保障、配送及时、轻松购物！
1.品优购项目整体介绍
项目描述：品优购是一个电商网站，本次完成 PC 端首页、列表页、注册页面、手机详情页的制作
2.开发工具以及技术栈
1. 开发工具
VScode 、Photoshop、主流浏览器（以Chrome浏览器为主）
2. 技术栈
利用 HTML5 + CSS3 手动布局，可以大量使用 H5 新增标签和样式。
采取结构与样式相分离，模块化开发。
3.品优购项目搭建工作
1.需要创建如下文件夹
创建项目文件夹shopping，里面包含如下文件夹
2.创建首页index.html
3.创建CSS初始化样式文件base.css以及CSS公共样式文件common.css并引入
4.制作网站 favicon 图标（借助于第三方转换网站，比特虫：http://www.bitbug.net/）
5.网站TDK三大标签SEO优化
4.品优购首页制作
4.1 快捷导航模块shortcut制作
1.通栏的盒子为shortcut，里面包含版心w，版心内又分为左右两个盒子分别为fl和fr
2.fl里面可使用无序列表ul，其中ul包含两个li，使用左浮动使li在同一行。间隔部分可使用 （空格）也可使用margin或padding
3.fr里面可使用无序列表ul，其中小竖线可使用li+nth-child(even)设置相关样式，也可以使用padding+border。下箭头使用的是字体图标，可使用伪元素::after，也可使用或者
做法一：小竖线使用li（推荐）
做法二：小竖线使用右边框（左右使用padding隔开，上下要隔开又不要边框则用margin,还要设置高度跟行高。注意去掉最后一个li的边框和右内边距），字体图标做法同上即可。
4.2 头部模块header制作
header盒子里面包含4个盒子都在版心w里面，分别是logo标志、search搜索模块、hotwords热词模块、shopcar购物车模块。
1.logo模块（子绝父相定位）：h1标签提权，里面放一个a链接可返回首页，链接里面添加title（提示文本）和文字（网站名称）可方便搜索引擎收录，但文字不需要显示出来，可用font-size：0；也可用text-indent:-9999px; overflow:hidden;
2.search模块（子绝父相定位）：CSS3盒子模型padding和border不会撑大盒子（box-sizing: border-box;），所以input的宽度不需要更改。input跟button属于行内块元素，可一行显示但中间会有缝隙，所以可以设置左浮动消除缝隙使它们能在search边框里面。
3.hotwords热词模块（子绝父相定位）
4.shopcar购物车模块（子绝父相定位）：购物车字体图标和右箭头字体图标可使用伪元素 ::before和 ::after来实现。购买件数用count盒子使用绝对定位来实现，这里设置left买多件往右延伸符合现实，而设置right买多件往左延伸。count行高继承了shopcar的行高，应该改为自己的行高，还要注意设置圆角边框。
4.3 导航模块nav制作
1.nav盒子设置高度并设置下边框，其中nav盒子包括下拉菜单dropdown盒子（左浮动）和导航栏组navitems盒子（左浮动）。根据相关性dropdown里面包含.dt和.dd两个盒子。
2.dropdown里面的dt盒子宽高跟父盒子一样。
3.dropdown里面的dd盒子宽度跟父盒子一样，高度为465px。dd盒子里面包含无需列表ul，每个li又包含多个链接a，当鼠标经过li时，背景颜色会改变且字体颜色也会改变。li最后的右箭头可使用伪元素::after来实现。
其中，当鼠标经过li时，背景颜色会改变且字体颜色也会改变，可以有两种实现方法。
做法一：当鼠标经过li时，li的背景颜色会改变且a的字体颜色也会改变。
做法二：也可以将li里面的a转换成块级元素，当鼠标经过li的时候，改变a的背景颜色跟字体颜色。
4.导航栏组navitems盒子里面包含无需列表ul，每个li又包含链接a。每个小标题之间的边距可以通过给li设置padding值，也可以通过将a转换为块级元素，且设置padding值，这样不仅实现了边距，还可以使a的宽度变大，用户点击效果更好。
4.4底部模块footer制作
1.footer盒子设置高度跟背景颜色，footer里面有一个大的版心w，版心里面包括页面底部服务mod_service盒子、页面底部帮助mod_help盒子、页面底部版权mod_copyright盒子。
2.页面底部服务mod_service盒子设置高度跟下边框，盒子里面包含无序列表ul，每个li用h5来存放图标，这里的图标用精灵图来实现；文本部分用一个service_txt盒子，将图标左浮动从而实现文字环绕图标的效果。
3.页面底部帮助mod_help盒子设置高度跟下边框，盒子里面包含多个自定义列表dl（左浮动），每个dl又包含dt跟多个dd，dd里面添加链接a；最后一个dl（last-child）只有一个dd来存放二维码跟文字，使用text-align: center; 使它们水平居中。
4.页面底部版权mod_copyright盒子里面包含各种链接的links盒子和版权copyright盒子，设置text-align: center使两个盒子水平居中。links盒子里面包含多个链接a，给a设置margin值实现左右边距。copyright盒子设置行高使得界面更好看。
4.5主体模块main制作
1.主体部分是首页专有的，新建一个index.css并引入，用于存放主体部分的样式
2.主体main在版心w里面，main又包含焦点图focus盒子（左浮动）和新闻快报newsflash盒子（右浮动）。新闻快报newsflash又分为新闻模块news、生活服务模块lifeservice、以及减价模块bargain。
3.焦点图focus（左浮动）包含无序列表ul，焦点图包含在li里面，并设置左右箭头（绝对定位）以及下面的圆点（绝对定位）。
4.新闻news分为news_hd和news_bd两个盒子。news_hd设置高度和下边框，里面的h5标题左浮动，链接a右浮动，右箭头使用伪元素实现。news_bd设置单行文本溢出显示省略号。
5.生活服务lifeservice的边框有多种实现方法，下面列举了三种。
做法一：lifeservice盒子只设置左边框，然后每个小li宽度为父盒子的25%，设置右边框跟下边框。
做法二：lifeservice设置左右下边框，每个小li设置右边框跟下边框，改变ul的宽度使得它可以装下4个小li，最后在lifeservice盒子添加overflow:hidden; 将超出的边框隐藏。
做法三：lifeservice可以用表格来实现，相邻单元格间距为0。设置每个单元格的宽度跟高度，并设置边框。最后合并相邻的边框（border-collapse: collapse;）。
本次项目使用了做法一。之后在li或者td里面设置text-align: center; 使得图标跟文字水平居中，图标可以使用精灵图实现。飞机右上角的减字可以使用绝对定位实现，注意给第二个li添加相对定位。
6.减价bargain只有一张图片，并设置上外边距。
其余模块以及其他页面的制作可见链接：品优购商城-正品低价、品质保障、配送及时、轻松购物！
点击免费注册可进入注册页面
点击手机可进入列表页面
点击立即抢购可进入手机详情页
好文阅读
您阅读本篇文章共花了：
发表评论