Dreamweaver教程 FrontPage教程 Flash教程
  • CSS教程
  • javascript教程
    当前位置:教程网 > 网页制作 > CSS教程 > 正文

    简单学习CSS网页布局

    编辑:教程网 来源:网络 时间:2011年07月15日 16:44
    CSS布局方法

    通过上一章的学习,读者了解到了CSS强大的表现控制功能,特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局,CSS将带来全新的布局方法,让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法,并对CSS的“盒模型”作详细阐述。相信读者在深入理解“盒模型”后,布局网页、定位CSS网页元素将更加自如。

    11.1 什么叫“Div+CSS”

    上一章学习了web标准的概念以及XHTML和CSS的基本知识。XHTML主要用div标签进行网页的布局,而控制布局的工具是CSS代码,以使网页符合Web标准。所以很多网页设计师把这种布局方法的网页叫做“Div+CSS”网页。其实这是不太准确的说法,因为Web标准不太被行外人士所熟识,导致“Div+CSS”的概念取代了Web标准。Web标准不仅仅指用div标签布局(有时候也用其他标签布局),其含义非常广,需要代码编写良好的结构,有良好的语义以及可读性等。

    所以“Div+CSS”制作的网页不一定符合Web标准,而符合Web标准的网页不一定完全由div标签布局。

    11.1.1 初识div

    div标签在Web标准的网页中使用非常频繁,那么,相对于其他HTML继承而来的元素,div有什么特别之处呢?答案可能令读者失望,div标签什么特性也没有,一定要说其特性,不过是一种块状元素。正因为div没有任何特性,所以更容易被CSS代码控制样式。

    div标签是双标签,即以<div></div>的形式存在,其间可以放置任何内容,包括其他的div标签。也就是说,div标签是一个没有任何特性的容器而已。在D:\web\目录下创建网页文件(XHTML1.0),命名为div.htm,编写div.htm文件代码如代码11.1所示。

    代码11.1 默认的div标签:div.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html XMLns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>初识div标签</title>

    </head>

    <body>

    <div>我是第1个div标签中的内容</div>

    <div>我是第2个div标签中的内容</div>

    <div>我是第3个div标签中的内容</div>

    </body>

    </html>

    在浏览器地址栏输入http://localhost/div.htm,浏览效果如图11.1所示。没有CSS的帮助下,div标签没有任何特别之处,只是无论怎么调整浏览器窗口,每个div标签占据一行。即默认情况下,一行只能容纳一个div标签。为了再次证明一行只能容纳一个div标签,笔者对div通过id选择符加入CSS代码,使div拥有背景色以及宽度,修改div.htm如代码11.2所示。

    代码11.2 设置背景的div标签:div.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>初识div标签</title>

    <style type="text/css">

    #top,#bt{background-color:#eee;

    }

    #mid{background-color:#999;

    width:250px;

    }

    #bt{width:120px;}

    </style>

    </head>

    <body>

    <div id="top">第1个div标签中的内容</div>

    <div id="mid">第2个div标签中的内容</div>

    <div id="bt">第3个div标签中的内容</div>

  • 原文来自 教程网-免费ps教程,cad教程,ppt教程,ppt教程,java教程,vb教程,php教程技术在线学习课程网 转载请注明:http://www.websmill.com/wangye/css/10589.html

  • 上一篇:CSS网页布局的核心内容:CSS盒模型
  • 下一篇:有序列表和段落设计华丽的网页列表数字