HTML/CSS 学习笔记（三）

来源：互联网发布：2014新疆网络管制编辑：程序博客网时间：2024/05/21 22:27

CSS布局的漂浮

（1）float
** 两个属性值：文本流向对象的左边和文本流向对象的右边

现在有三个div，正常的排列方式是从上到下，并自动换行。当给第一个div设置了float为left之后，第二个div会漂到第一个的右边，然后第二个的位置空了，第三个就上来补

（2）CSS布局的定位
position：absolute从文档流中拖出（比如某些网页中的广告）。设置了position属性以后，后面的div自动向上补

这里写图片描述

通过设置top，left，right，bottom的值来对这个div进行绝对的定位

<html> <head>  <title>Document</title>  <style type='text/css'>    div{        width:200px;        height:100px;        border:2px solid blue;    }    #div51{        background-color:red;        position:absolute;        top:20px;        left:50px;    }    #div52{        background-color:green;    }    #div53{        background-color:orange;    }  </style> </head> <body>  <div id='div51'>AAAAAA</div>  <div id='div52'>BBBBBB</div>  <div id='div53'>CCCCCC</div> </body></html>

样式效果：

position：relative对象不可层叠，使用left，right，top，bottom等属性在正常文档流中偏移位置。不会将对象从文档流中拖出去

<html> <head>  <title>CSS的定位布局2</title>  <style type='text/css'>    div{        width:200px;        height:100px;        border:2px solid blue;    }    #div61{        background-color:red;        position:relative;        top:80px;        left:120px;    }    #div62{        background-color:green;    }    #div63{        background-color:orange;    }  </style> </head> <body>  <div id='div61'>AAAAAA</div>  <div id='div62'>BBBBBB</div>  <div id='div63'>CCCCCC</div> </body></html>

样式效果：

这里写图片描述

案例：图文混排

图片和文字在一起显示
比如这样的效果：

这里写图片描述

<html> <head>  <title>案例图文混排</title>  <style type='text/css'>    #imgtext11{        width:400;        height:200;        border:2 dashed orange;    }    #img11{        float:left;    }    #text11{        color:green;    }  </style> </head> <body>     <div id='imgtext11'>      <div id='img11'><img src='anli.png' style='width:150;height:200;'/></div>      <div id='text11'>这是.../div>     </div> </body></html>

案例：图像签名

在图片上面显示文字：文字的定位（在图片的上面漂着）

<html> <head>  <title>案例图像签名</title>  <style type='text/css'>    #text21{        position:absolute;        top:80;        left:30;        color:red;    }  </style> </head> <body>  <div id='img21'><img src='anli.png' style='width:150;height:200;'></div>  <div id='text21'>这是...</div> </body></html>

上面两个案例都是跟图文相关的内容，第一个案例使用了漂浮；第二个案例使用过了position。在开发中很常用，要记住。

推荐一个网站w3school，个人感觉很不错

本人是菜鸟一枚，当做学习笔记写博客。谢谢各路大咖驻足审阅

阅读全文

0 0