小蔡学Web：[13]网页的定位position

2024-11-13 15:50:58

1、打开DW软件，然后新建一个空白网页，然后保存为position.html。

2、在<body>中输入：<div><img src="building.jpg" border="0"></div><div>czb_one</div>表示掉入一张图片和一个写了czb_one的盒子。调试结果如下。

3、我在争犸禀淫<title>中输入合适的样式表，用来美化网页，我们用唯一样式调用ID调用，所以我们用#来写样式，分别取名为，#style_image，#style_word。#style_image{border:1px solid #000000; /* 给图片加框 */float:left;/*左浮动 */}#style_word{color:white;font-size:16px; /*定义字体大小，颜色 */}

4、然后我用id上面的样式，注意这个#样式是唯一的，是如.样式那样可以随意调用。<div id="style_足毂忍珩image"><img src="building.jpg" border="0"></div><div id="style_word">czb_one</div>调试后如下。

5、我们可以从上面可以看到，字体和图片都右浮动了，但是没有达到我们定位的效果，我们接下来要把定位position写到#style_word里面去。#style_word{color:#FF0000;font-size:16px;position:absolute; //定位left:255px;top:200px;}

6、调试代码可以得到如下图片，我们把文字定位到了图片上，这就是web的定位，相当于两个盒子的叠加。