2.css总结(开发前)

2020-07-06  本文已影响0人  半生_温暖纯良_Junzer

1.css总结

1.分区(页面,header,center,footer,bg)设计
1.1初始化样式使用css,后续操作样式使用js
2.相似样式
1.全局样式分标签eg:a li list(div,font,img)title button
2.局部样式分标签eg:a li list(div,font,img)
3.组件
1.组件在项目中的地位
2.组件在当前页面地位
3.组件与上下组件联系
4.组件与子组件关系

<div class="title">
    <ul class="left">
      <li>医院动态</li>
      <li>院务公开</li>
      <li>媒体报道</li>
      <li>通知信息</li>
    </ul>
    <div class="right">
      <span>查看更多</span>
      <i class="iconfont"></i>
    </div>
</div>

2.先构思,画草图,div分区,从底(background)向上
3.先总体设计,细节设计放在后面
4.隐藏部分标签,方便取值
5.根据后端字段设置前端标识符
6.边距放在当前元素之上
7.标签语义化,a,h1,h2,i,input,button,修改display
8.利用空白部分,margin,padding
9.书写顺序,width,height,横-->纵
10.多个元素样式同时改变时,可以给父级添加一个不存在的新类,改变新类的增加与删除

11.谁变化给谁加样式
12.form表单元素盒子包含padding,box-sizing
13.有内容用img--alt,无内容用背景图
14.都用标签包裹span
15.css没有历史记录
16.外层定宽不定高
17.li尽量不写特殊样式(循环不写特殊样式)
18.利用block严肃布局,之后用元素写内容
19.一行列表用ul li,特殊内容重新写样式
20.ul li给li添加样式,少继承,给当前元素添加样式

21.margin、padding给上层元素(上层已写完)
padding代替margin
22.公共样式里少用嵌套

上一篇下一篇

猜你喜欢

热点阅读