目录
-
使用<div>标记逻辑区
<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é
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>
-
子孙选择器
#elixirs {
border-width:thin;
border-style:solid;
border-color:#007e7e;
width:200px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
margin-left:20px;
text-align:center;
background-color:white;
background-image:url(images/cocktail.gif);
background-repeat:repeat-x;
line-height:1;
}
#elixirs h2 {
color:black;
}
#elixirs h3 {
color:#d12c47;
}
-
使用<span>创建内联字符和元素的逻辑分组
<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
<li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
<li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>, <span class="artist">Enigma</span></li>
<li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
</ul>
.cd {
font-style:italic;
}
.artist {
font-weight:bold;
}
-
<a>元素状态样式设置
a:link {
color:green;
}
a:visited {
color:red;
}
a:hover {
color:yellow;
}
-
伪类(Pseudo-class)
#elixirs a:link {
color:#007e7e;
}
#elixirs a:visited {
color:#333333;
}
#elixirs a:hover {
background:#f88396;
color:#0d5353;
}
-
层叠