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

一．风景欣赏

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

//风景欣赏 HTML 部分<div class="list scenery"><section><h2>风景欣赏</h2><figure><img src="img/s1.jpg" alt="曼谷-芭提雅"><figcaption>曼谷-芭提雅[共 8 张]</figcaption></figure><figure><img src="img/s2.jpg" alt="马尔代夫双鱼岛"><figcaption>马尔代夫双鱼岛[共 12 张]</figcaption></figure><figure><img src="img/s3.jpg" alt="海南"><figcaption>海南[共 19 张]</figcaption></figure><figure><img src="img/s4.jpg" alt="富山-大阪-东京"><figcaption>富山-大阪-东京[共 22 张]</figcaption></figure><figure><img src="img/s5.jpg" alt="法瑞意德"><figcaption>法瑞意德[共 31 张]</figcaption></figure><figure><img src="img/s6.jpg" alt="巴厘岛"><figcaption>巴厘岛[共 12 张]</figcaption></figure><figure><img src="img/s7.jpg" alt="塞舌尔迪拜"><figcaption>塞舌尔迪拜[共 7 张]</figcaption></figure><figure><img src="img/s8.jpg" 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: 15px5px 15px 0;text-align: left;
}
#container .scenery figcaption {text-align: center;padding: 5px0;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: 20px0;
}
#container .about address{font-style: normal;font-size: 20px;color: #666;margin: 20px0;line-height:1.6;
}

[11]项目实战-PC 端固定布局(11)相关推荐

项目实战-PC端固定布局【2】认识网页大纲算法（HTML5 Outliner）
注: body,nav,section需要标题 head,div不需要标题链接: https://gsnedders.html5.org/outliner/ 步骤:选择文件--->Outlin ...
[09]项目实战-PC 端固定布局(9)
一．资讯内容和首页一样,只不过这里,布局方式有所不同,具体如下: 二．代码详解 //全部代码 <figure class="tour"><img src=&qu ...
腾讯地图：PC端将于11月11日停止服务
新浪科技讯 10月12日下午消息,据腾讯地图官网,腾讯地图PC端将于11月11日停止服务.
10讲项目实战首页底部固定位置的分享、咨询功能
#10讲项目实战首页底部固定位置的分享.咨询功能 <!--整站建设步骤如下: 1.构建一个宽度100% 高度149px 这样一个长方形,为了保证浏览器的兼容,我们加了*{margin:0 ...
Python 小白从零开始 PyQt5 项目实战（5）布局管理
本系列面向 Python 小白,从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战. 什么叫从零开始?从软件安装.环境配置开始.不跳过一个细节,不漏掉一行代码,不省略一个例图. ...
新版阴阳师桌面版pc端固定窗口大小多开
阴阳师pc端固定窗口大小多开随着阴阳师2020年周年的到来, 阴阳师官方对手机端和pc端也是进行了强制更新, 更新后导致pc端的阴阳师没法像之前一样固定游戏开启时的大小, 在网上查阅了一些资料, 在 ...
VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局一.页面布局二.创建Home组件三.路由index.js 文件配置主页路径四.添加welcome组件一.页面布局 <el-container& ...
Android开发项目实战：实现折叠式布局，android组件化开发与sdk
android:layout_width="match_parent" android:layout_height="200dp"> <androi ...
Android项目实战--【谁是歌手-布局篇】
项目简介: 项目设定游戏时间为60秒,在这60秒内,播放音乐,并且给出六张歌手的图片(其中有一张是正确是,其这5张是随机的干扰歌手图片,且每首歌都会随机选5张与正确那张组合),让用户选择 ...

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

一．风景欣赏

二．公司简介

[11]项目实战-PC 端固定布局(11)相关推荐

最新文章

热门文章