9月 2, 2014 | Nix.Huang

本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: css, div

知行合一，止于至善

Div+CSS布局笔记1