PC端固定布局[11]

2017年10月25日08:21:43 发表评论

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

一.风景欣赏

预览图和首页差不多。具体代码如下:

//风景欣赏 HTML 部分

<div class="list scenery">
    <section>
        <h2>风景欣赏</h2>
        <figure>
            <img src="img/s1.jpg" alt="PC端固定布局[11]" alt="曼谷-芭提雅">
            <figcaption>曼谷-芭提雅[共 8 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s2.jpg" alt="PC端固定布局[11]" alt="马尔代夫双鱼岛">
            <figcaption>马尔代夫双鱼岛[共 12 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s3.jpg" alt="PC端固定布局[11]" alt="海南">
            <figcaption>海南[共 19 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s4.jpg" alt="PC端固定布局[11]" alt="富山-大阪-东京">
            <figcaption>富山-大阪-东京[共 22 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s5.jpg" alt="PC端固定布局[11]" alt="法瑞意德">
            <figcaption>法瑞意德[共 31 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s6.jpg" alt="PC端固定布局[11]" alt="巴厘岛">
            <figcaption>巴厘岛[共 12 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s7.jpg" alt="PC端固定布局[11]" alt="塞舌尔迪拜">
         <figcaption>塞舌尔迪拜[共 7 张]</figcaption>
        </figure>
        <figure>
            <img src="img/s8.jpg" alt="PC端固定布局[11]" alt="花样姐姐土耳其">
        <figcaption>花样姐姐土耳其[共 14 张]</figcaption>
        </figure>
    </section>
    <div class="more">加载更多...</div>
</div>

//CSS 代码

#container .scenery figure {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    width: 435px;
    margin: 15px 5px 15px 0;
    text-align: left;
}
#container .scenery figcaption {
    text-align: center;
    padding: 5px 0;
    font-size: 20px;
    color: #666;
}

二.公司简介

//全部代码

<div class="list about">
    <section>
        <h2>关于我们</h2>
        <p>瓢城旅行社旅游网创立于 2006 年 10 月,以“让旅游更简单”为使命,为消费者提供由北京、上海、广州、深圳等 64 个城市出发的旅游产品预订服务,产品全面,价格透明,全年 365 天 24 小时 400 电话预订,并提供丰富的后续服务和保障。</p>
        <p>目前, 瓢城旅行社旅游网提供 8 万余种旅游产品供消费者选择, 涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等,已成功服务累计超过 400 万人次出游。</p>
        <p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区,可以更好地帮助游客了解目的地信息,妥善制定好出游计划,并方便地预订旅程中的服务项目。
</p>
    </section>
    <p>&nbsp;</p>
    <section>
        <h2>联系我们</h2>
        <address>
            <ul>
                <li>瓢城旅行社股份有限公司</li>
                <li>地址:江苏省盐城市亭湖区大庆中路 1234 号</li>
                <li>邮编:1234567</li>
                <li>电话:010-88888888</li>
                <li>传真:010-88666666</li>
            </ul>
         </address>
    </section>
</div>

//CSS 部分

#container .about p {
    font-size: 20px;
    color: #666;
    line-height: 2;
    margin: 20px 0;
}
#container .about address {
    font-style: normal;
    font-size: 20px;
    color: #666;
    margin: 20px 0;
    line-height: 1.6;
}

注:本章为第51课。本次教程共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: