[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"><曼谷-芭提雅 6 日游></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;
}