Chinaunix

标题: CSS div 使用 十九 [打印本页]
作者: yuweixian4230    时间: 2011-12-20 09:48
标题: CSS div 使用 十九
<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>

  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>

  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>

  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;

  7.         padding-right:20px;
  8.         padding-bottom:20px;
  9.         padding-left:20px;

  11.         margin-lefg:20px;
  12.         
  13.         text-align:center;

  15.         background-image:url(images/cocktail.gif);
  16.         background-repeat:repeat-x;
  17. }

  19. #elixirs h2{        ##如果没有加 这个，标题显示黑色
  20.     color:red;          elixris 子标题显示 红色
  21. }

  23. #elixirs h3{
  24.      color:blue;      exlirs 的 h3标题显示颜色
  25. }
有边框，有颜色，有背景










欢迎光临 Chinaunix (http://bbs.chinaunix.net/) Powered by Discuz! X3.2