CSS div 使用 十九

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

    在你的页面中使用

,但不要滥用。借助结构，把页面分成几个合理的逻辑结构，这样有助于网页结构的清晰和样式化。如果添加

只是使页面中有更多的结构、那么这样做除了是页面变得复杂之外没有任何真正的好处了。

这次 的代码： lounge.rar  


在 lounge.html 中添加

div id="elixirs">
    <h2>Weekly Elixir Specials</h2>
    <p>
      <img src="images/yellow.gif" alt="Lemon Breeze Elixir" />
    </p>
    <h3>Lemon Breeze</h3>
    <p>
      The ultimate healthy drink, this elixir combines
      herbal botanicals, minerals, and vitamins with
      a twist of lemon into a smooth citrus wonder
      that will keep your immune system going all
      day and all night.
    </p>

    <p>
      <img src="images/chai.gif" alt="Chai Chiller Elixir" />
    </p>
    <h3>Chai Chiller</h3>
    <p>
      Not your traditional chai, this elixir mixes mat&eacute;
      with chai spices and adds an extra chocolate kick for
      a caffeinated taste sensation on ice.
    </p>

    <p>
      <img src="images/black.gif" alt="Black Brain Brew Elixir" />
    </p>
    <h3>Black Brain Brew</h3>
    <p>
      Want to boost your memory?  Try our Black Brain Brew
      elixir, made with black oolong tea and just a touch
      of espresso.  Your brain will thank you for the boost.
    </p>

    <p>
      Join us any evening for these and all our
      other wonderful
      <a href="beverages/elixir.html"
         title="Head First Lounge Elixirs">elixirs</a>.
    </p>
</div>

在 lounge.css 中添加

#elixirs {
    border-width:thin;
        border-style:solid;
        border-color:#007e7e;
        width:200px;

        padding-right:20px;
        padding-bottom:20px;
        padding-left:20px;

        margin-lefg:20px;

        text-align:center;

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

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

#elixirs h3{
     color:blue;      exlirs 的 h3标题显示颜色
}

有边框，有颜色，有背景

阅读(998) | 评论(0) | 转发(0) |

0

上一篇：CSS 设置文本和字体 十七

下一篇：CSS span 二十

给主人留下些什么吧！~~

评论热议

请登录后评论。

登录 注册