怎么用div+css写网页设计，以这个为例

html-css015

怎么用div+css写网页设计，以这个为例,第1张

您好，1、div是个层，css来定义它的样式，比如<div class="mystyle"></div>，在css文件中写个样式：.mystyle{float:leftwidth:100pxheight:200pxmargin-top:10px}，这样就能让这个div按这个样式显示（左浮动，宽100像素，高200像素，上边距10像素，），当然还有好多属性你可以再加。

2、你是下的网站模板吗?静态的话直接可以双击浏览了，动态的话要没编译过的才能改，主要改改数据库的连接（如用户名和密码），模板没错误的话一般可以运用了。

有三种常用方式：1、通过id 例：<style>#test{color:red}</style><div id="test" >test</div>

2、通过类名 例：<style>.test{color:blue}</style><div class="test" >test</div>

3、直接放在div标签里 例：<div style="color:purple" >test</div>

举例（两列布局）：

<!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

}

效果：