好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云资源网 技术教程 正文

第12课:页面布局(CSS)

梦哥 2019-03-17 技术教程 0 评论

第12课:页面布局(CSS)

如果能为页面实现理想的布局,岂不妙哉?

是啊,但如何实现呢?

你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。

CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网页的表现形式(布局)。

正如第7课所讲, 可以用style属性将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作更深的讨论,我们的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作简要的介绍。以后,你可以从我们提供的CSS教程中学到更多CSS知识。

现在,让我们先把精力集中于HTML,继续学习下一课,在那里你将学到如何在因特网上发布自己的网站,让全世界都能看到你的网站。

< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:207385345  官方QQ群:333914614


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群
爱站云安全认证