您的位置：首页 > Web前端 > CSS

关于div+css的排版布局

2013-09-11 16:15 387 查看

css

css通常被称为风格样式表(Style Sheet)，是用来进行网页风格设计的。通过设立样式表，可以统一的控制HTML中标签的显示属性，精确地定位网页元素的位置，从而更有效的美化页面外观。CSS实现了网页内容HTML和表现的分离，使得页面布局更加灵活，还可以有效的节省网络带宽，调高用户的体验。

div是一个标签<div>...</div>.通过这对标签可以定义HTML文档中的分区，即可以把HTML文档分割成独立的、不同的部分。<div>...</div>就像一个容器，里面可以放置其它的HTML标签，如：段落、图片、列表、表单等。

css的基本语法结构：
<style type="text/css">
选择器{ 属性：属性值；...}
</style>
其中选择器可以是HTML中的标签，也可以是自己定义的类、ID或者是他们之间的组合，之间用“，”隔开；还有一种特殊的选择器叫后代选择器，外层的标签写在前面，内层的标签写在后面，之间用空格隔开。
标签选择器：body{ border:0px; margin:0px;}//<body>去除边框和外边距。
类选择器：<a class="cls">...</a> .cls{ text-decoration:none;}//该<a>标签中的内容没有下划线。
ID选择器：<a id="aid">...</a> #aid{ font-size:16px;}//该标签中的字体大小为16像素。
组合选择器：ul,li,body{ border:0px; margin:0px;}//<ul><li><body>去除边框和外边距。
后代选择器：p span{ font:宋体;}//中间用空格分隔。
值得注意的是：ID选择器和类选择器的作用相反。ID选择器用于修饰某个指定的页面元素或区块，这样的样式是对应ID标记的HTML元素所独占的；而类选择器是定义某类样式让多个HTML元素共享，这些样式是可以共享和复用的。

如何在HTML中引入CSS:
最常用的方式有两种：
1.链接式：
<link href="style.css" rel="stylesheet" type="text/css" />
2.导入式：
<style type="text/css">
@import "style.css";
</style>
区别：前者是先加载样式表，后加载页面；后者与之相反。

CSS样式的优先级：
基本选择器之间：ID选择器>类选择器>标签选择器
CSS样式之间：在同一个选择器中，两条相同的声明，后一条会覆盖前一条，即页面会显示后面一条声明的结果。

CSS常用的样式属性：
1.文本与字体属性：
文本属性：
color设置文本颜色
line-height设置行高，即行间距。
text-align设置对齐方式。
letter-spacing设置字符间距
text-decoration设置文本修饰，如：underline(下划线) none等
white-space设置如何处理空白，是否换行等，常用取值为nowrap(不换行)
字体属性：
font在一个声明中设置字体的所有样式属性，如：font: bold 12px 宋体;
font-family定义字体类型
font-size定义字体大小
font-weight定义字体的粗细
font-style定义字体的风格

2.背景属性：

background简写属性，作用是将背景的多个分属性设置在一个声明中。
background-color定义元素的背景颜色
background-image把图像设置为背景
background-repeat设置背景的平铺方式。如：no-repeat 不平铺 repeat-x水平平铺等。
background-position设置背景出现的初始位置。如：background-position:20px -100px;

3.列表属性：
list-style简写属性，把所有用于列表的属性设置在一个声明中。
list-style-image将图像设置为列表项标志
list-style-position设置列表中列表项标志的位置 list-style-position:inside;
list-style-type设置列表项标志的类型 list-style-type:none; 或者circle;

4.盒子模型：
CSS中盒子模型包括外边距(margin)、内边距(padding)、边框(border)和元素内容(content)。可以
看做一个嵌有一副照片的相框。
其中：margin位于边框外部，边框外面周围的间隙。即相框和相框之间的间隙。
border就是相框本身占据的空间。
padding就是相框里面的照片和相框之间的间隙。
content则是相片本身所占的空间。
注意：设置四个方向边距的顺序是：上、右、下、左。

5.浮动属性：
语法：float:值；
值有：left、right、none、inherit

6.定位属性：
CSS的定位属性主要包括绝对定位和相对定位，设置绝对定位的元素与文档无关，不占据页面空间，因此它可以覆盖页面上的其它元素。position:absolute;
另外，可以使用z-index属性来控制绝对元素的堆叠次序。z-index:2; 值不能为0，可以为负数
设置为相对定位的元素无论是否进行移动，元素都会占据页面空间，position:relative;

7.其它属性：
a>控制元素显示方式属性：
display:值; 值有：blok(显示块级元素)、inline(默认显示为内联元素)、none(该元素不显示)
b>overflow属性：
处理盒子中的内容溢出，它规定内容溢出盒子时如何处理，如：剪切等。
overflow:值; 值：visible、hidden、scroll、auto
c>cousor属性：
cousor属性用来设置光标的形状，常用的属性值为：pointer，显示为“手形”。
d>超链接属性：
a.link{color:#ff0000;}//未访问时链接颜色
a.visited{color:#00cc00;}//已访问后链接的颜色
a.hover{color:#0000ff;} a.hover{ background: url(..image);}//鼠标移动到链接上的颜色或图标
a.active{color:#ff00ff;}//选定的链接。
注意它们的声明顺序：a.hover必须在a.link、a.visited之后才能生效，a.active必须定义在a.hover之后
才能生效。

div排版页面+css定位：
1.自动居中布局：
<head>
<style type="text/css">

#warp{
width:910px;
margin:0 auto;
background-color:#cccccc;
}
</style>
</head>
<body>
<div id=wrap>自动居中布局</div>
</body>

2.浮动布局：
<head>
<style type="text/css">
.left{
width:300px;
float:left;
}
.right{
width:200px;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左侧部分</div>
<div class="right">右侧部分</div>
</div>
</body>
通常为了使浮动布局结构稳定，会给浮动的div加一个包裹层，即增加一个div (container);包裹层的宽度应大于或等于left和right的宽度之和。

清除浮动Bug修复：
#father{
width:100%;
overflow:hidden;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： DIV CSS

相关文章推荐

新的分享

章节导航