简单电商品台搭建
- 先粗糙地分成几个大的div,再给每个div细分,一开始就给每个div命好类名
- 为了不让内容平铺满整个页面,把大的div块用container类封装起来,可使div块对齐
.container{
display:block;
max-width:1080px;
margin:0 auto;
}
- 超链接a
- 是内联元素,无法设置height、padding、margin,需变为(inline-)block,变为block之后会独占一行?要调整一个东西的宽度要先设为block?哪些是block?
- 有hover伪元素、text-decoration
- float
- 常用可设为类
- 子元素为float 父元素会坍塌
- float对行内、块状元素的作用
- 清除float的三种方法
- 可给父元素设置line-height使div对齐浮动元素
- before、after伪元素:content:""
- 设置col-x类,学会用百分比设宽度
.col-x{
display:block;
position:relative;
float:left;
}
-
Box-sizing:border-box是包括border算宽度
-
*{background:rgba()}方便在初始布局阶段确认每一个div位置
-
在标签后面不能多一个逗号!
-
outline:位于元素border外围
-
反馈:
- input:focus{ box-shadow:(inset) x y px rgba(0,0,0,.1) }
- button/item:hover{ background/box-shadow }
-
transition设置变化速度:变化的量(默认all) ms
-
布局工具:每一块之间没有空隙,设置padding,不设置背景色;令子元素设置背景色,可实现块之间切割
-
块级元素的默认长(宽)度是父元素的长(宽)度