PC端固定布局[8]

2017年10月18日07:00:16 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.归类合并

在前面几节课中,有一部分 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>

//重新改写的

#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="PC端固定布局[8]" 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: 5px 0 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: 3px 8px;
    color: #666;
}
#container ul.right li a.selected, #container ul.right li a:hover {
    background-color: #458B00;
    color: #fff;
}

注:本章为第48课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: