前端学习笔记（一）

超大背景图片的自适应

1.首先需要在父布局中添加高度

html body{
    height：100%
}

2.我们在其中设置 css

body{
     background:url(xxx.png) center center;
     background-size:cover;
} 

3.解释
第一个center是图片水平居中，第二center是图片垂直居中
cover使整张图片的大小正好覆盖整个body的位置。
其中css中有继承机制，当html设置为100%时，body如果没有进行再次设置，就默认继承父布局的值。

布局内容所有居中

只需要在其css中加入

text-align:center;

就能使整个布局进行居中，不仅仅是文字居中，图片等也进行居中，适合一些都是布局全部居中的地方。

使用无衬线字体

无衬线字体相对比较美观，适宜阅读

font-family:sans-serif;

使用这种方法在各种设备中都为为之选择合适的字体。

大标题使用全大写（英文）

此时应该采用css中的大写方式

text-transform：uppercase；

可以节省一部分时间 对于英文不太熟悉的 阅读起来也相对方便。

制作透明按钮

一般我们都是采用对a标签加上边框和圆角，在css中非常好实现，这种透明的按钮在
扁平化中使用比较常见，一般用于有背景图的中的按钮 边框颜色多采用白色。

border：1px solid #fff;
border-radius:20px;

其中边框也可以使用其他的方式实现 比如说阴影啊，会在我后期的笔记中写入
border-radius:20px是给边框添加圆角的像素值。

添加50%的圆角的时候 就是一个圆形。

页面移动化的margin处理

可以添加一些左右相同margin值使得网页在移动页面中也能具有很好的显示效果。

总结

每次写都写6个技巧 还不是轻松美滋滋。