令程序员崩溃的div+css[兼容IE6，IE7，FireFox]！！

qz沒愛過mm · 发表于 2009-9-15 00:55:20

高手就不要看了，一看就会露出破绽了~~~

这是给菜鸟们看的~~~

公司要求切图要全div+css，美工工作量增加了不少，程序员很得意！

不得不给点事情给程序员做。。。。全div不如无div！！

本来web2.0的思想就是要实现从html--xhtml--xml的过度，既然这样，xml的风格的html当然是能被浏览器支持的了！

废话不多说，直接看代码！把下面的代码另存为html文件，直接打开就能看到效果！

-----------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:meimei="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>汇美轩衣服</title>
<style type="text/css">

* {margin:0;padding:0;border:0;}
body {text-align:center; background-color: #ebe6dd;font-size: 12px;color: #000000;}
a: {color:#000000;}
a:link {color: #000000;text-decoration: none;}
a:visited {text-decoration: none;color: #000000;}
a:hover {text-decoration: none;color: #FF3300;}

meimei\:头部 {display:block;width:800px;height:65px;margin:0 auto;border-bottom:#000 4px solid;background:#E1E1E1;text-align:left; position:relative;}
meimei\:logo {display:block;width:159px;height:65px; position:absolute; left:20px; background-image:url();}
meimei\:导航 {display:block;width:365px;height:20px; position:absolute; right:10px;bottom:5px;}
meimei\:导航 a{float:left;width:60px;height:20px;}

meimei\:页面主体 {display:block;width:800px;height:500px;margin:5px auto 0 auto; background:#FFFFFF; position:relative;}
meimei\:广告 {display:block;width:530px;height:123px;position:absolute;top:5px; right:5px;background-image:url();}
meimei\:注册 {display:block;width:255px;height:200px;position:absolute;top:5px;left:5px;background: #ebe6dd;}
meimei\:会员登陆 {display:block; height:16px;width:230px;border-bottom:#000 1px solid;position:absolute;top:5px;left:5px;text-align:left;}
meimei\:服装分类 {display:block;width:255px;height:280px;position:absolute;top:210px;left:5px;background: #ebe6dd;}
meimei\:服装分类的头 {display:block; height:16px;width:230px;border-bottom:#000 1px solid;position:absolute;top:5px;left:5px;text-align:left;}
meimei\:热销服装 {display:block;width:530px;height:357px;position:absolute;top:133px;left:265px;background: #ebe6dd;}
meimei\:热销服装的头 {display:block; height:16px;width:510px;border-bottom:#000 1px solid;position:absolute;top:5px;left:5px;text-align:left;}
meimei\:热销服装的图片 {display:block; height:320px;width:515px;position:absolute;top:25px;left:5px;text-align:left;}
meimei\:热销服装的图片 img {width:165px;height:150px; margin:5px 0px 0px 3px; float:left; border: #999999 1px solid;}

</style>
</head>
<body>
<meimei:头部>
  <meimei:logo><a href="#"><img src="http://www.gzmeimei.cn/images/logo.gif" /></a></meimei:logo>
  <meimei:导航>
  <a href="#">返回首页</a>
  <a href="#">特价促销</a>
  <a href="#">时尚服饰</a>
  <a href="#">时尚配饰</a>
  <a href="#">时尚搭配</a>
  <a href="#">关于我们</a>
</meimei:导航>
</meimei:头部>
<meimei:页面主体>
  <meimei:广告><a href="#"><img src="http://www.gzmeimei.cn/upload/indeximgshow/16533.gif" /></a></meimei:广告>
  <meimei:注册>
<meimei:会员登陆><b>会员登陆</b> | Member Login</meimei:会员登陆>
  </meimei:注册>
  <meimei:服装分类>
<meimei:服装分类的头><b>服装分类</b> | Categories</meimei:服装分类的头>
  </meimei:服装分类>
  <meimei:热销服装>
<meimei:热销服装的头><b>热销服装</b> | Hot</meimei:热销服装的头>
<meimei:热销服装的图片>
      <a href="#"><img src="http://www.gzmeimei.cn/upload/products/s13317.gif" /></a>
      <a href="#"><img src="http://www.gzmeimei.cn/upload/products/s13317.gif" /></a>
      <a href="#"><img src="http://www.gzmeimei.cn/upload/products/s13317.gif" /></a>
      <a href="#"><img src="http://www.gzmeimei.cn/upload/products/s13317.gif" /></a>
      <a href="#"><img src="http://www.gzmeimei.cn/upload/products/s13317.gif" /></a>
      <a href="#"><img src="http://www.gzmeimei.cn/upload/products/s13317.gif" /></a>
</meimei:热销服装的图片>
  </meimei:热销服装>
</meimei:页面主体>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------

哈哈~~~网站这样子切图，程序员没见过的话，立刻就会头大了~~~~~~~

		自动登录	找回密码
密码			注册