标签:大小 通过 div布局 rar logs 实现 body 没有 class
前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div><!--banner-->
<div></div><!--banner1-->
<div></div><!--banner2-->
</div>
<div></div><!--ad-->
<div><!--hierarchy-->
<div></div><!--left-->
<div></div><!--right-->
</div>
<div><!--goods-->
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
把上面那段代码保存为1.html,打开之后发现啥也显示出来。
这是为什么?因为我们指定了div,但却没告诉浏览器这块div大小、颜色等属性,那么怎么实现这些呢?CSS啦。
怎么加入css代码呢?用style元素即可,比如下面这样:
<!DOCTYPE html> <html> <head> </head> <body> <style> div{ background:red; } </style> <div><!--banner--> <div></div><!--banner1--> <div></div><!--banner2--> </div> <div></div><!--ad--> <div><!--hierarchy--> <div></div><!--left--> <div></div><!--right--> </div> <div><!--goods--> <div></div> <div></div> <div></div> </div> </body> </html>
用浏览器打开发现还是啥也没有,为什么?因为没有指定div的高度、宽度,你怎么可以给一个没有大小的东西填充颜色呢?好,我们给div元素一个大小。
变成下面这样:
<!DOCTYPE html> <html> <head> </head> <body> <style> div{ height:200px; width:100px; background: red; } </style> <div><!--banner--> <div></div><!--banner1--> <div></div><!--banner2--> </div> <div></div><!--ad--> <div><!--hierarchy--> <div></div><!--left--> <div></div><!--right--> </div> <div><!--goods--> <div></div> <div></div> <div></div> </div> </body> </html>
用浏览器打开之后发现时一个红色的竖条,为什么呢?因为我们上面通过css对所有的div都设置了背景色是红色,怎么能更个性化一些呢?让某个div是红色,某个div是蓝色?可以的,可以给div起一个名字,然后再css代码中指定对应div的名字,这样就针对性的对某个div设置css属性了,好我们再改一下就变成了下面这样:
<!DOCTYPE html> <html> <head> </head> <body> <style> #banner{ height:200px; width:100px; background: red; } #ad{ height: 200px; width:100px; background:blue; } #hierarchy{ height: 200px; width:100px; background: green; } #goods{ height:200px; width:100px; background: yellow; } </style> <div id="banner"><!--banner--> <div id="banner1"></div><!--banner1--> <div id="banner2"></div><!--banner2--> </div> <div id="ad"></div><!--ad--> <div id="hierarchy"><!--hierarchy--> <div></div><!--left--> <div></div><!--right--> </div> <div id="goods"><!--goods--> <div id="goods1"></div> <div id="goods2"></div> <div id="goods3"></div> </div> </body> </html>
人家豆瓣东西那个banner是布满整个浏览器的,而且你几个div的大小也和豆瓣东西的不一样,再调整一下,怎么看出人家height和width用了几个像素呢?我是截图之后放到PS里面用选区工具框选一下,然后再信息窗口里面看一下这个选区的长width和height,然后再看下图像的分辨率,为了方便,切换成像素/厘米 这样就能算出占用几个像素了,调整一下,最后代码变成了这样:
<!DOCTYPE html> <html> <head> </head> <body> <style> #banner{ height:90px; background: red; } #ad{ height: 99px; width:924px; background:blue; } #hierarchy{ height: 476px; width:924px; background: green; } #goods{ height:488px; width:924px; background: yellow; } </style> <div id="banner"><!--banner--> <div id="banner1"></div><!--banner1--> <div id="banner2"></div><!--banner2--> </div> <div id="ad"></div><!--ad--> <div id="hierarchy"><!--hierarchy--> <div></div><!--left--> <div></div><!--right--> </div> <div id="goods"><!--goods--> <div id="goods1"></div> <div id="goods2"></div> <div id="goods3"></div> </div> </body> </html>
标签:大小 通过 div布局 rar logs 实现 body 没有 class
原文地址:http://www.cnblogs.com/yfish/p/6991576.html