完成fcc作业2时思路
1.设置导航链接按钮栏时,不能用文档流,要用position:fixed;固定在窗口上方,
其他普通流盒子按上下顺序就用position:relative;后面发现导航栏被普通流盒子挡在了下面,就设置了z-index:999;值越大越在前面
2.图片用响应式有利于屏幕适应,class="img-responsive"
3.利用设置醒目背景色background-color:blue;观察盒子尺寸是否合适
4.开始css样式就要设置margin:0;padding:0;
5.设置行内属性转变块级属性,可以控制长宽等属性display:block;块级属性转变行内块级属性display:inline-block;
6.类里可以同时放好几个class,例:class="class1 class2" 中间加空格
7.注意
a : hover{ }
a : focus{ }
a : active{ }
a : link{ }
a : visied{ }
顺序
8.标题可以直接用class="text-center"直接居中
9.利class="row",class="col-md-6 col-xs-6"设置调整同一行内的图片,图标等元素的位置,一行最多12列,6,6均等
10.用class="well" 可以让页面更立体
11.发现margin:0;按钮之间还有空隙margin:-X;负数可以让消除空隙
12.关于<hr/>样式的设置
13.命名要符合原意,利用注释来分隔各个部分,提高效率<!--内容-----前-----------------------><!--内容-----后----------------------->
14.用<br/>可控制文字排列
15.用<a href="#name">跳到的页内位置不满意,就把<a name=""/>从标题移到了上个盒子的标签尾部,
设置a变成块级元素要进行命名设置链接样式,否则会影响<a name=""/>插入的盒子
16.border-radius可以把正方形头像变成圆形头像
17.分清有些标签字颜色用color,有些用font-color
18.发现设置width:100%;底部右边页面与屏幕有空隙,如果页面不能横向滚动,极有可能你有个设置 position relative 的父容器写死了宽度,
如果页面能横向滚动,白边是滚动出来的,
把body的width设为100%,然后加上overflow:hidden;隐藏溢出
body{ overflow:scroll; overflow-x:hidden; }去掉底部滚动条