网页设计与制作项目教程HTML+CSS+JavaScript之项目二

“说旅游”专题页

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>“说旅游”专题页</title>
</head>
<body>
<div style="width:980px; margin:0 auto">
    <!--header begin-->
    <div style="height:56px;">
        <img src="images/logo.png" alt="" align="left"/>       
        <p align="right">旅游首页&nbsp;&nbsp;|&nbsp;&nbsp;登陆&nbsp;&nbsp;|&nbsp;&nbsp;注册</p>
    </div>
    <hr color="#CCC" />
    <!--header end-->
    <!--“伊露岛”介绍模块 begin-->
    <div style="height:470px;">
        <img src="images/banner1.jpg" alt="" 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月-12月</font></strong></em></ins>,热带海洋气候,全年皆适合旅游。<ins><em><strong><font color="#009933">12月至次年4月</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">
                    2015.04.21&nbsp;&nbsp;&nbsp;&nbsp;来源:一日游驴友群-老牛
                </font>
            </em>
        </p>
        <hr color="#CCC" />
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伊露岛沙滩屋的构造很独特,彻底的南亚风情。雪白的圆形的房子,尖尖的茅草屋顶,木质的框架,朴实的外表里面却十分的豪华,从卧室转到后面有一个很大的半露天花园,里面有只超大的按摩浴缸和露天的淋浴台,洗好澡穿上睡袍躺在这里拿本书,心情彻底放松。
        </p>
        <img src="images/banner2.jpg" alt="" vspace="20" />
    </div>
    <!--“伊露岛”推荐模块  end-->
 <!--驴友评论 begin-->
    <div>
       <img src="images/icon.gif" alt=""  />
        <hr  color="#CCC"/>
        <div>
           <img src="images/person1.jpg" alt="" align="left" hspace="10" />
            <div>
               <p>
                   <font color="#F60">HXZ9_IT</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2015-4-2 15:38:37</font>
                </p>
                <p>
                   <font size="2">第一次用途牛,太让我们惊喜了!真的很不错,行程安排的也很好!幸运的是,往返飞机都没有延误!伊露岛的美,让我们的蜜月越发美满!</font>
                    <br />
                    <font color="#F60" size="2">
                       来自:一日游驴友 www.yiriyou.com
                    </font>
                </p>
            </div>
            <hr color="#CCC" size="1" />
        </div>
        <div>
           <img src="images/person2.jpg" alt="" align="left" hspace="10" />
            <div>
               <p>
                   <font color="#F60">外星人</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2015-3-2 15:05:37</font>
                </p>
                <p>
                   <font size="2">岛还可以,就是沙屋有虫子,不太让人满意,水屋确实挺棒的。饭嘛,国外基本都那样吧,海鲜还行。</font>
                    <br />
                    <font color="#F60" size="2">
                       来自:一日游驴友 www.yiriyou.com
                    </font>
                </p>
            </div>
            <hr color="#CCC" size="1" />
        </div>
        <div>
           <img src="images/person3.jpg" alt="" align="left" hspace="10" />
            <div>
               <p>
                   <font color="#F60">so_cool</font>&nbsp;&nbsp;&nbsp;&nbsp;<font size="2" color="#999">2015-2-14 10:38:36</font>
                </p>
                <p>
                   <font size="2">行程安排挺好的,挺喜欢伊露岛,岛上的人很热情,手机丢了小黑给找回来了,都很热情,会主动跟你招呼!</font>
                    <br />
                    <font color="#F60" size="2">
                       来自:一日游驴友 www.yiriyou.com
                    </font>
                </p>
            </div>
            <hr color="#CCC" />
        </div>
    </div>
   <!--驴友评论 end-->
   <!-- footer begin-->
   <div style="text-align:center;">
          <p >
            <font color="#1d5983" size="2">
               一日游网友意见留言板&nbsp;&nbsp;&nbsp;<font color="#333">电话:000-1234567</font> &nbsp;&nbsp;&nbsp;欢迎批评指正  
            </font>
        </p>
        <p>
           <font color="#1d5983" size="2">
              公司简介 | About YIRIYOU| 广告服务 | 联系我们 | 招聘信息 | 网站律师 | YIRIYOU English | 注册 | 产品答疑 
            </font>
        </p>
        <p>
           <font size="2">
              Copyright © 1996 - 2016 YIRIYOU.coright All Rights Reserved
            </font>
        </p>
        <p>
           <font color="#1d5983" size="2">
              一日游公司 版权所有
            </font>
        </p>
   </div>
   <!-- footer end-->   
</div>
</body>
</html>

实现效果如下:
在这里插入图片描述
在这里插入图片描述

项目二图片资源下载

  • 11
    点赞
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值