CSS基础布局详解-优快云博客

本文介绍了CSS的基本用法，包括如何定义样式以及如何使用这些样式来布局网页内容。通过实例展示了margin、padding和float等属性的应用。

这几天刚好学到css，了解了一些基础的知识。先贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#container { width:800px; margin: 0px auto; padding: 0px; background-color:#ffffff; border: 1px; border-color: #333; border-style: solid; } #header { height:80px; background-color: #999999; padding: 10px 10px; font-family:楷体; } #sidebar { float:left; width:150px; background:#CCC; padding: 15px 20px 15px 20px; } #main{ padding:15px 10px 15px 210px; font-size:12px; } #bottom{ background:#999; padding-left:20px; clear: both; text-align:center; font-size:12px; } a{ font-size:12px; } body { background-color: #333; margin:0; padding:0; font:Arial, Helvetica, sans-serif; }</style> </head> <body> <div id="container"> <div id="header"> <h1>浙江大学</h1> </div> <div id="sidebar"> <h3>友情链接</h3> <a href="http://www.zju.edu.cn/" mce_href="http://www.zju.edu.cn/">浙江大学</a><br /> <a href="">浙大办公网</a><br /> <a href="">计算机学院</a><br /> <a href="">软件学院</a><br /> <a href="">浙大图书馆</a><br /> <a href="">学术资源网</a><br /> </div> <div id="main"> <dl> <dt>介绍</dt> <dd> 浙江大学是教育部直属、省部共建的普通高等学校，是首批进入国家“211工程”和“985工程”建设的若干所重点大学之一。浙江大学前身求是书院成立于1897年，为中国人自己最早创办的新式高等学府之一。1952年，在全国高等院校调整时，曾被分为多所单科性学校，部分系科并入兄弟高校。1998年，同根同源的浙江大学、杭州大学、浙江农业大学、浙江医科大学合并组建新的浙江大学。经过一百多年的建设与发展，学校已成为一所基础坚实、实力雄厚，特色鲜明，居于国内一流水平，在国际上有较大影响的研究型、综合型大学。现任校长是中国科学院院士、固体力学专家杨卫教授。</dd> <dd> 学校位于中国历史文化名城、世界著名的风景游览胜地──浙江省杭州市。其北依苏沪，东接甬港，南联闽粤，是中国东南沿海长江三角洲地区的重要城市。学校设紫金港、玉泉、西溪、华家池、之江等5个校区，占地面积5.18平方公里，分布于杭州市区不同方位。校园依山傍水，环境幽雅，花木繁茂，碧草如茵，景色宜人，与西湖美景交相辉映，相得益彰，是读书治学的理想园地。 </dd> <dd> 浙江大学在长期的办学过程中，以严谨的求是学风培养了大批优秀人才，以执著的创新精神创造出了丰硕成果，蜚声海内外，曾被英国著名学者李约瑟誉为“东方剑桥 ”。竺可桢、马寅初、卢嘉锡、苏步青、钱三强、王淦昌、贝时璋、陈建功、钱令希、谈家桢、谷超豪、郑晓沧、梁守槃、夏承焘、姜亮夫、李政道、吴健雄、路甬祥、潘云鹤等著名学者都曾在校工作或学习。浙江大学校友中当选为中国科学院院士、中国工程院院士的有160余人，其中在浙大就学者就有90余人。</dd> </dl> </div> <div id="bottom"> copyright@all rights reserved<br /> wangyang@zju.edu.cn </div> </div> </body> </html>

当中定义了css样式，其中在<style type="text/css">以及</style>之间的的为css样式定义，而的作用是在不支持css的浏览器中将代码注释掉。

定义css

其中定义使用了两种方式：#开头的和没有#的。没有#的是已经存在标签，比如本例的body，也可以是其他的如p，a等等。而#是由自己定义的css，这两者的区别是body是class而#header是id。当然还有其他很多的定义方法。

在css定义里的属性有几个需要介绍下：

margin和padding：它们是用来布局的，就是那一块css的上下左右的空间，margin是在padding外面，它是用来定义块与块之间距离的属性，而padding是定义css块内部内容与其边缘的距离的属性
float：表示这一个css是漂浮在其他css之上的，由于css是从上到下的排列的，所以如果要做一个侧边栏，可以使用这种方法（或者直接定义position），如果float属性赋值为left则会漂浮在下一个css的左边，效果可以通过新建一个txt文档，复制代码，然后将后缀改为html然后用浏览器打开的方式查看