CSS div 使用 十九

yuweixian4230

<div> 就像一个容器，可以把元素一起放进去

    在你的页面中使用<div>,但不要滥用。借助结构，把页面分成几个合理的逻辑结构，这样有助于网页结构的清晰和样式化。如果添加 <div> 只是使页面中有更多的结构、那么这样做除了是页面变得复杂之外没有任何真正的好处了。

这次 的代码： lounge.rar  


在 lounge.html 中添加 <div>

1. div id="elixirs">
   
2.     <h2>Weekly Elixir Specials</h2>
   
3.     <p>
   
4.       <img src="images/yellow.gif" alt="Lemon Breeze Elixir" />
   
5.     </p>
   
6.     <h3>Lemon Breeze</h3>
   
7.     <p>
   
8.       The ultimate healthy drink, this elixir combines
   
9.       herbal botanicals, minerals, and vitamins with
   
10.       a twist of lemon into a smooth citrus wonder
    
11.       that will keep your immune system going all
    
12.       day and all night.
    
13.     </p>
    
14. 
    
15.     <p>
    
16.       <img src="images/chai.gif" alt="Chai Chiller Elixir" />
    
17.     </p>
    
18.     <h3>Chai Chiller</h3>
    
19.     <p>
    
20.       Not your traditional chai, this elixir mixes mat&eacute;
    
21.       with chai spices and adds an extra chocolate kick for
    
22.       a caffeinated taste sensation on ice.
    
23.     </p>
    
24. 
    
25.     <p>
    
26.       <img src="images/black.gif" alt="Black Brain Brew Elixir" />
    
27.     </p>
    
28.     <h3>Black Brain Brew</h3>
    
29.     <p>
    
30.       Want to boost your memory? Try our Black Brain Brew
    
31.       elixir, made with black oolong tea and just a touch
    
32.       of espresso. Your brain will thank you for the boost.
    
33.     </p>
    
34. 
    
35.     <p>
    
36.       Join us any evening for these and all our
    
37.       other wonderful
    
38.       <a href="beverages/elixir.html"
    
39.          title="Head First Lounge Elixirs">elixirs</a>.
    
40.     </p>
    
41. </div>

在 lounge.css 中添加

1. #elixirs {
   
2.     border-width:thin;
   
3.         border-style:solid;
   
4.         border-color:#007e7e;
   
5.         width:200px;
   
6. 
   
7.         padding-right:20px;
   
8.         padding-bottom:20px;
   
9.         padding-left:20px;
   
10. 
    
11.         margin-lefg:20px;
    
12.         
    
13.         text-align:center;
    
14. 
    
15.         background-image:url(images/cocktail.gif);
    
16.         background-repeat:repeat-x;
    
17. }
    
18. 
    
19. #elixirs h2{        ##如果没有加 这个，标题显示黑色
    
20.     color:red;          elixris 子标题显示 红色
    
21. }
    
22. 
    
23. #elixirs h3{
    
24.      color:blue;      exlirs 的 h3标题显示颜色
    
25. }

有边框，有颜色，有背景