如何给网页划分结构?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:159 发布时间:2020-04-07
摘要:时间: 2019-10-14阅读: 111标签: 网页 1、background-color background 是复合属性。 background-color:背景色。 色值表示法:#ff0000 ,red ,rgb(255,0,0),rgba(255,0,0,.5) 背景色渲染位置:border以内。 学习前

时间: 2019-10-14阅读: 111标签: 网页

1、background-color
background 是复合属性。
background-color:背景色。
色值表示法:#ff0000 ,red ,rgb(255,0,0),rgba(255,0,0,.5)
背景色渲染位置:border以内。

学习前端第一步:划分网页结构,网页的结构的划分应该遵循哪些原则,如何去划分网页的结构呢?

2、background-image
background-image:背景图
url:统一资源定位符,图片的地址
属性值:绝对路径,相对路径。(网址形式)
例:
background-image:url(images/meng.jpg);
背景图渲染位置在border以内。
背景图渲染在背景色之上。

对于一个前端初学者,第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图,你需要根据这张图做出一个符合标准的页面,这里所说的标准,即w3c标准,参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲,网页结构的划分需要遵循几个原则:

3、background-repeat
background-repeat:背景重复
属性值:
repeat:默认值,铺满整个盒子
no-repeat:只出现一次,不重复
repeat-x:只在X轴重复
repeat-y:只在Y轴重复

一、自上而下原则

4、background-attachment
background-attachment:背景是否卷动
属性值:
scroll:默认值,背景图随页面滚动
fixed:背景图固定

因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词,所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。

5、background-position
background-position:背景图在整个大背景中的位置。
第一个参数:背景图相对于整个大背景左顶点的水平方向的偏移量
第二个参数:背景图相对于整个大背景左顶点的垂直方向的偏移量
(正值表示向右、下移动;负值表示向左、上移动)。
①像素表示法:
background-position:100px 150px;
②精灵图
css精灵图技术:css sprite
网页上有很多小的碎图片,每一个图片加载都会发起一次http请求,这些小图片会发起很多http请求,降低网页的加载速度。把很多小碎图片放在一张图片上,只会发起一次http请求,提高网页的加载速度。这种技术就是css精灵图技术。
得到精灵图上的任意一个小图片只需要:①限制盒子的宽高。②通过background-position得到任一位置图片。
③单词表示法
background-postion:X轴 Y轴;
X轴:left right center;
Y轴:top bottom center;
例:
background-position:right bottom;(右下角)
background-position:right center;(水平居右,垂直居中)
应用:
body背景图的居中
background-image:url();
background-position:center top;
background-repeat:no-repeat;
background-color:#000;(不留白,色值由背景图边缘的颜色决定)
通栏大banner
width:100%;
height:500px;(通栏大banner的高一般设置为500px左右)
background-image:url();
background-position:center top;
background-repeat:no-repeat;
background-color:#000;(不留白,色值由背景图边缘的颜色决定)
④百分比表示法
background-position:100% 100%;
百分数和像素的转换:
水平方向:100%:大背景的宽-背景图的宽
垂直方向:100%:大背景的高-背景图的高
background-position:50% 50%;水平、垂直居中

二、从左至右原则

复合写法:
background:red url() no-repeat center top fixed;
background复合写法没有特殊顺序,唯独background-position的两个参数不能颠倒顺序。

在自上而下的同时,同一行的内容是从左至右渲染,所以在划分结构的时候有从左至右的顺序。

…………………………………………………………………………………………………
css3新增属性:
1、background-origin 背景起源
例:
background-origin :content-box; // 内容盒

三、一像素原则

2、background-clip 背景裁切
background-clip:content-box; // 裁掉的是padding区域的背景图,只留下内容盒部分

这个原则对于初学者来说必须坚持,但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确,尤其是横向。试想,如果外面的盒子宽度是1200像素,里面两个盒子一个600像素另一个601像素,加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。

background-image:url();
background-origin :content-box;
background-clip:content-box;
等价写法:
background:url() content-box;

在说完上述三个原则过后有些人就会一味地追求遵循这些原则,比如在划分结构的时候一定要分为上下部分,但是比如下面我截取这个网页的一部分,图片和文字其实是属于一个整体,文字是对图片的说明,所以就不应该分为上下,而应该水平方向划分,每一个图文作为一部分内容,水平分为四部分:

3、background-size 背景尺寸
第一个参数:背景图片的宽度
第二个参数:背景图片的高度
①像素表示法
例:
background-size:300px 500px;
②百分比表示法
例:
background-size:50% 25%;(背景图片宽是盒子宽的一半,背景图片高是盒子高的25%)
③单词表示法
cover:覆盖,尽可能大(背景图片不扭曲变形,同时设置background-repeat:no-repeat,可以一张图片铺满整个盒子不留空白)
background-size:cover;
contain:容纳,显示背景图片的全部内容,背景图片也不会扭曲变形,可能会有空白区域
background-size:contain;

本文由10bet发布于Web前端,转载请注明出处:如何给网页划分结构?

关键词:

上一篇:有关 npm 10bet:login 和publish 的疑惑

下一篇:没有了

最火资讯