网页页面设计案例【HTML】

最新推荐文章于 2024-05-21 11:22:42 发布
最新推荐文章于 2024-05-21 11:22:42 发布
阅读量189 收藏
点赞数
分类专栏： 笔记 日常学习 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33755492/article/details/117948161
版权

只 使用 HTML，设计 一个旅游网页的页面格式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旅游网</title>
</head>
<body>

<table width="100%" align="center">
<!--第一行-->
    <tr>
        <td>
            <img src="../image/1.jpg" width="100%" height="40">
        </td>

    </tr>
    <!--第二行-->
    <tr>
        <td>
<!--            在一行列表里，再嵌套一个列表，并 设定列数 和 行数-->
            <table width="100%" align="center">
                <tr>
                    <td><img src="../image/002.PNG.jpg" width="100%" height="25"></td>
                    <td><img src="../image/004.PNG" width="100%" height="25"></td>
                    <td><img src="../image/003.PNG.jpg" width="100%" height="25"></td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第三行-->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#daa520" align="center" height="1">
                    <td>首页</td>
                    <td>门票</td>
                    <td>酒店</td>
                    <td>香港车票</td>
                    <td>出境旅游</td>
                    <td>国内游</td>
                    <td>港澳游</td>
                    <td>抱团定制</td>
                    <td>全球定制</td>
                    <td>收藏排行榜</td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第四 行-->
    <tr>
        <td>
            <img src="../image/喝.jpg" width="100%">
        </td>
    </tr>
    <!--第5行-->
    <tr>
        <td>
            <img src="../image/昏.jpg" width="20%">
            笑死精选
            <hr color="gold">
        </td>
    </tr>
    <!--第6行-->
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <img src="../image/timg%20(10).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen899</font>
                    </td>
                    <td>
                        <img src="../image/timg%20(9).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen899</font>
                    </td>
                    <td>
                        <img src="../image/timg%20(11).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第7行-->
    <tr>
        <td>
            <img src="../image/海边女孩.jpg" width="20%">
            笑死精选
            <hr color="gold">
        </td>
    </tr>
    <!--第8行-->
    <tr>
        <td>
            <table>
                <tr>
                    <td rowspan="2">
                        <img src="../image/timg%20(10).jpg" width="100%"  >

                    </td>
                    <td>
                        <img src="../image/timg%20(9).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen899</font>
                    </td>
                    <td>
                        <img src="../image/timg%20(11).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen;899</font>
                    </td>
                </tr>
                <tr>

                    <td>
                        <img src="../image/timg%20(9).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen899</font>
                    </td>
                    <td>
                        <img src="../image/timg%20(11).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第9行-->
    <tr>
        <td>
            <img src="../image/34CD43CC3451C8800393132D997A5A85.jpg" width="20%">
            笑死精选
            <hr color="gold">
        </td>
    </tr>
    <!--第10行-->
    <tr>
        <td>
            <table>
                <tr>
                    <td rowspan="2">
                        <img src="../image/timg%20(10).jpg" width="100%"  >

                    </td>
                    <td>
                        <img src="../image/timg%20(9).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen899</font>
                    </td>
                    <td>
                        <img src="../image/timg%20(11).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen;899</font>
                    </td>
                </tr>
                <tr>

                    <td>
                        <img src="../image/timg%20(9).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen899</font>
                    </td>
                    <td>
                        <img src="../image/timg%20(11).jpg" width="100%">
                        <p>
                            蜜月旅行+月球之旅
                        </p>
                        <font color="red"> &yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第11行-->
    <tr>
        <td>
            <img src="../image/timg.jpg" width="100%" height="30">
        </td>
    </tr>
    <!--第12行-->
    <tr>
        <td align="center" bgcolor="#d2691e">
            <font color="gray" size="2"> 杀人补偿名公司出品</font>
        </td>
    </tr>

</table>

</body>
</html>

 

承北风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html案例
ho622的博客
03-04 2313
案例1 01.第一个HTML文件.html <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> [外链图片转存e\案例1...
完整的html网站案例
09-06
完整的HTML网站案例，HTML+JAVASCRIPT+CSS+框架集
16个精美的 HTML5 作品集网站设计案例
weixin_34399060的博客
10-30 1016
　　今天分享的作品集网站有些特别，因为他们都是使用 HTML5 制作的。对于设计师来说，为了吸引注意力，作品集必须展示出你的能力，这有点像制作简历，要让人们看到你所擅长的，突出的部分，这是一次推销自己的机会。如果你正想设计个人作品集网页，下面这些案例会对你很有帮助。 1) Pixelcriativo 2) Kiranowal   3) Elladesign   4) Ell...
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
网页设计与制作 | HTML+CSS+JS
05-21 684
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1 网页简介：此作
HTML实例—以一个简单网页为例
gsonya的博客
07-13 1万+
HTML实例 1、原型与实例对比 （1）原型 （2）实例 2、详情 2.1 布局总览 2.2 布局分述 （1）标题+搜索 分两块内容，用<span> span1:文字：gsonya-HTML span2:输入框+按钮 （2）导航栏 将这四个内容设置为链接，首页刷新当前页面；HTML实例链接到第（5）块内容；其它和联系我暂时未设置链接内容。 （3）轮播图注释 鼠标移入时，“图1”显示图1内容的解释。主要是通过left:-999em;设置解释内容为
静态网页设计及实例html
09-06
网页设计 html 静态网页 含实例 网页设计 html 静态网页 含实例
HTML页面网页设计案例.zip
最新发布
06-09
在这个"HTML页面网页设计案例.zip"压缩包中，我们很可能会找到一系列HTML代码示例，这些示例展示了如何使用HTML来构建各种类型的网页。 HTML由一系列元素组成，每个元素都用标签来定义。这些标签告诉浏览器如何显示...
网页设计案例.rar
06-09
在这个“网页设计案例.rar”压缩包中，我们有四个使用HTML和CSS构建的简单页面示例，这对于初学者来说是一个很好的学习资源。本文将深入探讨HTML和CSS的基础知识，以及如何在Windows 10环境下使用开发工具...
网页设计案例网页模板
01-22
总的来说，这个“网页设计案例网页模板”压缩包是一个丰富的学习资源，涵盖了从基础的HTML语法到高级的响应式设计策略等多个方面。无论是初学者还是经验丰富的设计师，都可以从中汲取灵感，提升自己的设计水平。
100个精彩网页设计案例
12-19
"100个精彩网页设计案例"的资源集合为设计师和前端开发者提供了丰富的灵感来源和学习素材，帮助他们提升自己的技能水平。 首先，我们来看"超强HTML和xhtml，CSS精品学习资料下载汇总.html"这个文件。HTML...
HTML5 网页设计案例课堂
08-18
在这个"HTML5网页设计案例课堂"中，我们可以深入探讨HTML5的关键概念和技术，帮助你成为一位出色的网页设计师。 1. **语义化标签**：HTML5引入了更多具有语义性的元素，如、、、、和等，这些标签让网页结构更加清晰...
我的html案例
07-10
html是架构，css是修饰，JavaScript是行为。我的案例1是基本的html架构，是一个登陆和注册案例
html5网页前端设计案例
07-07
html5网页前端设计案例，精选的商业网页案例，实用经典。
html5 CSS3个人主页界面设计源码
01-29
故不能学者：遇师则不中，用心则不专，好之则不深，就业则不疾，辩论则不审，教人则不精.html5 CSS3个人主页界面设计源码 http://blog.csdn.net/rochsoft/article/details/50573441
简单HTML网页制作 实例
xiaoxiaoxiexies的博客
04-25 2万+
HTML网页制作 1.新建文本文档，以“html”结尾。 2.用html网页逻辑器打开，这里我们用Sublime Text打开。 在标签<body></body>里写文本,<h1></h1>意思是把文本设置为标题， align里设置文本居中属性。 html基本结构 <html></html> 段落标签 <p></p> 用来分段用的 空格标签 &nbsp 有几个空格就写几个 &nbsp 标题标签
html静态网页实例一（附完整代码）
热门推荐
全栈川川
10-31 6万+
这个例子我们做一个游戏静态页面，自动跳转到我们想要玩的游戏或者视频等网站 大家也可以根绝我的代码，适当修改一些信息，但是套用我的这个模板请注释下来自我这，我也是初学者，辛辛苦苦写了几个小时，尊重下劳动成果 先看效果图：我以张杰为背景图，里面是各种网站跳转，比如我点击：冰火人，他就会跳转到4399的冰火人游戏界面。 ok,上代码，我觉得比较简单，就没注释，希望能看懂： <!DOCTYPE html> <html> <head lang="en"> <meta cha
html静态网页实例二（附完整代码）
全栈川川
10-31 3万+
这个例子是一个旅游网页，参考别人模板修改的 效果图： 参考代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""&gt
一个HTML页面案例学会简易前端代码
m0_66631425的博客
08-16 1508
div>：定义文档中的一个区块或容器，用于组织和样式化内容。：定义文档中的一个行内区域，通常用于设置样式或标记特定的文本。：定义文档的标题，显示在浏览器的标题栏或标签页上。：定义无序列表，显示为项目的列表，项目间没有特定的顺序。：定义HTML文档的头部，包含关于文档的元信息。：定义有序列表，显示为项目的列表，项目按照顺序编号。到：定义标题，从大标题到小标题的六个级别。：定义表单，用于收集用户输入的数据。
用html做网页作品,HTML5实例:用HTML5制作的网页的15个优秀案例
weixin_35291771的博客
06-01 6775
在这里分享给大家精心挑选的15个HTML5网站模板，这些模板涉及商业、投资、简历、画廊、艺术、慈善、房地产，以及食品等等方面。1. Zeni – Responsive HTML5 Portfolio TemplateDemo Download2. Torn – HTML5 Template 5 SkinsDemo Download3. Folder – Responsive Showcase Te...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值