-------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ --------------------
如何果能实现理想的布局，我们都知道杨老师是通过CSS来进行HTML的页面布局的，那么这里就给大家来一篇关于页面布局的文章希望对大家有所帮助。CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网页的表现形式（布局）。你可以采用下面的方法来设置文字的字体类型和大小：
例1：
<p style="font-size:20px;">这里的文字大小为20</p>
<p style="font-family:黑体;">这里的文字字体为黑体</p>
<p style="font-size:20px; font-family:黑体;">这里是文字大小为20、采用黑体的文字</p>
该例在浏览器中将显示如下：
这里的文字大小为20
这里的文字字体为黑体
这里是文字大小为20、采用黑体的文字
在上例中，我们使用了style属性来指定字体类型（font-family）和字体大小（font-size）。在最后一段中，我们同时进行了字体类型与字体大小的设置，请注意用分号将它们隔开。
CSS有一个优越的特性，即它可以对页面布局进行集中管理。也就是说，你不必在每个标签里都使用style属性；相反，你可以只声明一次，浏览器便会按相应的页面布局效果来显示文本：
例2：
<html>
<head>
<title>我的第一个CSS页面</title>
<style type="text/css">
h1 {font-size:30px; font-family:宋体;}
h2 {font-size:15px; font-family:黑体;}
p {font-size:8px; font-family:"隶书";}
</style>
</head>
<body>
<h1>我的第一个CSS页面</h1>
<h2>欢迎参观我的第一个CSS页面</h2>
<p>你可以在这里了解CSS的原理</p>
</body>
</html>
显示示例
在上例中，我们在文档的头部（head）插入了CSS，它将应用于整个页面。要将CSS嵌入文档，你只需通过标签<style type="text/css">告诉浏览器该段为CSS即可。
在例2中，所有一级标题（h1）采用宋体，字体大小为30（象素）；所有二级标题（h2）采用黑体，字体大小为15（象素）；普通段落文字（p）采用隶书，字体大小为8（象素）。
另一种使用CSS的方法，是将CSS代码单独作为一个文档保存。通过把CSS文档独立出来，你就可以同时对多个页面的布局进行集中管理。如果你要对一个大型网站上的大量网页作字体类型或大小的修改，那么这个方法绝对是最佳选择。CSS的作用不仅仅是指定字体类型和大小，它还可以用于许多其它方面，比如设置颜色和背景等。你可以试试下面的例子：
<p style="color:green;"
>绿色的文字</p>
<h1 style="background-color:blue;">兰色背景的标题</h1>
<body style="background-image:url('http://www.html.net/logo.png');">
你可以试一下将这些示例代码插入自己的网页中，你可以采用两种方法：（1）使用style属性；（2）把CSS放在文档的头部（head）。
CSS仅仅用于设置颜色和字体吗？
CSS除了用于设置颜色与字体等布局之外，还可以控制页面设置与表现形式(边距，漂浮，对齐，宽度，高度等）。通过为不同元素设置不同的CSS，你可以令页面布局精密而美观。
例3：
<p style="padding:25px;border:1px solid red;">我爱CSS</p>
该例在浏览器中将显示如下：
我爱CSS
float属性用以定义元素的漂浮方式：靠左还是靠右。下例展示了该属性的用法：
例4：
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
该例在浏览器中将显示如下：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
In the example, one element (the image) floats to the left and the other element (the text) fills the hole.
With the property position, you can place an element exactly where you want it in your page:
例5：
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
显示示例
在该例中，图像被放置在浏览器中位于距底端50象素、距右边界10象素的位置。这里只是一个例子，实际上你可以把它放在你所期望的任何位置上。CSS的学习也是需要一个过程的，我们只有在以后的学习当中不断的累积CSS的经验才能应用到自己的网站上面，让自己的网站变得更加的漂亮，那么就让我们继续的努力，一起加油早日进入黑马训练营，实现自己的编程梦想。
-------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ --------------------
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
