html练习题1 9_综合案例_网站首页.html

于 2023-02-06 15:02:44 发布
阅读量329 收藏
点赞数
分类专栏： web_html 文章标签： java html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wowocpp/article/details/128901851
版权

html练习题1

9_综合案例_网站首页.html
代码如下：

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

    <!--采用table来完成布局-->
    <!--最外层的table，用于整个页面的布局-->
    <table width="100%" align="center">
       <!-- 第1行 -->
        <tr>
            <td>
                <img src="image/top_banner.jpg" width="100%" alt="">
            </td>
        </tr>

        <!-- 第2行 -->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <img src="image/logo.jpg" alt="">
                        </td>
                        <td>
                            <img src="image/search.png" alt="">
                        </td>
                        <td>
                            <img src="image/hotel_tel.png" alt="">
                        </td>
                    </tr>
                </table>

            </td>
        </tr>

        <!-- 第3行 -->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr bgcolor="#ffd700" align="center" height="45" >
                        <td>
                            <a href="">首页</a>
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>

                        <td>
                            门票
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 第4行 轮播图 -->
        <tr>
            <td>
                <img src="image/banner_3.jpg" alt="" width="100%">
            </td>
        </tr>

        <!-- 第5行 黑马精选-->
        <tr>
            <td>
                <img src="image/icon_5.jpg" alt="">
                黑马精选
                <hr  color="#ffd700" >
            </td>
        </tr>

        <!-- 第6行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>

                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 第7行 国内游 -->
        <tr>
            <td>
                <img src="image/icon_6.jpg" alt="">
                国内游
                <hr  color="#ffd700" >
            </td>
        </tr>

        <!-- 第8行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="image/guonei_1.jpg" alt="">
                        </td>

                        <td>

                            <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr>
                        <td>

                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>


                    </tr>
                </table>
            </td>
        </tr>

        <!-- 第9行 境外游 -->
        <tr>
            <td>
                <img src="image/icon_7.jpg" alt="">
                境外游
                <hr  color="#ffd700" >
            </td>
        </tr>

        <!-- 第10行 -->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="image/jiangwai_1.jpg" alt="">
                        </td>

                        <td>

                            <img src="image/jiangxuan_3.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                           <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                           <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr>
                        <td>

                           <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                           <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>

                        <td>

                           <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen; 699</font>
                        </td>


                    </tr>
                </table>
            </td>
        </tr>
        <!-- 第11行 -->
        <tr>
            <td>
                <img src="image/footer_service.png" alt="" width="100%">
            </td>
        </tr>

        <!-- 第12行 -->
        <tr>
            <td align="center" bgcolor="#ffd700" height="40">
                <font color="gray" size="2">
                江苏传智播客教育科技股份有限公司
                版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882
                </font>
            </td>
        </tr>
        
    </table>


</body>
</html>

最终呈现的效果如下：

wowocpp
关注
专栏目录
HTML+CSS3 表单与表格综合案例
qq_55786319的博客
11-18 1359
表单+表格的简单运用 1.今日份h5课堂作业 效果图： 思路：表格与表单的综合，要做出宽高不一的单元格，但由于表格的自适应性，所以我用了几个表格来装文字。再就是几个简单的表单控件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>青年自组织状况调查问卷</title> <style> .head{ text-
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2600
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
HTML实战案例
01-09
HTML+CSS各阶段实战案例代码，适合html初学者实战练习，绝对正确无误！
HTML案例练习一
weixin_30377461的博客
07-26 183
发现其实JS也是挺容易的，也挺好玩的，写的一个控制图片移动的小案例，对DOM机制还是不怎么熟。 <html> <head> <style type = "text/css"> </style> <script language = "javascript" type = "text/javascript"&g...
html相关案例练习题
卓卓卓
10-16 1361
案例一 <!doctype html> <html> <head> <meta charset="utf-8"> <title>H5,200行代码实现粒子漩涡特效</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background
【HTML5】实例练习
alexlau2016的博客
10-08 280
1.许多时髦的网站都提供视频。如果在网页上展示视频？ <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"&...
HTML练习实例
Roxannekkk的博客
10-26 2920
1.这是英雄联盟在百度百科里面的一段描述，使用的就是html的方式编写的。当然，你如果以前没有接触过html，是不会编写出这样的效果的。 接下来就会以这个效果为目标，缺什么学什么。本效果需要用到 标题 段落 粗体 斜体 删除效果 下划线 等等知识点，每学习一个知识点，就能完善一部页面效果。 最后做出一模一样的效果来。 <html> <p> <h1 align='left'> 英雄联盟 （电子竞技类游戏）</h1> </p> <p>&l
day27_综合案例3_docx1
08-04
在本次综合案例中，我们关注的是如何在JavaWeb环境下实现旅游线路的查询功能。这个功能涉及到前端页面交互、参数传递以及后端处理，是Web应用中常见的数据检索操作。我们将深入探讨两个关键知识点：1.1 旅游线路查询...
javabishi.rar_.CHM
09-19
在这个案例中，"javabishi"很可能是一个包含各种Java编程题目和解答的集合，旨在帮助求职者或学习者提升Java编程技能。 【描述】"非常详尽的java比试题，和大家一起共享！求职时很有用的哦！" 暗示了这个资源是专门...
《JavaWeb程序设计案例教程》_课后习题---（复习3）.rar
12-19
《JavaWeb程序设计案例教程》是一本深入浅出地介绍JavaWeb开发的教材，而课后习题则是学习过程中的重要组成部分。通过解答这些习题，学生能够巩固所学的知识，提升实际编程能力。这份“复习3”的资料，无疑是针对...
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
300道HTML、CSS习题及面试题（含答案）
01-14
该pdf适用于前端及javaEE页面设计方面的初学者，内容比较丰富，特此分享。
html js实例
11-12
html js实例
html案例详解（一）
weixin_30588907的博客
05-22 109
一、入门。 <html> <!-- 头信息的作用 1. 可以设置网页的标题。 2. 可以通知浏览使用指定的码表解释html页面. 3. --> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /&...
html简单网页代码 案例_HTML+CSS静态网页练习案例（转动的八卦图）
weixin_39539807的博客
11-14 1044
需要的知识1.div标签的运用2.id选择器，后代选择器，3.简单的css样式长，宽，高，背景颜色，浮动，绝对定位，边框弧度4.div的布局特点静态的完成效果动态效果（点击链接观看）太极页面​1446450047.github.io开始HTML部分<!DOCTYPE html> HTML部分说明1.其中最外面的id为八卦-wrapper为包住八卦的最大的div2.id 为八卦的div为...
菜鸟教程-HTML小白之实例练习-0729
Lily_25的博客
07-29 350
尝试用这种方式记录学习内容，加油~
html练习题及答案,HTML和JavaScript综合练习题2014答案
weixin_39928768的博客
06-07 312
HTML和JavaScript综合练习题一、 单项选择1. Web使用( D )在服务器和客户端之间传输数据。A．FTP B. Telnet C. E-mail D. HTTP2. HTTP服务默认的端口号是( D )。A. 20 B. 21 C. 25 D. 803. HTML是一种标记语言，由( C )解释执行。A．Web服务器 B.操作系统C. Web浏览器 ...
HTML知识点总结（练习题）
kun的博客
11-11 1005
1、HTML文档的基本结构 2、status的三个常见状态的意思①200   ②304   ③404 3、&lt;meta/&gt;标签的三个常见属性 4、转义字符       ①&lt;     ②&gt;      ③空格     ④&amp; 5、HTML添加注释方法   css添加注释方法    JS添加注释方法 6、常见标签 ①文本加粗（两个），这两个标签的区别，推荐用哪个 ...
【案例练习】04—40个适合初学者练习HTML和CSS的案例
web前端开发
01-11 795
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361翻译...
HTML与CSS入门经典学习资源大放送
此外，这本书可能还包含了一些辅助学习资源，如练习题、示例代码和在线资源，以帮助读者巩固所学知识。对于那些想要进入网页设计领域或提升现有技能的人来说，"HTML与CSS入门经典(第7版)"是一个理想的学习起点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值