页面布局基础2

无序列表中的超链接

1.消除列表符号、消除链接下划线

<ul>
     <li><a href="index.html">Home</a><li>
     <li><a href="menu.html">Menu</a><li>
     <li><a href="Contact.html">Contact</a><li>
</ul>

#leftcolumn ul{ list-style-type:none; }
#leftcolumn a{ text-decoration:none; }

2.用无序列表实现水平导航，需要将列表项配置成内联元素以便在单行中显示，使用display属性：

值	用途
none	元素不显示
inline	元素显示成内联元素
block	显示成块元素(前后有边距)

<div id="nav">
<ul>
     <li><a href="index.html">Home</a><li>
     <li><a href="menu.html">Menu</a><li>
     <li><a href="Contact.html">Contact</a><li>
</ul>
</div>

#nav ul{ list-style-type:none; }
#nav li{ display:inline; }
#nav a{ text-decoration:none;
              padding-right:10px; }

伪类实现CSS交互性

常用CSS伪类：

伪类	应用后的效果
:link	没被访问过的链接默认状态
:visited	已访问链接的默认状态
:focus	链接获得焦点时触发(例如，按Tab键切换到该链接)
:hover	鼠标移到链接上方时触发
:active	实际点击链接时触发

注意：锚元素伪类必须按照这种列举顺序进行编码，一般为focus和active伪类配置相同的样式。

添加图题

1.方法一：用div元素配置，img元素和图题文本包含在一个div元素中。

<div class="figure"><pre name="code" class="html">      <img src="light.jpg" width="250" height="350" alt="Light House"><br>
      <figcaption>
      IsLand LightHouse,Built in 1870

</div>.figure{float:right; width:260px; margin:10px; text-align:center; font-size:.8em; font-style:italic;}

2.方法二：使用HTML5 figure和figcaption元素来实现，要求支持HTML5的较新浏览器。

• 块显示元素figure包含一个内容单元，比如一张图片，连同可选的figcaption元素。
• figcaption元素。用于提供图题。

<pre name="code" class="html"><figure>
      <img src="light.jpg" width="250" height="350" alt="Light House"><br>
      <figcaption>
            IsLand LightHouse,Built in 1870
      </figcaption>
</figure>

figure{ float:right;
            width:260px;
            margin:10px; }
figcaption{ text-align:center;
                  font-size: .8em;
                  font-style:italic;
                  display:block; }