HTML作业

最新推荐文章于 2024-05-20 22:38:25 发布
最新推荐文章于 2024-05-20 22:38:25 发布
阅读量170 收藏
点赞数 1
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuperBigToilet/article/details/137265944
版权

作业1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .down{
            background-color: orange;
            border: none;
            width: 200px;
            height: 80px;
            text-align: center;
            margin: auto;
        }
        .down1{
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button class="download"><a href="#" target="_blank" class="download">立即下载</a></button>
</body>
</html>

效果图

作业2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            font-size: smaller;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><h2>三巨头</h2></td>
        </tr>
        <tr>
            <td>
                <img src="./img/蝙蝠侠.png" width="380" height="200">
            </td>
            <td>
                <img src="./img/超人.png" width="380" height="200">
            </td>
            <td>
                <img src="./img/神奇女侠.png" width="380" height="200">
            </td>
        </tr>
        <tr>
            <td>
                蝙蝠侠
            </td>
            <td>
                超人
            </td>
            <td>
                神奇女侠
            </td>
            <tr class="box">
                <td>
                    哥谭市亿万富豪，从小见证父母死在自己的眼前，长大后成为复仇的化身，守护着哥谭的安全，诈死后重出江湖加入正义联盟
                </td>
                <td>
                    最后的氪星之子，肩负着成为两世界的希望之桥，一生行驶善事，只为自己的世界带来正义，正义联盟里的T0级战力，也是由他带领建立的正义联盟
                </td>
                <td>
                    是奥林匹斯众神之王宙斯和亚马逊女王希波吕忒的私生女，拥有半神血统，正义联盟里最有荣誉感的战士，也是正义联盟里的最强战力之一
                </td>
            </tr>
        </tr>
    </table>
</body>
</html>

效果图：

作业3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .menu {
            list-style: none;
            width: 780px;
            height: 50px;
            border: 1px saddlebrown solid;
            margin: auto;
            background-color: #1B2534;
        }
        .menu li {
            list-style: none;
            float: left;
            font-size: 20px;
            cursor: pointer;
            background-color: #1b2535;
            text-align: center;
            height: 50px;
            width: 130px;
            line-height: 50px;
        }
        .menu li:hover {
            background-color: black;
        }
        .menu  li a {
            color: white;
            text-decoration: none;
        }
        .menu ol > li {
            background-color: rgb(30, 30, 67);
        }
        .menu > li > ol {
            display: none;
        }
        .menu > li:hover ol{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#">百度游戏|乐玩</a>
            <ol>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ol>
        </li>
        <li>
            <a href="#">首页</a>
            <ol>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ol>
        </li>
        <li>
            <a href="#">商城</a>
            <ol>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ol>
        </li>
        <li>
            <a href="#">页游</a>
            <ol>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ol>
        </li>
        <li>
            <a href="#">排行榜</a>
            <ol>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ol>
        </li>
        <li>
            <a href="#">繁星计划</a>
            <ol>
                <li><a href="#">菜单1</a></li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a></li>
            </ol>
        </li>
    </ul>
</body>
</html>

效果图：

作业4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ui{
            list-style: none;
            width: 350px;
            height: 60px;
        }
        ui>li{
            width: 50px;
            height: 50px;
            float: left;
            color: black;
            line-height: 50px;
            text-align: center;
            border-bottom:1px solid black;
            border-top: 1px solid black;
            border-right: 1px solid black;
            cursor: pointer;
        }
        .button1{
            border-left: 1px solid black;
        }
        ui>li:hover{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div>
        <ui class="button1">
            <li><<<</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>>>></li>
        </ui>
    </div>
</body>
</html>

效果图：

作业5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 480px;
        height: 200px;
        border: 1px solid black;
        border-radius: 10px;
    }
    .box1{
        width: 150px;
        height: 20px;
        border: 1px solid black;
        font-size: small;
    }
</style>
<body>
    <div class="box">
        <table>
            <tr>
                <td><h4>Bootstrap v3</h4></td>
                <td><h4>Bootstrap v4</h4></td>
                <td><h4>Bootstrap v5</h4></td>
            </tr>
            <tr>
                <td>✅支持IE8+浏览器</td>
                <td>✅支持IE10+浏览器</td>
                <td>✅支持Flexbox 布局</td>
            </tr>
            <tr>
                <td>❌依赖</td>
                <td>不依赖jQuery</td>
                <td>✅支持CSS自定义属</td>
            </tr>
            <tr>
                <td><div></div></td>
                <td><div></div></td>
                <td>❌不支持IE浏览器</td>
            </tr>
            <tr>
                <td><div class="box1">Bootstrap v3 中文文档</div></td>
                <td><div class="box1">Bootstrap v4 中文文档</div></td>
                <td><div class="box1">Bootstrap v5 中文文档</div></td>
            </tr>
        </table>
    </div>
</body>
</html>

效果图：

作业6:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1{
        width: 565px;
        height: 350px;
        border: 1px solid gray;
        border-radius: 7px;
    }
    .box2{
        margin: auto;
        text-align: center;
    }
</style>
<body>
    <div class="box1">
        <table>
            <tr>
                <td><img src="./img/作业.png" alt=""></td>
            </tr>
            <tr id="a">
                <td><div class="box2">React</div></td>
            </tr>
            <tr>
                <td>React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库。</td>
            </tr>
        </table>
    </div>
</body>
</html>

效果图：

SuperBigToilet
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html作业 当当图书榜
07-17
完整版本可运行，本压缩包为html+css课堂作业，可做参考答案使用
一个简单的网页设计HTML5作业
好好读书
06-26 8万+
简单的html设计作业，初次学习，希望指正！
【HTML】HTML作业设计---家具网站设计与开发
coding加油站
08-20 2575
html作业，html课程设计，家具购物网站，购物网站
html作业 音乐排行榜
m0_56424512的博客
11-17 1669
html作业
HTML网页设计制作大作业（div+css）
IT_A_bin的博客
11-25 10万+
话不多说，直接上效果图： 历史介绍 行政区划： 地理环境 著名景点： 美食小吃 工艺品 联系我们 部分项目结构 老师要求的十几个页面20几张图片以及一些跳转，使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂 部分代码 偷个懒，就用notepad打开。不用H-build打开了。哈哈哈 另外有同学要是需要源码的话可以联系我呀。 大家加油！奥利给！ ...............
HTML作业-我的大学生活
学生期末作业
06-15 4392
HTML期末大作业-我的大学生活，共6个网页（HTML+CSS+JavaScript） 部分网页截图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,m...
html网页设计小作业(个人主页)
m0_53415522的博客
11-08 5万+
简易的个人网页小作业，只用了html+css 布局制作，没啥好说的，直接上图！！！
HTML初学者作业
weixin_53089473的博客
03-02 2232
HTML初学者第一课作业内容： 初学者理解浅薄，有错误在所难免，可以和楼主交流以助于及时改正 结合今天上课所讲内容，完成上传图片页面样式开发 要求如下: 1. 配色，背景图片根据自己喜好，上网查找素材。 header 和footer 地方，可以根据自己想法，设计美化一下 2. banner地方，可以点击跳转，点击后，新开网页跳转到百度吧 3. 表单项目，可以根据自己想法增加项目，元素需要增加2项以上check 4.作业成果物: 提交html资源的源码 遇到的困难： 1.表格table &lt.
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 29万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
HTML作业-商城网页
学生期末作业
06-15 1万+
HTML作业-商城网页（HTML+CSS+JavaScript）共四个页面！ 部分网页源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手机详情页</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个..
【HTML】HTML作业---管理系统界面
coding加油站
08-20 1万+
html作业，html大作业，资产管理系统，管理系统模版
html作业文件lksjdlflajrfalwfiejliorae
03-29
html作业文件lksjdlflajrfalwfiejliorae
HTML大作业源码
12-30
简单的HTMl大作业源代码，交个作业没什么问题，可供参考与学习
HTML作业-仿网易云音乐项目.rar
06-11
HTML作业-仿网易云音乐项目.rar
适合大学生html作业，简单易懂
05-31
使用html，css，js完成的个人主页，适合大学生html小作业，初学者学习，通俗易懂！使用html，css，js完成的个人主页，适合大学生html小作业，初学者学习，通俗易懂！使用html，css，js完成的个人主页，适合大学生...
html 列表、有序列表、无序列表、列表嵌套 Web前端开发技术
最新发布
jingyu飞鸟
05-20 415
为首标记，以...
Web开发——HTML&CSS
一切皆是定数的博客
05-20 152
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 912
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
HTML常见标签-段落标签
weixin_44201223的博客
05-14 269
段落标签
html作业源码分享
04-23
当然，我可以给你介绍一下HTML作业源码分享。HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。下面是一个简单的HTML作业源码示例： ```html <!DOCTYPE html> <html> 我的作业 欢迎来到我的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值