div+css布局入门

小涛(烟台)
QQ:274922137
E-mail:ftemail@126.com

Post by 小涛, 2009-5-19, Views:

教程只适合菜鸟看!大家不要笑话我最外面的div用的是position:relative;里面的div用position:absolute;再配合top,left,bottom,right来定位

<!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>div+css布局</title><style type="text/css">* { margin:0; padding:0;}body { font-size: 12px; color: #666666; text-align:center;}a:link { color: #999999; text-decoration: none;}a:visited { text-decoration: none; color: #999999;}a:hover { text-decoration: none; color: #999999;}a:active { text-decoration: none; color: #999999;}</style></head><div style="width:600px; height:500px; margin:10px auto; text-align:left; border:#CCCCCC dashed 1px; position:relative;"> <div style="width:200px; height:200px;border:#CCCCCC dashed 1px; position:absolute; top:10px;; left:10px;"> <div style="height:25px; background-color:#EEEEEE;"> <p style="position:absolute;top:6px; left:10px;">标题一</p> <p style="position:absolute;top:10px; right:10px;"><a href="#">more</a></p> </div> <ul style=" list-style:none;line-height:26px; position:absolute; top:35px; left:10px;"> <li><a href="#">1.法克法克法克法克法克法克法克</a></li> <li><a href="#">2.法克法克法克法克法克法克法克</a></li> <li><a href="#">3.法克法克法克法克法克法克法克</a></li> <li><a href="#">4.法克法克法克法克法克法克法克</a></li> <li><a href="#">5.法克法克法克法克法克法克法克</a></li> <li><a href="#">6.法克法克法克法克法克法克法克</a></li> </ul> </div> <div style="width:200px; height:50px;border:#CCCCCC dashed 1px; position:absolute; top:10px;; left:220px;"><a href="#"><img src="http://www.86years.com/upload/tao/divcss.gif" height="55" width="199" border="0px" /></a></div> <div style="width:200px; height:250px;border:#CCCCCC dashed 1px; position:absolute; top:70px;; left:220px;"></div> <div style="width:150px; height:200px; border:#CCCCCC dashed 1px; position:absolute; top:10px; ; left:437px;"></div> <div style="width:200px; height:269px; border:#CCCCCC dashed 1px; position:absolute; top:222px; ; left:10px;"></div> <div style="width:367px; height:50px; border:#CCCCCC dashed 1px; position:absolute; top:333px; ; left:221px;"></div> <div style="width:150px; height:96px; border:#CCCCCC dashed 1px; position:absolute; top:224px; ; left:437px;"></div> <div style="width:136px; height:98px; border:#CCCCCC dashed 1px; position:absolute; top:394px; ; left:221px;"></div> <div style="width:136px; height:98px; border:#CCCCCC dashed 1px; position:absolute; top:393px; ; left:369px;"></div> <div style="width:73px; height:98px; border:#CCCCCC dashed 1px; position:absolute; top:392px; ; left:515px;"></div></div>

从简单容易理解的地方出发，慢慢的学习。。。。

Tags: div css html 入门

分类:网页优化与编程 | 评论:0 | 引用:0 | 点击这里获取该日志的TrackBack引用地址 | 获取流量

上一篇：长长见识!极度残酷的骗局!
下一篇：ASP数据库防下载代码

或许你还对下面的文章感兴趣

cookies的入门应用 (2009-5-16 4:13:15)
网站Web标准视频教程 (2009-5-14 4:18:8)

Comments

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。