HTML作业

作业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>

效果图：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/1123.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android Studio Iguana | 2023.2.1配置优化

Android Studio Iguana | 2023.2.1配置优化

一. 前言 本篇文章记录最新版本的Android Studio的配置优化&#xff0c;写这篇文章的是由于电脑中的AS工具更新版本覆盖安装后&#xff0c;AS会经常卡死&#xff0c;Debug的时候也经常莫名其妙的断掉&#xff0c;非常影响工作效率&#xff0c;所以重新把配置环境整理一下&#…
阅读更多...
11.事件处理

11.事件处理

事件处理 我们可以使用 v-on 指令 (简写为 ) 来监听 DOM 事件&#xff0c;并在事件触发时执行对应的 JavaScript。用法&#xff1a;v-on:click"methodName" 或 click"handler" 事件处理器的值可以是 内联事件处理器&#xff1a;事件被触发时执行的内联 J…
阅读更多...
[阅读笔记21][RA-CM3]Retrieval-Augmented Multimodal Language Modeling

[阅读笔记21][RA-CM3]Retrieval-Augmented Multimodal Language Modeling

这篇论文是meta联合斯坦福在23年4月发表的论文&#xff0c;提出了一个使用外部知识检索增强的多模态模型。 这篇模型提出的RA-CM3模型是第一个能够检索并生成图像文本的多模态模型&#xff0c;在图像文本生成任务上优于现有的多模态模型&#xff0c;同时使用更少的训练量。 RA-…
阅读更多...
区间图着色问题：贪心算法设计及实现

区间图着色问题：贪心算法设计及实现

区间图着色问题&#xff1a;贪心算法设计及实现 1. 问题定义2. 贪心算法设计2.1 活动排序2.2 分配教室2.3 算法终止 3. 伪代码4. C语言实现5. 算法分析6. 结论7. 参考文献 在本文中&#xff0c;我们将探讨如何使用贪心算法解决一个特定的资源分配问题&#xff0c;即区间图着色问…
阅读更多...
物联网实战--驱动篇之(九)NB-IOT(BC260)

物联网实战--驱动篇之(九)NB-IOT(BC260)

目录 一、NB-IOT简介 二、NB-IOT要素 三、代码详解 四、平台端 一、NB-IOT简介 实际上&#xff0c;就是NB-Iot彻底引爆了物联网的&#xff0c;大概2018年左右&#xff0c;NB推广如火如荼&#xff0c;同时广域网、低功耗的LPWAN网络也逐渐传开&#xff0c;现在回头来看&…
阅读更多...
Python爬虫爬取中药材价格数据

Python爬虫爬取中药材价格数据

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…
阅读更多...
【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 全排列（难度⭐⭐）（62）

【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 全排列（难度⭐⭐）（62）

1. 题目解析 题目链接&#xff1a;46. 全排列 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 回溯算法是一种通过探索所有可能的候选解来找出所有解的算法。当候选解被确认不是一个解&#xff08;或者至少不是最后一…
阅读更多...
包装类的认识

包装类的认识

前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&#x1…
阅读更多...
网络编程 -- 简易TCP网络程序

网络编程 -- 简易TCP网络程序

一 字符串回响 1.1 核心功能 字符串回响程序类似于 echo 指令&#xff0c;客户端向服务器发送消息&#xff0c;服务器在收到消息后会将消息发送给客户端&#xff0c;该程序实现起来比较简单&#xff0c;同时能很好的体现 socket 套接字编程的流程。 1.2 程序结构 这个程序我们…
阅读更多...
论文笔记：Spatial-Temporal Large Language Model for Traffic Prediction

论文笔记：Spatial-Temporal Large Language Model for Traffic Prediction

arxiv 2024 时空大模型 1 方法 2 结果
阅读更多...
基于Zookeeper 简单实现分布式任务协调组件

基于Zookeeper 简单实现分布式任务协调组件

优质博文&#xff1a;IT-BLOG-CN 一、什么是 Zookeeper ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是Hadoop和Hbase的重要组件。 它是一个为分布式应用提供一致性服务的软件&#xff0c;提…
阅读更多...
【管理】杨三角模型

【管理】杨三角模型

企业成功 成功 战略 X 组织能力 1&#xff09;组织能力对于企业的重要性是和战略一样的&#xff1b; 2&#xff09;组织能力必须与战略适配&#xff0c;才能共同造就企业的成功。 员工思维&#xff1a;员工愿不愿意参与战略落地的实践&#xff1f;员工每天所关心、追求和重视的…
阅读更多...
【C++】哈希封装map与set

【C++】哈希封装map与set

目录 前言&#xff1a; 一&#xff0c;底层哈希结构 1-1&#xff0c;迭代器的封装 1-2&#xff0c;哈希表的封装 二&#xff0c;unordered_map的封装 三&#xff0c;unordered_set的封装 前言&#xff1a; 上一篇文章说明了哈希结构&#xff0c;这一篇文章来说明如何使用…
阅读更多...
安装WSL2

安装WSL2

PS C:\Users\pc> wsl --set-default-version 2 有关与 WSL 2 关键区别的信息&#xff0c;请访问 https://aka.ms/wsl2操作成功完成。PS C:\Users\pc> wsl --update 正在检查更新。 已安装最新版本的适用于 Linux 的 Windows 子系统。PS C:\Users\pc> wsl --shutdownPS…
阅读更多...
PyTorch深度解析：Tensor——神经网络的核心构建块

PyTorch深度解析：Tensor——神经网络的核心构建块

在深度学习和神经网络的研究与应用中&#xff0c;Tensor&#xff08;张量&#xff09;无疑是一个核心概念。特别是在PyTorch这一强大的深度学习框架中&#xff0c;Tensor更是扮演了举足轻重的角色。本文将深入探讨PyTorch中的Tensor&#xff0c;从其基本定义、特性、操作到实际…
阅读更多...
回溯算法练习day.3

回溯算法练习day.3

39.组合总和 链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返…
阅读更多...
uniapp Android 插件开发教程

uniapp Android 插件开发教程

一、下载uniapp提供的SDK Android 离线SDK - 正式版 | uni小程序SDK 二、在uniapp创建一个项目 查看包名&#xff1a;发行--> 原生app 云打包 三、进入dcloud官网 开发者中心 进入 应用管理 --> 我的应用 --> 点击应用名称-->各平台信息-->新增 这里需要这…
阅读更多...
SQLite FTS3 和 FTS4 扩展(三十二)

SQLite FTS3 和 FTS4 扩展(三十二)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite FTS5 扩展&#xff08;三十&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 概述 FTS3 和 FTS4 是 SQLite 虚拟表模块&#xff0c;允许用户执行 对一组文档进行全文搜索。最常见&#xff08;和最…
阅读更多...
paddle.net怎么付款？paddle.net怎么订阅？

paddle.net怎么付款？paddle.net怎么订阅？

有需要的小伙伴可以使用Fomepay的卡进行订阅支付&#xff0c;我这里使用的是491090卡段&#xff0c;开卡步骤很简单&#xff0c;点击获取卡片 1、注册 2、填写姓名使用拼音或者英文名都可以 3、支付宝或者微信支付
阅读更多...
基于51单片机的数字万用表设计

基于51单片机的数字万用表设计

基于51单片机的数字万用表设计 &#xff08;仿真&#xff0b;程序&#xff0b;原理图PCB&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.能够切换测量电压、电流、电阻&#xff1b; 2.数码管实时显示测量值&#xff1b; 3.短路报警&#xff1b; 4.测量…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023