打开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>
可能在配色方面有所误差,配色的话用抓取颜色工具可以解决