品优购：主体页，列表页，注册页
目录
main部分
recom推荐部分
新建列表list.html和list.css
创建register.html 和register.css
main部分
focus焦点图通过ul和li框住img，右侧分为三栏
- 第一栏newsflash盒子，首先边框news-hd只写bottom，线条为dotted；然后news-bd包含四个li
- 第二栏先有一个不包含顶部边框的大盒子，通过ul和li并将每个li浮动得到12个呈长方形摆放的小盒子，最后一行一开始会掉下去，通过调整ul的大小为252解决；这样会多一个边框，在lifeservice盒子里设置overflow：hidden，去除该边框。
- 第二栏里文字显示省略号需要三步，先overflow：hidden，whitespace,text-overflow
-
.news-hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #ccc; padding: 0 15px; } .news-hd h5 { float: left; font-size: 14px; font-weight: 400px; } .news-hd .more { position: relative; float: right; } .news-hd .more::after { position: absolute; font-family: 'icomoon'; content: '\e920'; } .news-bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; /* 一行显示 */ text-overflow: ellipsis; /* 省略号 */ } .news-bd { padding: 5px 15px 0; } - 12个小盒子都只包括右边框和下边框
.main {
width: 980px;
height: 455px;
margin-left: 220px;
margin-top: 10px;
}
.focus {
float: left;
width: 721px;
height: 455px;
background-color: purple;
}
.newsflash {
float: right;
width: 250px;
height: 455px;
/* background-color: skyblue; */
}
.news {
height: 165px;
/* background-color: pink; */
border: 1px solid #ccc;
}
.lifeservice {
overflow: hidden;
/* 把ul盒子变大，从250修改252，但是边框也超出了 */
height: 209px;
/* background-color: purple; */
border: 1px solid #ccc;
border-top: 0;
}
.lifeservice ul li {
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
/* 此时出现问题，最后一行掉下去了，解决是把ul变大 */
text-align: center;
}
.lifeservice ul {
width: 252px;
}
.lifeservice ul li i {
display: inline-block;
width: 24px;
height: 28px;
background-color: pink;
margin-top: 12px;
background: url(../images/icons.png) no-repeat -19px -15px;
}
.bargain {
margin-top: 5px;
}
recom推荐部分
一个大盒子包含左边recom-hd和右边recom-bd两个盒子，都为float：left；右边大盒子里通过ul和li插入图片
注意，只有前三个盒子的右侧需要竖线，所以通过nth-child(-n+3)选中前三个
.recom {
height: 163px;
background-color: #ebebeb;
margin-top: 12px;
}
.recom_hd {
float: left;
height: 163px;
width: 205px;
background-color: rgba(0, 0, 0, 0.555);
text-align: center;
padding-top: 30px;
}
.recom_bd {
float: left;
}
.recom_bd ul li {
position: relative;
float: left;
}
.recom_bd ul li img {
/* 写死宽度和高度，防止后台上传图片有大有小 */
width: 248px;
height: 163px;
}
.recom_bd ul li:nth-child(-n+3)::after {
/* n+3从第三个往后选 */
content: '';
position: absolute;
right: 0;
top: 10px;
width: 1px;
height: 145px;
background-color: #ddd;
}
新建列表list.html和list.css
在list首页上，加上seo优化部分，依次添加
注意，html文件里list写在common楼下，把冲突的部分覆盖掉
1）在logo右边增加秒杀模块：
放在一个盒子.sk里，添加盒子左边框，绝对定位，通过left和top确定位置
2）nav栏里分为两块，分别为sk_list和sk_con，都用ul和li的框架；两者都左浮动
3）*经常遇到问题，当字数不同如何分隔合适距离：通过调整ul li a，将其转化为block后给宽和高，指定padding
4）更多分类里的箭头：伪元素after后，content为'\e..'，设置font-family为icomoon；.sk_con ul li:last-child a::after；
这里选的是li而不是a因为a之间是表兄弟不能直接用nthchild选，意思是最后一个li的盒子里的a文字右边放这个小三角
5）具体内容里同样被划分为sk_hd和sk_bd
在sk_bd里遇到问题：
1 盒子放不下：需要选中所有行的最后一个盒子使其右边没有边距：
.sk_bd ul li:nth-child(4n)
2 底部升上来：因为没有给包含这么多手机的大边框一个高度，没给高度因为后续可能会增加手机个数，而所有手机又是浮动的
解决：给浮动元素的父亲添加class为清除浮动
3 选中每个盒子会添加红色边框：但是选中后一方面边框只显示上方和左方的却没有右边和下方的，另一方面鼠标经过盒子时盒子会掉下去一下
解决：li本来就自带边框，且可以通过万能的overflow:hidden，这句话同样可以解决当文字跑到浮动的元素旁边试图文字环绕的情况
.nav {
/* 错误原因：女装那一栏都是浮动，但是宽度大，那么123abc文字只会围绕他们 */
overflow: hidden;
}
.sk {
position: absolute;
left: 190px;
top: 40px;
padding: 3px 0 0 14px;
border-left: 1px solid #c81623;
}
.sk_list {
float: left;
}
.sk_list ul li {
float: left;
}
.sk_list ul li a {
display: block;
line-height: 47px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
}
.sk_con {
float: left;
}
.sk_con ul li {
float: left;
}
.sk_con ul li a {
display: block;
line-height: 47px;
padding: 0 20px;
font-size: 14px;
/* font-weight: 700; */
}
.sk_con ul li:last-child a::after {
/* 这里选的是li而不是a因为a之间是表兄弟不能直接用nthchild选 */
content: '\e91e';
font-family: 'icomoon';
}
.sk_bd ul li {
overflow: hidden;
float: left;
margin-right: 13px;
width: 290px;
height: 460px;
border: 1px solid transparent;
}
/* 第一个问题：一行放不下，选出所有4的倍数去除他的margin */
.sk_bd ul li:nth-child(4n) {
margin-right: 0;
}
/* 第二个问题，底部升上来，因为没有给包含这么多手机的大边框一个高度，而所有手机又是浮动的 */
/* 解决：给浮动元素的父亲加oveflow或者清除浮动 */
.sk_bd ul li:hover {
border: 1px solid #c81623;
/* 本质li就有像素边框，鼠标上去变颜色 */
}
列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
我的购物车
8
-
-
-
-
-
-
-
-
-
创建register.html 和register.css
1）注册页面不需要优化，所以直接在顶部插入图像
2）大盒子里分为两栏，通过浮动在一栏
3）注册核心内容里：一定加一个父盒子，父盒子给个宽度，在里面水平居中显示，在里面通过ul和li显示，每个li包含三块：label（行内元素）input和span；label里文字都是右对齐，在span里放一个i标签，里面放那个✅和❌图片
注意：✅和❌图片与文字如何对齐：给行内块元素添加vertical-align middle
4）安全程度部分，再加一个li里面放三个span，依次添加三个类名，通过padding拓展开span的大小，并增加相应背景颜色；通过调整整个li的margin-left来实现将整个安全程度模块移动到与上面对齐的位置
5）将label转化为inline-block从而实现左边文字“手机号：，短信验证码”等 全部右对齐
6）注意这里对input的text表单调整宽高是对于input设置的，而里面有text类型的还有checkbox类型的因此通过将input里的class设置为inp，防止把checkbox类型的框也带成同样格式；
注意写label for来增加作为checkbox时候点击选择的作用域
注册页
.w {
width: 1200px;
margin: 0 auto;
}
header {
height: 84px;
border-bottom: 2px solid #c81623;
}
.logo {
/* margin-top: 18px 如果又写margin会发生盒子塌陷; */
padding-top: 18px;
}
.registerarea {
height: 522px;
border: 1px solid #ccc;
margin-top: 20px;
}
.registerarea h3 {
/* float: left; */
height: 42px;
border-bottom: 1px solid #ccc;
/* margin-top: 20px; */
background-color: #ccc;
line-height: 42px;
padding: 0 10px;
font-size: 14px;
font-weight: 400;
}
.login {
float: right;
font-size: 12px;
}
.registerarea .login a {
color: #c81623;
}
.reg_form {
width: 600px;
/* background-color: pink; */
margin: 50px auto 0;
/* 上50，左右auto，下0 */
}
.reg_form ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg_form ul li {
margin-bottom: 20px;
}
.reg_form ul li .inp {
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.error {
color: #c81623;
}
.error_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url(../images/error.png) no-repeat;
margin-top: -2px;
/* 如何垂直居中：给行内块元素添加vertical-align middle*/
}
.success {
color: green;
}
.success_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url(../images/success.png) no-repeat;
margin-top: -2px;
/* 如何垂直居中：给行内块元素添加vertical-align middle*/
}
.safe em {
padding: 0 12px;
margin: 0 5px;
/* background-color: pink; */
color: white;
}
.safe {
padding-left: 150px;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
padding-left: 100px;
}
.agree input {
vertical-align: middle;
}
.agree a {
color: blue;
}
.btn {
width: 200px;
height: 34px;
background-color: #c81623;
margin-left: 100px;
color: white;
font-size: 14px;
text-align: center;
margin-top: 20px;
}