BIV+CSS网页的标准化布局

　　DIV用于搭建网站结构（框架），CSS用于创建网站表现（样式/美化）

　　DIV+CSS模式设计网站的优势：

1、表现和内容分离。　　　　2代码简洁，提高网页浏览速度。　　3、易于维护，改版。　　4、提高搜索引擎对网页索引的效率

　　　　　　大部分标签都有意义，例如a标签创建链接h标签创建标题　　div和span是无意义的标签，但是div和span可以与css，结合起来。应用就非常的广泛。

　　　　　　　　<div id="scissors">使用div组合一块大的代码

　　　　　　　　　　　<p> This is <span class ="paper">crazy</span></p>使用span内联在p标签中

　　　　　　　　</div>　　div结束一个块

·　　　　　　W3C盒子模型：每个HTML模型都可以看做一个区块，类似于装了东西的盒子，所以称为盒子模型。

<!DOCTYPE html>
<html>
　　<head>
　　　　<title>盒子模型</title>
　　　　<style>
　　　　　　#box {
　　　　　　　　　　width: 200px;　　　　　　　　/*盒子宽度为200像素*/
　　　　　　　　　　height: 200px;　　　　　　　　/*盒子高度为200像素*/
　　　　　　　　　　border: 5px solid #ccc;　　　　/*盒子边框各自边宽为5px*/
　　　　　　　　　　padding: 10px;　　　　　　　　/*盒子内填充为10px*/
　　　　　　　　　　margin: 20px;　　　　/*盒子的4个外边距为10px*/
}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="box"> 
　　　　内容区 
　　　　</div>

　　</body>
</html>

　　　　声明盒子的css属性：

　　　　margin：定义外边界与上级元素距离的属性，用1——4来设定元素的边界，每个值都是长度，百分比或者auto。百分比的值是参考上级元素的宽度，允许使用负值。margin-top上边界　　margin-bottom下边界　　margin-left左边界　　margin-right右边界

　　　　padding：用于设置区块的内边距属性，是边框和元素内容之间的间隔距离，与margin属性相反padding-top上补白　　padding-bottom下补白　　padding-right右补白

　　　　　　　　padding-left左补白　　

　　　　border：边框属性用于设置一个元素的边框风格，宽度，颜色

　　　　width：盒子的宽度

　　　　height：盒子的高度

　　　　　　　　和页面布局有关的css属性：

　　　　　　　　position：用于定义一个元素是否absolute（绝对的）、relative（相对的）、static（静态）或者fixed（固定）

　　　　　　　　top：层距离页面顶点纵坐标的距离

　　　　　　　　left：层距离页面顶点横坐标的距离

　　　　　　　　text-align：横向排列，可以使用left（居左对齐）、right（居右对齐）、center（居中对齐）。

　　　　　　　　z-index：决定层的先后顺序和覆盖关系、值高的元素会覆盖值低的元素。、

　　　　　　　　display：是一个显示属性，设定为block值以块状显示，在元素后，添加换行符，即其他元素不能在其后面并列显示。

　　　　　　　　visibility：这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层），可以使用inherit值设置子层继承父层的可见性，如果父层可见，那么子层也可见，当值为visiable，无论父层是否可见，子层都可见。而当值为hideen时。无论父层是否可见。子层都隐藏。

　　　　　　　　overflow：用于设置层内容超出所能容纳的范围的处理方式。

　　　　　　　　float：设置区块漂浮属性，允许网页制作作者将文本环绕，环绕在一个元素的周围，可以使用左漂浮值left和右漂浮值right值；

　　　　　　　　　clear：清楚属性，指定一个元素是否允许有元素漂浮在它的旁边，值left移动元素到左边漂浮的元素下面：

　　　　　　盒子区块的定位：普通流、结对定位、浮动、三种基本定位机制。

　　　　　　如果不专门追定区块位置，默认为都是普通流中定位即从上到下一个接一个的排列。位置元素由HTML决定，如果使用像span和strong等不自动换行元素，就会在同一行中水平布局，可以使用水平填充，外部边距等调整他们的水平边距。

　　　　　　相对定位：通常被看做普通定位的一部分，因为元素的位置相对于它本身普通流中的位置定位并不是布局的常用方式。如果某个区块框在他所在的位置处，设置垂直或水平位置，就可以让这个“相对于”他在普通流的起点位置进行移动。但使用相对位置时，无论是对否移动，元素都占据原来的空间，因此这种移动方式会导致覆盖其他区块。

　　　　　　a：hover {　　　　　　　　　　/*定义a元素的伪选择器，当鼠标移动到链接上时改变样式

　　　　　　　　　position：relative；　　　*设置元素使用相对位置

　　　　　　　　　top：1px；　　　　　　　*鼠标进入时a元素将出现在原位置顶部下面1px的地方

　　　　　　　　　left：1px；　　　　　　　*鼠标进入时a元素将出现在原位置右边1px的位置

　　　　　　　　　　}　　　　　　　　　　　*/

　　　　　　　　本咧是实现将鼠标移动到页面的链接时，链接的元素就会在网页上震动一下，还会相对原位置下移1像素，向右移动1像素。

　　　　　　　　相对定位是相对于自身在普通流中的位置移动。

　　　　　　　　绝对定位：absolute使元素的位置与文档的普通流无关，他的位置是相对于已定位包含的上层元素中上、下、左、右移动。如果没有已定位的上层元素，那么他的位置相对于最初包含的区块，例如body或HTML元素。

　　　　　　　　风场灵活的定位方式不会占据普通流中现有的区框位置空间，网页中浮动的广告，都采用的是绝对定位的机制，因为它可以浮动在其他区块的上面，也可以使用

z-index属性来控制这些区块的堆放次序，z-index的值越大，区块在层中的位置就会越高。

　　　　　　　　绝对定位一般不做布局，配合JavaScript使用完成一些页面特效，登录框的盒子需要用绝对定位完成。

<!DOCTYPE html>
<html>
<head>
　　<title>登录框盒子模型定位</title>
　　<style>
　　　　#login{ ./*定义一个id选择器*/
　　　　　　width: 300px;
　　　　　　height: 200px;
　　　　　　position: absolute;
　　　　　　left: 50%;/*左部盒子开始位置是页面宽度的50%*/
　　　　　　top: 50%/*顶部盒子开始位置是页面高度的50%*/
　　　　　　margin-left:-150px;/*左部开始位置退回盒子宽度的一半*/
　　　　　　margin-top: -100px;/*顶部开始位置在退回盒子高度的一半*/
　　　　　　background: #BABABA;/*设置背景颜色为灰色*/
　　　　　　}
　　</style>
</head>
<body>
　　<div id="login">
　　　　登录框的盒子模型
　　</div>
</body>
</html>

转载于:https://www.cnblogs.com/dream2060/p/10052509.html

BIV+CSS网页的标准化布局相关推荐

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
【HTML＋CSS网页设计与布局从入门到精通】第4章
目录超链接 h1,h2,h3... 图片超链接邮件超链接图像热区超链接图像热区超链接-自己作图图像热区超链接-多热区插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
CSS——网页版心和布局流程
阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对网页进行"排版". "版心&qu ...
html手机电脑自动适应模块,CSS网页响应式布局实现自动适配Pc/Pad/Phone设备
前言现在的设备很多,有PC.iPad.手机.智能手表.智能电视.如果没有响应式布局,那么电脑网页在手机或者ipad上显示,是体验非常差,操作不方便,视觉疲劳的,所以我们开发网页要做好响应式布局. i ...
【HTML＋CSS网页设计与布局从入门到精通】第13章-块元素div和内联元素span格式布局
目录块元素背景,边框,颜色等布局块元素ID选择器另一个例子块元素中的图片盒子模型的演示块级元素中的文本格式块级元素div与内联元素span的对比两个行内元素的margin 两个块级元素 ...
【HTML＋CSS网页设计与布局从入门到精通】第10章-CSS
目录开始新增设置英文字母全部小写字号设置首字母"大"写-大一点显示上划线,下划线text-decoration:underline overline; 缩进text-i ...
DIV+CSS网页设计常用布局代码
单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;wid ...
【HTML＋CSS网页设计与布局从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录初始表格边距.居中.边框单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...
【HTML＋CSS网页设计与布局从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...

BIV+CSS网页的标准化布局

BIV+CSS网页的标准化布局相关推荐

最新文章

热门文章