讲给后台程序员看的前端系列教程(11)——HTML综合练习

最新推荐文章于 2024-04-20 23:12:18 发布

谷哥的小弟

最新推荐文章于 2024-04-20 23:12:18 发布

阅读量925

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： HTML 布局 div

本文链接：https://blog.csdn.net/lfdfhl/article/details/100549621

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 53 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

页面效果

在这里插入图片描述

页面源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>南亚风情游</title>
	</head>
	<body>
		<div style="width:1000px; margin:0 auto">

			<!--头部模块 begin-->
			<div style="height:56px;">
				<img src="img/logo.png" alt="logo" align="left" />
				<p align="right">首页&nbsp;&nbsp;|&nbsp;&nbsp;登陆&nbsp;&nbsp;|&nbsp;&nbsp;注册</p>
			</div>
			<hr color="#CCC" />
			<!--头部模块 end-->

			<!--伊露岛介绍模块 begin-->
			<div style="height:470px;">
				<img src="img/banner1.jpg" alt="banner1" align="left" hspace="12" vspace="12" />
				<div>
					<p align="center">
						<strong>
							<font face="微软雅黑" size="6" color="orange">伊</font>
							<font face="微软雅黑" size="7" color="orange">露</font>
							<font face="微软雅黑" size="6" color="orange">岛</font>
						</strong>
					</p>
					<p>
						&nbsp;&nbsp;&nbsp;&nbsp;伊露岛（Iru Fushi）位于马尔代夫北部环礁——诺鲁环礁（Noonu Atoll）中，它是一座拥有醉人景色和浪漫气氛的小岛。晶莹的海水、绵白的沙滩、明媚的阳光、温馨的海边小屋、浪漫的海上落日。所有的一切似乎都为浪漫而存在，美丽而遗世独立。
					</p>
					<p>
						&nbsp;&nbsp;&nbsp;&nbsp;最佳旅游时间：<ins><em><strong><font color="#009933">1月-2月</font></strong></em></ins>，不冷不热，舒适惬意。
					</p>
					<p>
						&nbsp;&nbsp;&nbsp;&nbsp;伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框<ins><strong><font color="#F90">......[详细]</font></strong></ins>
					</p>
				</div>
			</div>
			<!--伊露岛介绍模块 end-->

			<!--伊露岛推荐模块 begin-->
			<div>
				<h2>
					马尔代夫美丽小岛：伊露有你
				</h2>
				<p>
					<em>
						<font color="#666666">
							2019.08.25&nbsp;&nbsp;&nbsp;&nbsp;来源：导游小妹-倩倩
						</font>
					</em>
				</p>
				<hr color="#CCC" />
				<p>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伊露岛沙滩屋的构造独特，彻底的南亚风情。雪白的圆形的房子，尖尖的茅草屋顶，木质的框架，朴实的外表里面却十分的豪华，从卧室转到后面有一个很大的半露天花园，里面有只超大的按摩浴缸和露天的淋浴台，洗好澡穿上睡袍躺在这里拿本书，心情彻底放松。
				</p>
				<img src="img/banner2.jpg" alt="banner2" vspace="20" />
			</div>
			<!--伊露岛推荐模块 end-->

			<!--游客评论模块 begin-->
			<div>
				<img src="img/icon.gif" alt="icon" />
				<hr color="#CCC" />
				<div>
					<img src="img/person1.jpg" alt="" align="left" hspace="10" />
					<div>
						<p>
							<font color="#F60">ZX9527</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2019-08-21 17:38:39</font>
						</p>
						<p>
							<font size="2">风景十分美丽，真的很不错，行程安排的也很好！伊露岛的美，让我们的蜜月越发美满！推荐大家携家人一起前往</font>
							<br />
							<font color="#F60" size="2">
								来自：南亚驴友 www.play.com
							</font>
						</p>
					</div>
					<hr color="#CCC" size="1" />
				</div>
				<div>
					<img src="img/person2.jpg" alt="" align="left" hspace="10" />
					<div>
						<p>
							<font color="#F60">班马河</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2019-07-08 19:08:33</font>
						</p>
						<p>
							<font size="2">海鲜贼便宜，而且新鲜！椰子很好喝，还是免费的喔</font>
							<br />
							<font color="#F60" size="2">
								来自：南亚驴友 www.play.com
							</font>
						</p>
					</div>
					<hr color="#CCC" size="1" />
				</div>
				<div>
					<img src="img/person3.jpg" alt="" align="left" hspace="10" />
					<div>
						<p>
							<font color="#F60">niceday</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2019-04-11 13:38:53</font>
						</p>
						<p>
							<font size="2">岛上的原著居民热情好客，待人彬彬有礼；以诚相待；下次还来</font>
							<br />
							<font color="#F60" size="2">
								来自：南亚驴友 www.play.com
							</font>
						</p>
					</div>
					<hr color="#CCC" />
				</div>
			</div>
			<!--游客评论模块 end-->

			<!--底部模块 begin-->
			<div style="text-align:center">
				<p>
					<font color="#1d5983" size="2">
						留言板&nbsp;&nbsp;&nbsp;<font color="#333">咨询电话：028-1234567</font> &nbsp;&nbsp;&nbsp;期待您的光临
					</font>
				</p>
				<p>
					<font color="#1d5983" size="2">
						公司简介 | About US| 广告服务 | 联系我们 | 招聘信息 | 旅游资讯
					</font>
				</p>
				<p>
					<font size="2">
						Copyright © 2018 - 2028 All Rights Reserved
					</font>
				</p>
				<p>
					<font color="#1d5983" size="2">
						南亚旅游公司　版权所有
					</font>
				</p>
			</div>
			<!--底部模块 end-->
		</div>
	</body>
</html>