Div+CSS布局笔记1

9月 2, 2014 |

本html文档的dtd声明。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

编码说明:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

一、加载css样式的四种方式:

1)在html中加载CSS文件
<link href="layout.css" rel="stylesheet" type="text/css" />

2)在html的head中定义css样式
<style>
h2 { color:#f00;}
</style>

3)在html的元素标签内定义:
<p style="font-size:18px;">内部样式</p>

4)在css文件中加载别的css文件
@import url("/css/global.css");

二、CSS的三种选择器:

div {width:200px} /*元素选择器*/
#layout {width:200px} /*ID选择器*/
.classWidth {width:200px} /*class选择器*/

三、div常用属性

div 布局:
margin:border:padding content

div {
height:300px;
width:400px;
background:#ff0000;
margin:auto; /* margin:0px,auto,先上下,后左右*/
}

四、多列布局

1)2列
#slide{float:left; width:120px;}
#main{margin-left:120px;}
2)三列
#left{float:left; width:120px;}
#right{float:right; width:120px;}
#main{margin:0px 120px;}

五、块元素和行内元素的转换:

display:inline  /*行内*/
display:block /*块*/

六、图文混排功能实现:

#slide{float:left;}
#main{margin-left:120px;}

七、margin 属性

margin 25px 50px 75px 100px /*上-右-下-左*/
margin 25px 50px 75px /*上-左右-下*/
margin 25px 50px /*上下-左右*/
margin 25px /*上右下左*/

Posted in: WEB practise | Tags: ,

Comments are closed.