准备工作
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
