13234036036

网站建设之DIV+CSS标准化布局

2019年09月24日 14:22:27 267

一、DIV+CSS技能及优势

1. DIV+CSS 是什么?

DIV+CSS 是一种目前比较流行的网页布局技能。

DIV 来寄存需求显现的数据(文字,图表..) ;CSS 就是用来指定怎样显现, 然后做到数据和显现相互的作用。

2. DIV+CSS 的优势

表现和内容相分离.

代码简练,提高页面阅读速度.

易于维护和改版.

提高搜索引擎对网页的索引效率.

能够简略的这样了解div+css:

div 是用于寄存内容(文字、图片、元素)的容器。

css 是用于指定放在div中的内容如何显现,包括这些内容的方位和外观。

二、“无含义”的HTML元素div和span

1. HTML仅仅赋予内容的手段,大部分HTML标签都有其含义(例如:标签p创建阶段、h1标签创建标题等等)的;然而div和span标签似乎没有任何内容上的含义,听起来就像一个泡沫做成的锤子一样无用。但实践上,与CSS结合起来后,它们被用得十分广泛。您所需求记住的是span和div是“无含义”的标签;它们的存在纯粹是应用款式,所以当款式表失效时它就没有任何的作用。

2. 它们被用来组合成一大块的HTML代码并赋予必定的信息,大部分用类特点class和标识特点id与元素联系起来。span和div的不同之处在于span是内联的,用在一小块的内联HTML中;而div(division)元素是块级的(简略来说:它等同于其前后有断行),用于组合一大块的代码,为HTML 文档内大块的内容供给结构和背景的元素,能够包括阶段、标题、表格乃至其他部分,这使div便于树立不同集成的类。

3. div的开始标签和结束标签之间的一切内容都是用来构成这个块的,其中所包括元素的特性由div标签的特点来操控,或者是经过运用款式表格式化这个块来进行操控。

三、页面布局的盒子模型

1. 盒子模型的相关特点:

margin(外边距/鸿沟)

border(边框)

padding(内边距/填充 )

[如下列图了解一下各特点作用(特点又分为上、右、下、左四个方向)]

问:页面元素的宽度width、高度height如何核算?

答:元素的实践占位尺度 = 元素尺度 + padding + 边框宽度

比方:元素实践占位高度 = height特点 + 上下padding + 上下边框宽度

2. 盒模型的层次联系

[如下列图(能够经过一个经典的盒模型3D立体结构图来了解)]

[如图中从上往下看,层次联系如下]:

第1层:盒子的边框(border),

第2层:元素的内容(content)、内边距(padding)

第3层:背景图(background-image)

第4层:背景色(background-color)

第5层:盒子的外边距(margin)

从这个层次联系中能够看出,当一起设置背景图和背景色时,背景

图将在背景色的上方显现。

四、声明盒子模型的CSS特点

例如:

1.

2.

3. 盒子模型

4.

13.

14.

15.

16. 内容区

17.

18.

19.

[水平居中和笔直居中]:

1. 水平居中包括两种情况:

块级元素的水平居中:margin:0px auto;

文字内容的水平居中:text-align: center;

2.笔直居中:

常见的单行文字的笔直居中可设置文字所内行的height与

行高款式特点一致,比方:

div{

width: 400px;

height: 400px;

line-height: 400px;/*行高与div高度一致*/

}

五、和页面布局有关的CSS特点

例如:

1. #box { /* 声明ID选择器,名称为box */

2. position:absolute; /* 设置层的定位为肯定定位 */

3. top:30px; /* 层间隔顶点纵向坐标的间隔为30个像素 */

4. left:100px; /* 层间隔左点横向坐标的间隔为100个像素 */

5. width:300px; /* 设置层的宽度为300个像素 */

6. height:150px; /* 设置层的高度为150个像素 */

7. overflow:auto; /* 当内容超出层的范围时显现翻滚条 */

8. z-index:1; /* 设置层的先后顺序为掩盖联系 */

9. visibility:visible; /* 无论父层是否可见,子层都可见 */

10. }

六、盒子区块框的定位

1. 层模型-肯定定位

如果想为元素设置层模型中的肯定定位,需求设置position:absolute(表明肯定定位),这条句子的作用将元素从文档流中拖出来;然后运用left、right、top、bottom特点相对于其最接近的一个具有定位特点的父包括块进行肯定定位。如果不存在这样的包括块,则相对于body元素,即相对于阅读器窗口。

例如下面代码能够完结div元素相对于阅读器窗口向右移动100px,向下移动50px:

1. div{

2. width:200px;

3. height:200px;

4. border:2px red solid;

5. position:absolute;

6. left:100px;

7. top:50px;

8. }

9.

2. 层模型-相对定位

如果想为元素设置层模型中的相对定位,需求设置position:relative(表明相对定位),它经过left、right、top、bottom特点确定元素在正常文档流中的偏移方位。相对定位完结的过程是首先按static(float)方式生成一个元素(而且元素像层一样起浮了起来),然后相对于曾经的方位移动,移动的方向和起伏由left、right、top、bottom特点确定,偏移前的方位保存不动。

例如下面代码完结相对于曾经方位向下移动50px,向右移动100px:

1.#div1{

2. width:200px;

3. height:200px;

4. border:2px red solid;

5. position:relative;

6. left:100px;

7. top:50px;

8. }

9.

什么叫做“偏移前的方位保存不动”呢?

能够做一个实验,在右侧代码编辑器的19行div标签的后边参加一个span标签,在标并在span标签中写入一些文字。

如下代码:

偏移前的方位还保存不动,掩盖不了前面的div没有偏移前的方位

从上面作用图中能够显着的看出,虽然div元素相对于曾经的方位产生了偏移,但是div元素曾经的方位还是保存着,所以后边的span元素是显现在了div元素曾经方位的后边。

3. 层模型-固定定位

fixed:表明固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)自身。由于视图自身是固定的,它不会随阅读器窗口的翻滚条翻滚而改动,除非你在屏幕中移动阅读器窗口的屏幕方位,或改动阅读器窗口的显现大小;因此固定定位的元素会始终坐落阅读器窗口内视图的某个方位,不会受文档活动影响,这与background-attachment:fixed;特点功能相同。

例如下面代码能够完结相对于阅读器视图向右移动100px,向下移动50px;而且拖动翻滚条时方位固定不变:

1. #div1{

2. width:200px;

3. height:200px;

4. border:2px red solid;

5. position:fixed;

6. left:100px;

7. top:50px;

8. }

9.

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

10. ....

11.

七、盒子模型的起浮布局

了解起浮特点首先要搞清楚,什么是文档流?

文档流:阅读器依据元素在html文档中呈现的顺序,

从左向右,从上到下顺次排列

起浮特点是CSS中的定位特点,用法如下:

float: 起浮方向(left、right、none);

left为左起浮、right为右起浮、none是默认值表明不起浮

,设置元素的起浮,该元素将脱离文档流,向左或向右移动

直到它的外边距碰到父元素的边框或另一个起浮元素的边

框停止

起浮示例,没有运用起浮的3个DIV:

HTML结构代码:

第1块div

第2块div

第3块div

CSS款式代码:

#first, #second, #third{

width:100px;

height:50px;

border:1px #333 solid;

margin:5px;

}

款式中参加 float:left;

HTML结构代码:

1.

2.

顶部(header)

3.

4.

商品分类(cat)

5.

内容(content)

6.

右侧(sidebar)

7.

8.

底部(footer)

9.

CSS款式代码:

1. .cat, .sidebar {

2. float:left;

3. width:20%;

4. height:100%;

5. }

6. .content {

7. float:left;

8. width:60%;

9. height:100%;

10. }

上一条 网站建设时间经常遇到的问题有哪些
下一条 沈阳小微型企业应该建什么样的网站

声明:本页内容由大熊网络科技有限公司通过网络收集编辑所得,所有资料仅供用户参考;本站不拥有所有权,也不承认相关法律责任。如您认为本网页中有涉嫌抄写的内容,请及时与我们联系进行举报,并提供相关证据,工作人员会在5个工作日内联系您,一经查实,本站将立刻删除涉嫌侵权内容。如果您对SEO优化核心技术文章感兴趣,请点击查看seo教程网站建设的相关文章,请关注大熊网络营销公司官网(www.sydaxiong.cn)

 

相关资讯 Releva ntnews
服务推荐 Hot sale ltem
解决方案 Solutions
  1. 我们的承诺
  2. 我们的实力
  3. 我们的未来
服务热线

13234036036

http://www.sydaxiong.cn 辽ICP备18004721号

Copyright© 2017 大熊科技有限公司

QQ咨询
官方微信
关注微信
联系电话
13234036036
预约上门