HTML实现简易旅行网站主页

最新推荐文章于 2024-05-20 02:40:13 发布

_Meditation_

最新推荐文章于 2024-05-20 02:40:13 发布

阅读量4.7w

点赞数 78

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44850537/article/details/101370718

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

我在顶着上课的厌恶之情，终于认真的听了网页课，以下是我做的第一个简易网页，希望这个过程能被我记录下来。

下面是这个小网页的成品：
在这里插入图片描述

过程如下：
1：准备工具：一个文件夹，vscode(或者DW，实在没有记事本都行)，准备图片，图片必须跟项目在同一个文件夹。
2：创建一个HTML的文件夹，把图片和文本文件都放到该文件夹里面。
3：写出相应的代码块。

	1.	<div style="height:56;">
        <img src="images2/logo.png" alt="" align="left"/>
        <p align="right">旅游首页&nbsp;&nbsp;|&nbsp;&nbsp;登录&nbsp;&nbsp;|&nbsp;&nbsp;注册</p>
        </div>
        <hr color="#CCC"/>

效果图：
在这里插入图片描述

	2. 	    <div style="height:470px">
            <img src="images2/banner1.jpg" alt="" align="left" hspace="12" vspace="12"/>
      	    <div>
            <p align="content">
            	<strong>
                    <font face="微软雅黑" size="6" color="oranfe">说</font>
                    <font face="微软雅黑" size="7" color="oranfe">旅</font>
                    <font face="微软雅黑" size="6" color="oranfe">游</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>

效果图：
在这里插入图片描述

     3.     <div>
            <h2>马尔代夫</h2>
                <p>
                    <em>
                        <font color="#666666">
                            2015.04.24&nbsp;&nbsp;&nbsp;&nbsp;来源：一日驴友群-老牛
                        </font>
                    </em>
                </p>
            <hr color="#CCC" />
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伊露岛沙滩屋的构造很独特，彻底的南亚风情————雪白的圆形房子，尖尖的茅草屋顶，木质的框架，
                朴实的外表里面却十分的豪华，心情彻底放松。
            </p>
            <img src="images2/banner2.jpg" alt="" vaspce="20" />
        </div>

效果图：
在这里插入图片描述

    4.      <div>
            <img src="images2/icon.gif" alt="" />
            <hr color="#CCC" />
            <div>
                <img src="images2/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-04-02 15:38:37</font>
                    </p>
                    <p>
                        <font size="2">第一次用途牛，惊喜ing!</font>
                        <br />
                        <font color="#F60" size="2">来自：一日驴友网www.sdfes.com</font>
                    </p>
                </div>
                <hr color="#CCC" size="1" />
            </div>
            <div>
                <img src="images2/person2.jpg" alt="" align="left" hspace="10" />
                <div>
                    <p>
                        <font color="#F60">外星人</font>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <font size="2" color="#999">2015-03-02 15:25:26</font>
                    </p>
                    <p>
                        <font size="2">不错，很赞，好吃，下次再来！</font>
                        <br />
                        <font color="#F60" size="2">来自：一日驴友网wwwW.sdds.com</font>
                    </p>
                </div>
                <hr color="#CCC" size="1" />
            </div>
            <div>
                <img src="images2/person3.jpg" alt="" align="left" hspace="10" />
                <div>
                    <p>
                        <font color="#F60">so_cool</font>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <font size="2" color="#999">2016-05-26 15:45:25</font>
                    </p>
                    <p>
                        <font size="2">很好，都可以，没问题！</font>
                        <br />
                        <font color="#F60" size="2">来自：一日驴友网wwww.sdeqqqa.com</font>
                    </p>
                </div>
                <hr color="#CCC" />
            </div>
        </div>

效果图：
在这里插入图片描述

       5.   <div style="text-align: center;">
            <p>
                <font color="#1d5983" size="2">
                    一日网友意见留言板&nbsp;&nbsp;&nbsp;&nbsp;
                <font color="#333">
                    电话：12354687954</font>
                &nbsp;&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 AII Rights Reserved
                </font>
            </p>
            <p>
                <font color="#1d5983" size="2">
                    一日游公司  版权所有
                </font>
                
            </p>
        </div>

效果图：
在这里插入图片描述

总代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旅游网站</title>
</head>
<body>
<div style="width: 980px; margin:0 auto">
        <!--header begin-->
        <div style="height:56;">
        <img src="images2/logo.png" alt="" align="left"/>
        <p align="right">旅游首页&nbsp;&nbsp;|&nbsp;&nbsp;登录&nbsp;&nbsp;|&nbsp;&nbsp;注册</p>
        </div>
        <hr color="#CCC"/>
        <!--header end-->
        <!--说旅游begain-->
        <div style="height:470px">
            <img src="images2/banner1.jpg" alt="" align="left" hspace="12" vspace="12"/>
        <div>
            <p align="content">
                <strong>
                    <font face="微软雅黑" size="6" color="oranfe">说</font>
                    <font face="微软雅黑" size="7" color="oranfe">旅</font>
                    <font face="微软雅黑" size="6" color="oranfe">游</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-->
        <!--有你真好begain-->
        <div>
            <h2>马尔代夫</h2>
                <p>
                    <em>
                        <font color="#666666">
                            2015.04.24&nbsp;&nbsp;&nbsp;&nbsp;来源：一日驴友群-老牛
                        </font>
                    </em>
                </p>
            <hr color="#CCC" />
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伊露岛沙滩屋的构造很独特，彻底的南亚风情————雪白的圆形房子，尖尖的茅草屋顶，木质的框架，
                朴实的外表里面却十分的豪华，心情彻底放松。
            </p>
            <img src="images2/banner2.jpg" alt="" vaspce="20" />
        </div>
        <!--有你真好end-->
        <!--评论begain-->
        <div>
            <img src="images2/icon.gif" alt="" />
            <hr color="#CCC" />
            <div>
                <img src="images2/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-04-02 15:38:37</font>
                    </p>
                    <p>
                        <font size="2">第一次用途牛，惊喜ing!</font>
                        <br />
                        <font color="#F60" size="2">来自：一日驴友网www.sdfes.com</font>
                    </p>
                </div>
                <hr color="#CCC" size="1" />
            </div>
            <div>
                <img src="images2/person2.jpg" alt="" align="left" hspace="10" />
                <div>
                    <p>
                        <font color="#F60">外星人</font>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <font size="2" color="#999">2015-03-02 15:25:26</font>
                    </p>
                    <p>
                        <font size="2">不错，很赞，好吃，下次再来！</font>
                        <br />
                        <font color="#F60" size="2">来自：一日驴友网wwwW.sdds.com</font>
                    </p>
                </div>
                <hr color="#CCC" size="1" />
            </div>
            <div>
                <img src="images2/person3.jpg" alt="" align="left" hspace="10" />
                <div>
                    <p>
                        <font color="#F60">so_cool</font>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <font size="2" color="#999">2016-05-26 15:45:25</font>
                    </p>
                    <p>
                        <font size="2">很好，都可以，没问题！</font>
                        <br />
                        <font color="#F60" size="2">来自：一日驴友网wwww.sdeqqqa.com</font>
                    </p>
                </div>
                <hr color="#CCC" />
            </div>
        </div>
        <!--评论end-->
        <!--footer begain-->
        <div style="text-align: center;">
            <p>
                <font color="#1d5983" size="2">
                    一日网友意见留言板&nbsp;&nbsp;&nbsp;&nbsp;
                <font color="#333">
                    电话：12354687954</font>
                &nbsp;&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 AII Rights Reserved
                </font>
            </p>
            <p>
                <font color="#1d5983" size="2">
                    一日游公司  版权所有
                </font>
                
            </p>
        </div>
        <!--footer end-->
    </div>       
</body>
</html>

END