推56论坛

 找回密码
 立即注册(限中文)

QQ登录

只需一步,快速开始

查看: 1211|回复: 0

[Dreamweaver教程] Dreamweaver教程-为什么要用CSS进行网页排版

[复制链接]
发表于 2015-3-4 21:23:25 | 显示全部楼层 |阅读模式
为了让大家明白CSS的作用,以及为什么要用CSS代替HTML表格进行网页排版,Dreamweaver教程-下面通过一个实例向大家讲解。  其中一个页面通过HTML进行格式化,另一个页面通过CSS进行格式化。
HTML格式化实例HTML代码如下所示:
  1. <body>
  2. <h1><font face="Verdana" size="5" color="green">下载吧</font></h1>
  3. <p> <font face="Verdana" size="4" color="blue">下载吧CSS教程</font></p>
  4. <h1><font face="Verdana" size="5" color="green">xiazaiba</font></h1>
  5. <p> <font face="Verdana" size="4" color="blue">xiazaiba all rights reserved.</font></p>
  6. <h1><font face="Verdana" size="5" color="orange">瓦力旗下</font></h1>
  7. <p> <font face="Verdana" size="4" color="blue">广东瓦力网络科技有限公司</font></p>
  8. </body>
复制代码

用单词“orange”替换“瓦力旗下”前的“green”,点击“视图”窗口,文本现在将显示为橙色。从以上实例可见,通过HTML格式化网页不仅繁琐还容易出错。
CSS格式化实例HTML代码如下所示:
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3. <title>下载吧 CSS示范</title>
  4. <style type="text/css">
  5. h1 { font-family: Verdana;
  6.            font-size: 20pt;
  7.            color: green; }
  8. p  { font-family: Verdana;
  9.            font-size: 12pt;
  10.            color: orange; }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>下载吧</h1>
  15. <p>下载吧CSS教程</p>
  16. <h1>xiazaiba</h1>
  17. <p>xiazaiba all rights reserved.</p>
  18. <h1>瓦力旗下</h1>
  19. <p>广东瓦力网络科技有限公司</p>
  20. </body>
复制代码



内容与前一个文档完全相同,只不过是通过CSS格式化的。你可以试着将两处color后面的单词更改为black/red等。
通过两个实例,你明白了为什么要用CSS控制页面效果了吗?
学建站、学推广、学赚钱,上56站长论坛就够了!个性签名请到个人资料里面修改……

本版积分规则

站长QQ
在线咨询
咨询热线
QQ:405327411
站长

QQ|关于我们|联系我们|免责声明|网站导航|站长论坛 ( 豫ICP备11018337号-5

王宝臣旗下网站 推56论坛(www.tui56.com)站长论坛 SEO论坛 网络营销论坛 新手站长论坛 网络推广论坛 站长社区 站长网

Powered by Discuz! X3.4 Licensed

©2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表