完成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; }去掉底部滚动条

 

posted @ 2017-12-06 19:13  萹豆  阅读(201)  评论(0编辑  收藏  举报