前端开发学习笔记第四天

1、CSS把标签分为三类,块级元素、行内元素、行内块级元素,三者之间可以通过设置元素的display属性进行任意转换

2、刚刚做了个百度首页

分析下思路:

首先,用三个DIV把页面分成header、content、footer三部分,设置好高度,宽度不用设置,然后将每个部分的文本内容和图片内容放进各自区域,接着每一行的文本和图片内容放进每一个div中,然后将div的text-align属性设置为center将所有元素居中。然后调整每个div的高度让上下隔离恰当,最后统一设置字体大小。搞定!

3、网页中如果有图片,那么浏览器会再次向服务器发送请求加载图片。

4、背景图片一般会用小图片然后平铺解决性能问题(小图片比大图片容易下载,速度快),小图片要有规律,重复后要看不出来是小图片

5、同一个标签可以同时设置背景颜色和背景图片,背景图片会盖住背景颜色,露出的部分可以看到背景颜色

6、background-position的水平取值和垂直取数字值时必须带单位,纯数字无效。可以取负数让背景图片移除标签。

企业开发中应用场景,一般可用超宽图片用作网站logo或者展示图片,可以设置background-position:center,top来使得超宽图片的中间强调部分始终处于中心位置,而不管浏览器的宽度如何

7、background属性是background-color、background-image、background-repeat、background-attachment、background-position的缩写。以上属性随时可以省略

扫描二维码关注公众号,回复: 1658928 查看本文章

8、可以设置background-attachment的属性值(fixed)来达到背景图片固定在浏览器中的某个位置,这个属性了解即可,在企业开发中用的不多。

9、如果看到网站上的某些图片是多张图片拼接而成的,可能用的就是div的嵌套和背景图片。

10、CSS精灵图的作用,可以减少服务器的请求次数,减轻服务器的压力。

猜你喜欢

转载自blog.csdn.net/weixin_42468293/article/details/80722770