如何用DIV+CSS布局例子

html-css022

如何用DIV+CSS布局例子,第1张

举例（两列布局）：

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="utf-8">

        <title>练习使用HTML</title>

        <link rel="stylesheet" href="css/index.css" />

    </head>

 

    <body>

        <!-- DIV -->

        <div id="d1">

            <span>DIV</span>

        </div>

        <div id="d2">

            <span>DIV</span>

        </div>

        <div id="d3">

            <span>DIV</span>

        </div>

    </body>

 

</html>

css代码：

css文件：

#d1{

    position: absolute

    width: 100px

    height: 100px

    background-color: red

}

#d2{

    position: absolute

    margin-left: 100px

    width: 500px

    height: 100px

    background-color: blue

}

#d3{

    position: absolute

    margin-top: 100px

    width: 600px

    height: 100px

    background-color: yellow

}

效果：

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。