您的位置：首页 > Web前端 > HTML5

《HTML5与CCS3网页设计基础》案例1---Pacific Trails Resort

2016-07-14 13:53 567 查看

本例子来源于《HTML5与CCS3网页设计基础》（第2版）
第二章案例学习的第一个例子。

这部书相对比较基础，适合前端入门，由于翻了书上的学习案例资料链接不是无效就是网盘过期什么的，所以决定在自己博客中记录下整个学习案例的工程。PS:博客开了好久都没去更新！不行不行。。
将从第二章开始，不断对案例更新，案例有两个,分别是Pacific Trails Resort跟JavaJam
Coffee House。

《Pacific Trails Resort》

第二章案子学习完成效果图：

1.index.html

代码部分：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pacific Trails Resort</title>
</head>
<body>
<header>
<h1><strong>Pacific Trails Resort</strong></h1>
</header>
<nav>
<a href="index.html">Home</a> 
<a href="Yurts.html">Yurts</a> 
<a href="Activities.html">Activities</a> 
<a href="Reservation.html">Reservation</a>
</nav>
<div>
<h2>Enjoy Nature in Luxury</h2>
<p>
Pacific Trails Rsort offers a special lodging experience on the California North Coast.Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nighy fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>

</ul>
<div>
Pacific Trails Resort<br>
12010 Pacific Trails Road<br>
Zephyr,CA 95555
<br>
<br>
888-555-5555
<br>
<br>
</div>
</div>

<footer>
<small><i>Copyright©2016 Pracfic Trails Rsort</i></small><br>
<a href="mailto:hjh1170459853@qq.com">hjh1170459853@qq.com
</a>
</footer>
</body>
</html>

2.Yurts.html

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pacific Trails Resor :: Yurts</title>
</head>
<body>
<header>
<h1><strong>Pacific Trails Resort</strong></h1>
</header>
<nav>
<a href="index.html">Home</a> 
<a href="Yurts.html">Yurts</a> 
<a href="Activities.html">Activities</a> 
<a href="Reservation.html">Reservation</a>
</nav>
<div>
<h2>The Yurts at Pacific Trails</h2>
<dl>
<dt><strong>What is a yurt?</strong></dt>
<dd>
our luxury yurts are permanent structures four feet off the ground.Each yurt has canvas walls,a wooden floor, and a roof dome that can be opened.
</dd>
<dt><strong>How are the yurts furnished?</strong></dt>
<dd>
Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove. The luxury camping experience also includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge.
</dd>
<dt><strong>What should I bring ?</strong></dt>
<dd>
Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to dress for changing weather with layers of clothing.
</dd>
</dl>
</div>
<footer>
<small><i>Copyright©2016 Pracfic Trails Rsort</i></small><br>
<a href="mailto:hjh1170459853@qq.com">hjh1170459853@qq.com
</a>
</footer>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航