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

最新推荐文章于 2023-01-10 11:31:53 发布

Strenghthen

最新推荐文章于 2023-01-10 11:31:53 发布

阅读量3.6k

点赞数 7

分类专栏： Web前端文章标签：案例 html5 网页设计 ccs 前端

本文链接：https://blog.youkuaiyun.com/Strenghthen/article/details/51908674

版权

Web前端专栏收录该内容

6 篇文章

订阅专栏

本例子来源于《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&copy;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&copy;2016 Pracfic Trails Rsort</i></small><br>
	<a href="mailto:hjh1170459853@qq.com">hjh1170459853@qq.com
	</a>
</footer>
</body>
</html>