顺序:
先做上下排版
再做左右排版
由外往里
规划:
元素命名:
id选择器划分外围结构 -->id选用驼峰命名法||语义化 nav news case 等
版心的命名 -->连字符命名法 例:news-wrrap
内部内容块的命名 --> 下划线 例: news_left
外部CSS样式表:
1、每一个页面对应一个样式表;
2、每个网站都有公共样式表public.css;---->当前网站里面公共区域的样式(如头部、导航栏、底部、等有可能每个页面都有的,可以重复利用,便于维护)
3、重置样式表:reset.css 清楚所有默认样式; 重置样式表和公共样式表优先导入
(清除Input聚焦时的蓝色边框---->outline:none;)
如果版心两侧是白色的,就不用规划版块了,可以直接写版心区域;
input输入框会自带间距(通配符清除不掉),可以将表单放到容器中,然后后给input添加浮动解决;
另:盒子的边框是加在盒子外部的,但按钮不是,按钮的边框是属于盒子内部的,给按钮设置宽高时需注意;
注意点
a、logo一般都是h1标签然后img导入;
b、导航nav因为可能牵扯到嵌套,用无序列表来写;
c、版块一般不写高度,可以用版心撑开
d、需要统一样式的地方,用群组选择器统一设置,单独样式的地方,可以单独处理,避免直接使用类名选择器因为权重问题导致样式失效,可以在public.css中单独写一个类名选择器,定义样式并加@important 升高权重,或者降经常用到的样式操作写到一个自定义,打包使用;