前端學習筆記2017.6.12 CSS控制DIV
阿新 • • 發佈：2017-06-12
banner 成像 個性化 logs 一個 style 切換 back 成了
前一篇文章中用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