[08]项目实战-PC 端固定布局(8)

一．归类合并

在前几节课中，有一部分 HTML 代码比较松散，没有统一到一个类别块里。比如：很多的标签超链接没有归类到 UL 里，导致一些问题等。

//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京(5)</a><a href="###">西双版纳(8)</a>...

这样写使用多个标签有什么问题？具体如下：

1.从语义不明确，如果外部包含 UL 可以理解为标签列表；
2.从 CSS 布局排版上，UL 作为一个整体，更容易统一排版；
3.从 SEO 角度考虑，大量 a 标签有可能会被判定堆积关键字嫌疑，从而导致网站降权，

用 UL 包含判断则让搜索引擎判定为有条例的列表，对搜索引擎更加友好。

//改成这种形式<ul>    <li><a href="###">曼谷(12)</a></li>    <li><a href="###">东京(5)</a></li>    <li><a href="###">西双版纳(8)</a></li></ul>

//重新改写的 CSS#container .tag {    text-align: center;    padding: 10px 0;}#container .tag li {    display: inline-block;    background-color: #eee;    width: 100px;    height: 35px;    line-height:35px;    text-indent:8px;    text-align: left;    margin:2px 0;}#container .tag a {    display: block;    color: #999;}#container .tag a:hover {    color: #fff;    background-color: #458B00;}

同样，检查了首页，也有一个归类的问题，就是<figcaption>标签。字面上意思是表示图片的标题或简要信息。那我们设想一下，把除了标题和其他图片有关的简要信息都归于<figcaption>可以达到更好的排版效果。

//改写后的 HTML<figure>    <img src="img/tour1.jpg" alt="热门旅游">    <figcaption>        <strong class="title">&lt;曼谷-芭提雅 6 日游&gt;</strong> 包团特        惠，超丰富景点，升级 1 晚国五，无自费，更赠送 600 元/成人自费券        <div class="info">            <em class="sat">满意度 77%</em>            <span class="price">¥ <strong>2864</strong> 起</span>        </div>        <div class="type">国内长线</div>    </figcaption></figure>

//CSS 部分#tour .info {    padding: 5px0 0 0;}

二．子导航

旅游资讯在展示内容的上面，需要一个子导航块。

//HTML 部分<div class="list">    <div class="infor">        <ul class="left">            <li><a href="###">限时特价</a></li>            <li><a href="###">热门推荐</a></li>        </ul>        <ul class="right">            <li><a href="###" class="selected">推荐</a></li>            <li><a href="###">折扣</a></li>            <li><a href="###">价格</a></li>        </ul>    </div>    ...</div>

//CSS 部分#container .list {    width: 910px;    float: left;}#container .infor {    height: 45px;    line-height:45px;    margin: 0 0 20px 0;    background-color: #eee;}#container ul.left {    display: inline-block;    float: left;}#container ul.left li {    width: 150px;    height: 43px;    line-height:43px;    font-size: 18px;    display: inline-block;}#container ul.left li a {    display: block;    text-align: center;    color: #666;}#container ul.left li:first-child {    background-color: #fff;    border-top: 2px solid #458B00;    position: relative;    left: 1px;}#container ul.right {    float: right;    padding: 0 20px 0 0;}#container ul.right li {    width: 60px;    height: 45px;    line-height:45px;    font-size: 16px;    display: inline-block;    text-align: center;}#container ul.right li a {    padding: 3px8px;    color: #666;}#container ul.right li a.selected, #container ul.right li a:hover{    background-color: #458B00;    color: #fff;}