如何用DIV+CSS进行网页样式布局

html-css025

如何用DIV+CSS进行网页样式布局,第1张

一、选择“div标签”命令

打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。

二、输入div标签名称

1、在“ID”列表框中选择“top”

2、单击“新建css规则”按钮准备进行css规则定义

三、新建css规则

在打开的对话框中保持默认设置,单击“确定”按钮进行css规则新建。

四、设置属性

1、在“分类”列表框中选择“方框”选项。

2、在窗口右侧进行css规则定义,其中margin值的设置非常重要,“left”及“right”为auto,则可让div页面水平居中。

3、单击“确定”按钮。

五、创建div按钮

返回“插入div标签”,单对话框,单击“确定”按钮,完成div标签的插入

六、查看创建的div

将鼠标光标定位在div,即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。

<body>

<div style="height:300pxwidth:400pxposition:absolutebackground-image:url(file:///D|/44/images/Water%20lilies.jpg)left: 0top: 0">

<div style="margin-left:50pxmargin-top:100pxposition:absolute"><input type="submit" name="button" id="button" value="提交" /></div>

</div>

</body>

这个是我做的事例代码,希望对你有帮助,定位最主要用到就是这个"position" absolute代表的是绝对位置,还有一个相对位置relative.具体位置的设置就要看margin了,分别有left\right\top\bottom四个位置.自己再调调就好了.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TEST</title>

    <style type="text/css">

        body { font:14px/1.5 "microsoft yahei","\5FAE\8F6F\96C5\9ED1",tahoma,arial }

        ul,li,div {

            margin: 0

            padding: 0

        }

        ul,li { list-style: none }

        li {

            float: left

            margin-left: 5px

            padding: 0 8px

            border: 1px solid #999

            color: #000

            line-height: 24px

        }

        .active {

            color: #fff

            background-color: red

            border-color: red

        }

        .nowd { border: none }

        select {

            float: left

            margin-left: 10px

            height: 26px

        }

        button {

            float: left

            margin-left: 5px

            line-height: 20px

        }

    </style>

</head>

<body>

<div>

  <ul>

    <li>首页</li>

    <li>上一页</li>

    <li class="active">1</li>

    <li>2</li>

    <li>3</li>

    <li class="nowd">...</li>

    <li>4</li>

    <li>下一页</li>

    <li>尾页</li>

  </ul>

</div>

<div>

    <select>

        <option selected>01页</option>

        <option>02页</option>

        <option>03页</option>

    </select>

    <button>跳转</button>

</div>

</body>

</html>

可能在配色方面有所误差,配色的话用抓取颜色工具可以解决