我的第一篇博客：仿写豆瓣首页心得收获

一、自己写时候的一些坑

下面分析hover的作用方法：

1、改变本身样式
#buttonOnMap:hover {
background-color: rgba(43, 143, 243, 0.63);
}

2、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {…}这种方式定义CSS样式来控制

   #mapDiv:hover #buttonOnMap{
        background-color: rgba(43, 143, 243, 0.63);
    }

3、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{…}来控制#b里面的元素样式；

    #buttonFlag:hover + #buttonOnMap{
        background-color: rgba(43, 143, 243, 0.63);
    }

关于缩小网站后有些部分会出现移位

尽量都使用 left：em
1.使用em比例
2.尽量都使用left不要用right,用right就会移位了，因为以右为基准

li.active>*
使li下的所有元素都加上了样式

正确符号 使用了：

content：’\2714\FE0Ez’
utf-8转码

分区域不同颜色

.section{}
.section:nth-child(2n)

渐变色

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

background-image: linear-gradient(to bottom,transparent 0%,transparent 50%,rgba(0,0,0,0.2) 100%);

rgba(0,0,0,a) b% 黑色透明,a越大越黑,b越大越浅

三栏左右，设浮动，一定要写在中间主区域的前面

是HTML里一定要写在前面，CSS里前后无所谓

单行文本省略显示小点

white-space: nowrap; ：空白区域不换行
text-overflow: ellipsis;
overflow: hidden;

！！血的教训：

不能一开始就设置body的高度，然后正文又去用高度%
body的高度最后是要删掉的
删掉就崩了

很多时候，想用float之前，先考虑一下设inline-block是否可以实现

图片背阴影

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平阴影位置
v-shadow：垂直阴影位置
blur：模糊距离
spread：阴影大小
inset/outset：可选内外侧

a元素里包含img ：解决图片下面的白边

img 设 vertical-align:middle

内容用了定位，就代表区域的高度不再能随着内容高度变化而变化，所以尽量避免使用定位

要使用普遍样式的元素，不要再在前面加#号id选择了

指定类型选择 :

input[type=‘text’]{}
IE6下不兼容
多个选择：
input[type=‘text’],[type=‘password’]{}

问题

1.怎么弹性布局，特别高度设置 : 注意要让内容去撑开高度

2.怎么节省CSS代码量，抽出统一的：编写时一定要有全局观，不要写一个区域就只盯着这个区域，多看看其他区域有没有类似的样式，抽出相似的样式为页面普遍样式

3.图片加了透明遮罩后怎么再a元素还能链接 : 要用a元素包起来全部的，包住透明遮罩

4.怎么实现后台数据刷新

5.怎么日常维护更新

基本写完后的完善：

1. 提很烦的h2和h3样式
2. 解决高度问题 : 一定要让内容去决定高度，不要固定高，用padding去拉大就行
3. 小组的右边栏和同城的右边栏样式可以提一下
4. main区域可以提一下 overflow:hidden
5. 用js根据评分分数显示星星数

JS坑笔记：

1.switch case语句也可以用来进行范围判断
1.一般用法：
switch(x){
case 值1:
…;
break;
default:
…;
}

2.范围用法: 括号里一定要用true
switch(true){
case x<10:
…;
break;
default:
…;
}
不用进行两边的范围判断，满足一个范围就会跳出的

二、看视频的收获

logo h1元素隐藏

设a元素为block
padding-top为原来的高
height为0
再overflow:hidden

搜索框要用form包一下

1.登录窗口用iframe引入，便于其他的页面也要有登录框

2. 看到有上下边距相似的元素，可以用一个相同的div包一下，再重写几次这个div

3.input 有 text-indent 属性，首字母缩进，不过字母多了又会回去

4.密码登录别忘了用input:type password

5.span元素下不允许包含div元素，a元素可以

6. .section:nth-child(2n)

这个元素是父元素的偶数位子元素;
例如此页，如果在section前面加上一个div，就算不加.section都会导致色块不正确

.section:nth-child与.section:nth-of-type
计算数的时候，会把直接按tag元素类型算，所以会算上前面的不加.section的div
但是应用样式时只会加到加了.section的里面

解决：用块元素包起来 div或section

7.zoom： 视觉效果上的缩放

8.ul里文字过长超出

在ul下设
word-break:break-all

9.一点要有大局观，不能只看着一部分区域就埋头写，看到下面有可以共用的样式要提取成公共样式