推56论坛

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

QQ登录

只需一步,快速开始

    查看: 740|回复: 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站长论坛就够了!个性签名请到个人资料里面修改……

    本版积分规则

    关闭

    推56站长论坛推荐上一条 /3 下一条

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

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

    王宝臣旗下网站 推56论坛(www.tui56.com|ask.tui56.com|blog.tui56.com|daohang.tui56.com)

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

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