標籤：大小 通過 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>
前端學習筆記2017.6.12 CSS控制DIV
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
