<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>盒子模型案例</title> <style> body{ margin:0px; padding:0px; border:1px solid #FF0000; } div{ width:100px; height:50px; border-top:2px #00CC66 dotted; border-right:2px #CC6699 solid; border-bottom:2px #999900 dashed; border-left:2px #CC66CC groove; } </style> </head> <body> <div> 盒子模型案例 </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>float</title> <style> div{ width:200px; height:120px; border:1px #FF0000 solid; } #one{ background-color:#0000FF; text-align:center; float:right; } #two{ background-color:#33FFFF; text-align:left; clear:right; float:right; } #three{ background-color:#CCFF66; text-align:right; } </style> </head> <!-- --> <body> <div id="one"> 第一个div </div> <div id="two"> 第二个div </div> <div id="three"> 第三个div </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>float</title> <style> #content{ width:200px; height:80px; background-color:#FFFFFF; } #image{ float:left; } </style> </head> <!-- --> <body> <div id="content"> <div id="image"> <img src="1.png" /> </div> <div id="text"> 我正在测试代码我正在测试代码我正在测试代码我正在测试代码 </div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>position</title> <style> #one{ width:200px; height:80px; border:1px #009966 solid; background-color:#00CCCC; position: relative; z-index:10; } #two{ width:200px; height:80px; border:1px #009966 solid; background-color:#CC00CC; position:absolute; top:60px; left:40px; z-index:5; } #three{ width:200px; height:80px; border:1px #009966 solid; background-color:#0000FF; position:relative; z-index:1; } </style> </head> <!-- position:标签的定位 值: absolute 绝对定位 标签原有的位置释放,下面的标签上移 偏移时参照的对象为父对象(父标签) relative 相对定位 标签原有的位置不释放 偏移时参照的对象为对象的原有位置 偏移属性: top: left: right: bottom: 层: z-index: 值大着 上层显示 值小着, 下层显示 使用前提: 必须设置position --> <body> <div id="one"> </div> <div id="two"> </div> <div id="three"> </div> </body> </html>
这些代码没有什么难度,把最基本的概念理解了,再多熟练写代码提高代码的书写速度!
CSS(续)--案例
最新推荐文章于 2014-02-18 21:52:03 发布