1.块元素独占一列 效果： 效果： 效果： 4.一行显示多个块元素 效果： 效果： 效果 效果：
<html> <head> <meta charset="UTF-8"/> <style> #block1{background-color:#00FFFF} #block2{background-color:#7FFFD4} #block3{background-color:#FFFF00} div{ font-size:px; width:100px; height:100px; border:1px solid black; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块2</div> <div id="block3">块3</div> </body> </html>
2.右浮<html> <head> <meta charset="UTF-8"/> <style> #block1{ background-color:#00FFFF; float:right;} #block2{background-color:#7FFFD4;} #block3{background-color:#FFFF00;} div{ font-size:px; width:100px; height:100px; border:1px solid black; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块2</div> <div id="block3">块3</div> </body> </html>
3.左浮<html> <head> <meta charset="UTF-8"/> <style> #block1{ background-color:#00FFFF; float:left;} #block2{background-color:#7FFFD4;} #block3{background-color:#FFFF00;} div{ font-size:px; width:100px; height:100px; border:1px solid black; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块22</div> <div id="block3">块3</div> </body> </html>
注意：此时块2被覆盖，块2和块3内容重叠<html> <head> <meta charset="UTF-8"/> <style> #block1{background-color:#00FFFF;} #block2{background-color:#7FFFD4;} #block3{background-color:#FFFF00;} div{ font-size:px; width:100px; height:100px; border:1px solid black; float:left; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块2</div> <div id="block3">块3</div> </body> </html>
5.指定块的浮动<html> <head> <meta charset="UTF-8"/> <style> #block1{background-color:#00FFFF;float:left;} #block2{background-color:#7FFFD4;float:right;} #block3{background-color:#FFFF00;float:left;} div{ font-size:px; width:100px; height:100px; border:1px solid black; float:left; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块2</div> <div id="block3">块3</div> </body> </html>
5.相对定位<html> <head> <meta charset="UTF-8"/> <style> #block1{background-color:#00FFFF;} #block2{ background-color:#7FFFD4; position:relative; top:20px; left:40px; } div{ font-size:px; width:100px; height:100px; border:1px solid black; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块2</div> </body> </html>
6.绝对定位<html> <head> <meta charset="UTF-8"/> <style> #block1{background-color:#00FFFF;} #block2{ background-color:#7FFFD4; position:absolute; top:80px; left:40px; } div{ font-size:px; width:100px; height:100px; border:1px solid black; } </style> <!--定义各个浮块背景颜色，大小--> </head> <body> <div id="block1">块1</div> <div id="block2">块2</div> </body> </html>
看完记得点个赞！！！谢谢！！！
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
