品优购 12-1 笔记

准备工作

1.引入ico图标

<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

2.引入格式化,和公共样式文件

3.TDK优化

title,description,keywords

点击链接 用户体验优化
在给ul li a 里面的标签的时候
优化体验:给a高和行高 然后转换display:block
并且给padding左右.这样点击范围大

关于ul li 不选择最后一个的一个小技巧not(:last-child)
除了最后一个li都加上又外边距20px

ul li:not(:last-child){
margin-right:20px
}0

4.中间轮播图

给ul li a img以后用js的时候需要用到,所以需要很多个li里里面a 给照片

4.1右边快报区域

加粗的字给strong
并且用文字省略号三步骤:
给Li用,要给块级元素,不要给a:

white-space :nowwarp;
overflow:hidden
text-overflow:ellipsis

4.2话费模块

这里给精灵图i标签,转inline-block
这样可以用tac来居中,因为只有行内和行内快元素才能tac

5.命名:内容+模块:

5.1BEM命名方式

6.家用电器模块

电梯楼层 以后js会学

给下边框2px solid red.
分为 h3 和右边div ul li a 以后方便js控制
中间的竖线可以放在li里面 但是在a外面包裹着
给line-height:和高度一样就可以
padding给a,这样用户体验高

box-bd里面给tab_content的时候,Box-bd要给高度,不然到时候切换内容的时候会有问题,下面内容会上来,给了高度就不会出现,内容随便切换

.Box_bd>.tab_content>tab_list_items
里面的tab_list_items对应的是上面的Li的内容,以后配合人js使用

hover:想做兄弟间的控制的话 可以用+号

7.注册页面:

ul >li>lable + input + span>i
并且要给lable给宽度,然后转行内快,文字才能右对齐
居中的话最外面的盒子一定要给一个固定的宽度才能margin:auto;
i转行内快,然后可以和span在一行内显示,并且能放图片了
放完图片不居中,添加vertical-align. 然后微调margin