合理使用HTML标签进行CSS布局

来源:网络作者:佚名阅读: 字体:[大中小] [打印] [关闭]

自定义标签 wzsp 未创建

内容提要：CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。什么时候应该用DIV? 虽然在这方面没有什么硬 ……

以下是引用片段：
#info h3{ text-align:center;
}
#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}
#holdit img {position:absolute; z-index:1; top:10px; left:10px; }
#holdit p { margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; font-family:verdana, arial, sans-serif}
#holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden; }
.a230 {width:230px;}
.a240 {width:240px;}
.a250 {width:250px;}
.a270 {width:270px;}
.a300 {width:300px;}
.a340 {width:340px;}
.a360 {width:360px;}
.a370 {width:370px;}
.a400 {width:400px;}
.a420 {width:420px;}
.a430 {width:430px;}
.a460 {width:460px;}
.a490 {width:490px;}
.a500 {width:500px;}
.a540 {width:540px;}
.a550 {width:550px;}

　　接着我们来分析一下红色加亮的部分:

　　首先将包容对象#holdit设置成相对定位(确保等下的img绝对定位以它左上角为原点)

　　接着把#holdit里面的img设成绝对定位且z-index高度为1，这样img就脱离文档流了

　　将em标签设置左浮动，高度和p的ling-height要一样，再根据图片的图案分别设置每个em的宽度(记得要用clear来清除浮动)

　　最后把P设置成相对定位且z-index高度设置大于img的数值

　　其实我们也可以直接将图片作为为#holdit的背景，这样就不需要专门为img来设置CSS了

<STYLE>#info h3{ text-align:center; }#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}#holdit img {position:absolute; z-index:1; top:10px; left:10px; }#holdit p { margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; font-family:verdana, arial, sans-serif}#holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden; }.a230 {width:230px;}.a240 {width:240px;}.a250 {width:250px;}.a270 {width:270px;}.a300 {width:300px;}.a340 {width:340px;}.a360 {width:360px;}.a370 {width:370px;}.a400 {width:400px;}.a420 {width:420px;}.a430 {width:430px;}.a460 {width:460px;}.a490 {width:490px;}.a500 {width:500px;}.a540 {width:540px;}.a550 {width:550px;}</STYLE><div id="info"><h2>TRACKING YOUR IMAGES</h2><div id="holdit"><img src="http://edu.admin5.com/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" /><em class="a42
<CENTER></CENTER></DIV>
<DIV class=author><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></DIV>							<a href="/wangyezhizuo/HTMLCSS/1862.html">上一页</a><a href="/wangyezhizuo/HTMLCSS/1862.html">1</a><a href="/wangyezhizuo/HTMLCSS/1862_1.html" class="current">2</a><a href="/wangyezhizuo/HTMLCSS/1862_2.html">3</a><a href="/wangyezhizuo/HTMLCSS/1862_3.html">4</a><a href="/wangyezhizuo/HTMLCSS/1862_2.html">下一页</a><div style="clear:both;"></div>

<DIV class=clear></DIV><span>[<a>标签:</a> <a href='/plus/search/index.asp?keyword=%E5%90%88%E7%90%86%E4%BD%BF%E7%94%A8HTML%E6%A0%87%E7%AD%BE%E8%BF%9B%E8%A1%8CCSS%E5%B8%83%E5%B1%80'>合理使用HTML标签进行CSS布局</a>, <a href='/plus/search/index.asp?keyword='></a>]</span> <span>[<a href="#" onclick="window.print();">打印</a>]</span> <span>[<a href="#" onclick="window.close();">关闭</a>]</span></DIV>
<DIV class=diggdiv>
<DIV class=diggbox id="digg1862">
<DIV class=diggnum><script language="javascript" src="/plus/digg/js.asp?id=1862&def=0"></script></DIV>
<DIV class=digglink><a href="javascript:Digg('digg',1862);">顶一下</A></DIV></DIV>
<DIV class=prevnext>上一篇：<a href='/wangyezhizuo/HTMLCSS/'>[HTML/CSS]</a><br />下一篇：<a href='/wangyezhizuo/HTMLCSS/WebEditor-wangyezhizuoxinke.html'>WebEditor网页制作新客</a></DIV></DIV>

<DIV class=space></DIV></DIV>
<DIV id=feedback><SPAN class=feednums>站长评论(0)</SPAN> <A 
href="/plus/comment/index.asp?id=1862" 
target=_blank>查看所有评论</A> 
<DIV class=intel></DIV>
<DIV id=gbook><script language="JavaScript" type="text/javascript" src="/plus/comment/js.asp?id=1862"></script></DIV></DIV></DIV>
<DIV class=thead>相关新闻</DIV>
<DIV class="tbody normal">

<DIV class=itembox>
<DIV class=box1><SPAN class=date>09-09-21</SPAN><A 
href="/QQ-resource/QQ-skill-anquan/jiaoninruhexunsudedianliang-Q-batubiao.html " 
target=_blank>教您如何迅速的点亮Q吧图标</A></DIV></DIV>

<DIV class=itembox>
<DIV class=box1><SPAN class=date>09-09-16</SPAN><A 
href="/PHP/freesharehost-tigong-10G-keyibangding-domain-de-free-php-space.html " 
target=_blank>freesharehost提供10G可以绑定域名的免费php空间</A></DIV></DIV>

<DIV class=itembox>
<DIV class=box1><SPAN class=date>09-09-16</SPAN><A 
href="/free-space/other-space/ProHosting-tigong-100M-rongliangkebangmi-free-jingtai-space.html " 
target=_blank>ProHosting提供100M容量可绑米免费静态空间</A></DIV></DIV>

<DIV class=itembox>
<DIV class=box1><SPAN class=date>09-09-07</SPAN><A 
href="/free-movie/chounvwudidisanji.html " 
target=_blank>丑女无敌第三季</A></DIV></DIV>

<DIV class=itembox>
<DIV class=box1><SPAN class=date>09-09-07</SPAN><A 
href="/PHP/v7host-tigong-5G-free-PHP-space-shenqing.html " 
target=_blank>v7host提供5G免费PHP空间申请</A></DIV></DIV>

<DIV class=itembox>
<DIV class=box1><SPAN class=date>09-09-05</SPAN><A 
href="/computer-jishu/XP-system-xunineicunbuzu-yuanyinzongjie.html " 
target=_blank>XP系统“虚拟内存不足”原因总结</A></DIV></DIV>

<DIV class=clear></DIV></DIV></DIV>
<DIV class=rank-list>
<script src=http://busjs.vodone.cn/bus/ownerjs/advjs_45/45237/45237_53741_p7_.js></script>
<DIV class=title-b><script type="text/javascript">
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<script type="text/javascript">
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></DIV>
<DIV class=title-b>
<H3>热门新闻</H3></DIV>
<DIV class=list-b>
<UL class="list eiss date">
  
  <LI>08-12-24 <A href="/zhucema/kabasiji-70-register-ma.html" title="卡巴斯基7.0注册码" 
  target=_blank><font color="#FF0000">卡巴斯基7.0注册码</font></A></LI>
  
  <LI>08-12-21 <A href="/zhucema/2008-mumaqingdaofu-register-ma.html" title="2008木马清道夫注册码" 
  target=_blank>2008木马清道夫注册码</A></LI>
  
  <LI>08-12-21 <A href="/zhucema/FlashFXP36-register-ma.html" title="FlashFXP3.6注册码" 
  target=_blank><font color="#FF0000">FlashFXP3.6注册码</font></A></LI>
  
  <LI>09-01-09 <A href="/zhucema/kabasiji-70-shouquan-key-wenjian.html" title="卡巴斯基7.0授权key文件" 
  target=_blank>卡巴斯基7.0授权key文件</A></LI>
  
  <LI>08-12-21 <A href="/free-quanneng-space/9544-tigong-1G-free-quanneng-space.html" title="9544提供1G免费全能空间" 
  target=_blank><strong>9544提供1G免费全能空间</strong></A></LI>
  
  <LI>08-12-26 <A href="/zhucema/AVIMPEGRMWMV-Splitter-v426-register-ma.html" title="AVI/MPEG/RM/WMV Splitter v4.26 注册码" 
  target=_blank>AVI/MPEG/RM/WMV Splitter v4.26 注册码</A></LI>
  
  <LI>08-12-21 <A href="/QQ-resource/QQ-skill-anquan/QQ-haokelonghaoyou.html" title="QQ号克隆好友" 
  target=_blank>QQ号克隆好友</A></LI>
  
  <LI>08-12-24 <A href="/zhucema/FIFA2008-xuliehao.html" title="FIFA2008序列号" 
  target=_blank>FIFA2008序列号</A></LI>
  
  <LI>09-02-11 <A href="/asp/free-tigong-300M-quannengxing-space.html" title="免费提供300M全能型空间" 
  target=_blank><font color="#FF0000"><strong>免费提供300M全能型空间</strong></font></A></LI>
  
  <LI>08-12-24 <A href="/zhucema/Windows-xuliehao-register-ma.html" title="Windows序列号/注册码" 
  target=_blank>Windows序列号/注册码</A></LI>
  </UL></DIV>
<script type="text/javascript">
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<DIV class=title-b>
<H3>推荐新闻</H3></DIV>
<DIV class=list-b>
<UL class="list eiss date">
  
  <LI>09-08-25 <A href="/free-movie/yewen.html" title="叶问" 
  target=_blank><font color="#FF0000">叶问</font></A></LI>
  
  <LI>09-08-25 <A href="/free-movie/shaoniansidamingbu-yueyuban.html" title="少年四大名捕 粤语版" 
  target=_blank>少年四大名捕 粤语版</A></LI>
  
  <LI>09-08-19 <A href="/wangyefanhei/network-anquanjiancesilu.html" title="网络安全检测思路" 
  target=_blank>网络安全检测思路</A></LI>
  
  <LI>09-08-13 <A href="/jianzhanxinde/optimize-website-xingnengtigao-website-fangwensudude-skill.html" title="优化网站性能提高网站访问速度的技巧" 
  target=_blank>优化网站性能提高网站访问速度的技巧</A></LI>
  
  <LI>09-08-12 <A href="/PHP/zhongdianhuatongquan-free-zhujitaocan.html" title="中电华通全免费主机套餐" 
  target=_blank><font color="#FF0000">中电华通全免费主机套餐</font></A></LI>
  
  <LI>09-02-11 <A href="/asp/free-tigong-300M-quannengxing-space.html" title="免费提供300M全能型空间" 
  target=_blank><font color="#FF0000"><strong>免费提供300M全能型空间</strong></font></A></LI>
  
  <LI>09-01-21 <A href="/free-movie/zhuguangbaoqi-free-zaixianguankan.html" title="珠光宝气 免费在线观看" 
  target=_blank><font color="#339966">珠光宝气 免费在线观看</font></A></LI>
  
  <LI>09-01-21 <A href="/zhucema/jinshanduba-2009-xuliehao.html" title="金山毒霸2009序列号" 
  target=_blank><font color="#FF0000">金山毒霸2009序列号</font></A></LI>
  
  <LI>09-01-09 <A href="/zhucema/kabasiji-70-shouquan-key-wenjian.html" title="卡巴斯基7.0授权key文件" 
  target=_blank>卡巴斯基7.0授权key文件</A></LI>
  
  <LI>09-01-09 <A href="/free-movie/qiangjianxianjing.html" title="强奸陷阱" 
  target=_blank><font color="#FF0000">强奸陷阱</font></A></LI>
  </UL><script type="text/JavaScript"> 
alimama_pid="mm_10681565_728575_1987463"; 
alimama_titlecolor="030000"; 
alimama_descolor ="000000"; 
alimama_bgcolor="FFFFFF"; 
alimama_bordercolor="FFFFFF"; 
alimama_linkcolor="030000"; 
alimama_bottomcolor="FFFFFF"; 
alimama_anglesize="0"; 
alimama_bgpic="0"; 
alimama_icon="1"; 
alimama_sizecode="13"; 
alimama_width=250; 
alimama_height=60; 
alimama_type=2; 
</script> 
<script src="http://a.alimama.cn/inf.js" type=text/javascript> 
</script></DIV>

</DIV>
</DIV>
<DIV id=footer>
<a href=http://www.mfzy.com.cn/ title=免费资源 target=_blank>免费资源</a> © 2007-2009 Powered By  Desgin By linnew QQ群:6540833 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1278547238'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/stat.php%3Fid%3D1278547238%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</DIV>
<SCRIPT type=text/javascript>admin5.init()</SCRIPT>
<script type="text/javascript">
// 图片大小控制
function ReImgSize(){
	var obj =document.getElementById("content").getElementsByTagName("img");
	if(!obj) obj = document.images;
	for (i=0; i<obj.length; i++){
		if (obj){
			if (obj[i].width>700){
				obj[i].width = 700;
				obj[i].style.width = 700;
				obj[i].title = "在新窗口打开图片!";
				obj[i].style.cursor = "pointer";
				obj[i].border = 0;
				obj[i].onclick = function(e){window.open(this.src);}
			}
		}
	}
}
ReImgSize()
</script>
<script language="javascript" src="/images/lang.js"></script>
</BODY></HTML>