CSS布局基础(CSS书写顺序 & 导航栏写法 & 案例)
CSS布局基础(CSS书写顺序)
- 布局定位属性
- 自身属性(宽高,边框,内外边距)
- 内部文本属性
- C3等其他属性
导航栏写法
使用 li + a 的方式实现,而不是直接写多个 a 标签
PC端网页开发一般步骤
布局的一般原则是,从大到小,也就是先确认整体布局,再对局部布局进行调整。
清除默认间距
* {
margin: 0;
padding: 0;
}
- 确定主显示区
PC端网页一般会有个中心区域展示内容,有的地方也叫版心。
.main {
width: 960px;
margin: 0 auto;
}
button{
border: 0;
}
- 划分行
分析原型中的行,以及每一行中的列 - 确定列
处于同一行中的列往往需要通过浮动,使其显示在同一行;确定每一列的大小及其位置 - 先确定结构(HTML),大小和位置等其他内容由(CSS)实现
遵循一个大的原则:先结构,后样式;结构中:先行后列