材料/工具：电脑、CSS3、HTML5、HBuilder、浏览器、截图工具
1、双击打开HBuilder编辑工具，新建静态页面position.html，修改title标签内的内容。
2、在<body></body>标签元素内插入一个<div></div>标签，设置其id属性值为pos。
3、利用ID选择器设置div元素宽度和高度都为300px，背景色为#666666，position为absolute。
4、保存代码并预览界面，发现页面展示的正方形边框在左上角。
5、修改top、left、margin和padding，让div元素垂直居中。
6、设置div标签元素border-radius和background渐变属性即可。
<html><head>
<title>...</title>
</head>
<body>
<ul>
<li>332</li>
<li>233234</li>
</ul>
<p>...</p>
</body>
</html>
例如上面的html结构:
<html>元素就是<body>和<head>的父元素（上下级，包含关系）
而<body>又是<ul>和<p>的父元素
<ul>又是两个<li>的父元素。
两个<li>就是兄弟元素（平级）
<body>和<head>也是兄弟元素，依此类推。
相应的， ul 和p是body的子元素， 而 li 呢， 是body的后代元素（后代选择符）。
你在dreamweaver里，套用源格式后，代码自动缩进，你很容易就能看出来的。
css选择一个元素下的2中同级元素，我们首先还是需要获取到这个元素，可以通过给这个元素一个id或者是class来做，选择同级子元素，一般设置的都是相同的css样式，所以，在同级子元素的选取中css是通过一个','来隔开元素名，然后其他的还是一样的书写css样式，请看代码：<html>
<head>
<style>
#div1{
width:600px
height:40px
font-size:13px
}
#div1 p,span{ //通过一个‘,’实现对2个同级子元素的选取
display:block
width:300px
height:30px
text-align:center
margin:0 auto
}
</head>
<body>
<div id='div1'>
<p>我是测试文字</p>
<span>我是测试文字1</span>
</div>
</body>
</html>
