×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

爱站云官方微信

【本站通知】:推荐站点30元/月 顶部三栏广告80一个月,买一个月送一个月,其他广告位请联系QQ客服☞ 点击这里给我发消息 欢迎加入站长之家官方QQ交流群
高流量 图文广告位出售
无限流量卡免费送
福利看片神器,高清免费无需翻墙
爱站云广告位招租 爱站云广告位招租

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

第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,继续学习下一课,在那里你将学到如何在因特网上发布自己的网站,让全世界都能看到你的网站。


猜你喜欢

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

欢迎 发表评论:


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

ABOUT US

爱站云网络科技有限公司成立于2017年
创始人:Johnny Kun 由95后的小青年创建
目前公司服务于云计算、网站建设、SEO优化等
团队成员平均3年以上从业经验,核心团队正在不断扩展。

Contact information

QQ:2126245521
Phone:15684092120
E-mail:kf@heikw.com
Website:www.heikw.cn

爱站云博客

Copyright © 2016-2018 www.heikw.cn Reserved.备案号:鲁ICP备16035655号

本站采用 Z-BLOG 核心程序 感谢 爱站云 赞助北京云服务器

爱站云安全认证