二级web基础操作题练习

---------要求--------- 

利用HTML和CSS实现如图所示页面:


---------代码示例--------- 

分析:该页面包含一个标题、一个副标题、“姓名信息”的表格,并且有一段文字提示用户仔细填写,使用内联CSS来控制HTML页面的视觉外观,如颜色、边框等。

<html>
<head>
<!-- CSS样式表开始 -->
<style type="text/css">/* 设置网页背景颜色为黄色 */
body {background-color: yellow}/* 设置标题栏的背景颜色 */
h1 {background-color: #00ff00}/* 设置表格的背景颜色为透明 */
table{background-color: transparent}/* 设置类名为'aa'的元素背景颜色 */
.aa {background-color: rgb(0,255,255)}/* 设置表格边框合并,去除单元格间隔 */
table{border-collapse:collapse;}/* 设置表格、单元格和表头的边框样式 */
table, td, th{border:1px solid black;}/* 设置表头单元格的背景颜色 */
th{background-color:green;/* 设置表头文字的颜色 */color:white;  }</style>
<!-- CSS样式表结束 --></head>
<body><!-- 设置一级标题内容 -->
<h1>人员管理</h1><!-- 设置二级标题内容 -->
<h2>姓名信息</h2><!-- 创建一个包含两列的表格 -->
<table>
<tr>
<!-- 表头第一列 -->
<th>Firstname</th>
<!-- 表头第二列 -->
<th>Lastname</th>
</tr>
<!-- 第一行数据 -->
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<!-- 第二行数据 -->
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table><!-- 使用类名'aa'设置段落背景颜色 -->
<p class="aa">请认真填写。</p></body>
</html>

---------类选择器的常见使用示例---------

1. 多个元素共用样式

<!-- HTML部分 -->
<div class="shared-style">段落一</div>
<div class="shared-style">段落二</div>
/* CSS部分 */
.shared-style {color: blue;font-size: 24px;
}/* 两个<div>标签共享了.shared-style类,它们将显示同样的字体颜色和大小。*/

2. 特定效果实现 - 按钮高亮

<!-- HTML部分 -->
<button id="myButton" onclick="this.classList.toggle('highlight')">点击我</button>
/* CSS部分 */
#myButton {padding: 10px;background-color: gray;
}.highlight {background-color: orange;
}/* 当用户点击按钮时,会触发JavaScript函数,使按钮的背景色变为橙色(highlight类)。再次点击将恢复原状。*/

3. 响应式设计 - 小屏设备下隐藏元素 

<!-- HTML部分 -->
<nav><ul><li><a href="#">Home</a></li><li><a href="#">Services</a></li><li class="hide-on-small-screen"><a href="#">About Us</a></li><li class="hide-on-small-screen"><a href="#">Contact</a></li></ul>
</nav>
/* CSS部分 */
.hide-on-small-screen {display: block; /* 默认情况下可见 */
}@media (max-width: 600px) {.hide-on-small-screen {display: none; /* 当屏幕宽度小于等于600px时,该元素不可见 */}
}
/* .hide-on-small-screen类用于根据屏幕尺寸决定是否显示相关链接。*/
/* 当屏幕宽度小于或等于600px时,这些链接将被隐藏。这有助于保持移动设备上的界面清晰简洁。*/

 

 

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

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

相关文章

x264 码率控制 MBtree 原理:数学模型

x264 码率控制 MBtree 原理 关于x264 码率控制中 MBtree 算法的原理具体可以参考:x264 码率控制MBtree原理。关于macroblock_tree函数分析可以参考:x264 码率控制 MBtree 原理:macroblock_tree 函数。关于 macroblock_tree_propagate函数的分析可以参考:x264 码率控制 MBtr…

算法题--华为od机试考试(最大坐标值、寻找最富裕的小家庭、两个字符串间的最短路径问题)

目录 最大坐标值 题目描述 输入描述 输出描述 示例1 输入 输出 说明 解析 答案 寻找最富裕的小家庭 题目描述 输入描述 输出描述 示例1 输入 输出 说明 解析 答案 两个字符串间的最短路径问题 题目描述 ​编辑 输入描述 输出描述 示例1 输入 输出 …

【Linux】解决windows下文件到linux下文件格式^M的问题之tr命令、sed命令

方法一&#xff1a; sed -i s/^M/ /g 方法二 &#xff1a; tr -d "^M" 1. 删除 -d 2. 替换字符

【C++STL】Vector扩容机制

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

论文阅读--《FourierGNN:从纯图的角度重新思考多元时间序列预测》

Yi K, Zhang Q, Fan W, et al. FourierGNN: Rethinking multivariate time series forecasting from a pure graph perspective[J]. Advances in Neural Information Processing Systems, 2024, 36. 本次介绍的文章来自NeurIPS 2023&#xff0c;关于多变量时间序列的预测 摘要…

Java基础 - 练习(九)反射的常用方法(访问字段)

对任意的一个Object实例&#xff0c;只要我们获取了它的Class&#xff0c;就可以获取它的一切信息。 Class类提供了以下几个方法来获取字段&#xff1a; Field getField(name)&#xff1a;根据字段名获取某个public的field&#xff08;包括父类)Field.getDeclaredField(name)…

excel表格加密:电脑文件加密的5个方法介绍【新手篇】

为了防止数据泄露&#xff0c;编辑好表格文件后一般都会加上密码。敏感数据的泄露会导致严重的商业损失和声誉损害。Excel表格加密方法有很多&#xff0c;包括金舟文件夹加密大师、金舟ZIP解压缩、工作簿密码设置等方法。 下面分享5个excel表格加密方法&#xff0c;希望能够帮到…

canvas入门详细教程(W3C)

文章目录 一、线形1、画线形之前&#xff0c;最基本的方法需要知道&#xff1a;2、线形的样式设置&#xff1a;3、不同的线形路径给不同的样式设置-需要知道俩个方法&#xff1a;4、画线形三角5、画贝塞尔曲线6、画虚线 二、画矩形1、绘制空心矩形有三种方法2、绘制填充矩形有俩…

C++——布隆过滤器

目录 布隆过滤器的提出 布隆过滤器的概念 布隆过滤器的基本原理和特点 布隆过滤器的实现 布隆过滤器的插入 布隆过滤器的查找 布隆过滤器的删除 布隆过滤器的优点 布隆过滤器的缺陷 布隆过滤器使用场景 布隆过滤器的提出 在注册账号设置昵称的时候&#xff0c;为了保证…

JS中bind、call、apply之间有什么区别

JavaScript 中的 bind、call 和 apply 方法都是预定义的函数原型方法&#xff0c;这三个方法都可以用来改变函数的调用上下文&#xff0c;也就是 this 的指向。 但它们在参数传递和返回结果上有所区别&#xff1a; call 方法&#xff1a; call 方法调用一个对象的一个方法&…

PUBG绝地求生·阿童木透视自瞄免费辅助 v6.24

在享受电子游戏的精彩世界时&#xff0c;家庭用户的数据安全和系统稳定性是不容忽视的重要方面。为了确保在使用游戏辅助工具时既能获得愉悦的游戏体验&#xff0c;又能保障个人数据和系统的安全&#xff0c;这里有一些建议和操作指南需要大家注意。 对于家庭用户而言&#x…

Java HashMap 简介

HashMap 简介 HashMap 主要用来存放键值对&#xff0c;它基于哈希表的 Map 接口实现&#xff0c;是常用的 Java 集合之一&#xff0c;是线程不安全的。 HashMap&#xff1b;可以存储 null 的 key 和 value &#xff0c;但 null 作为 key 只能有一个&#xff0c;null 作为值可以…

MAC Address

文章目录 1. 前言2. MAC Address2.1 MAC 地址格式2.2 Locally Administered MAC Address2.3 MAC 单播 和 多播 3. 参考资料 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. MAC Address 2.1 MA…

(八)Linux的进程与线程

多任务处理是指用户可以在同一时间内运行多个应用程序,每个正在执行的程序被称为一个任务。一个任务包含一个或多个完成独立功能的子任务,其中子任务可以是进程或线程。Linux就是一个支持多任务的操作系统,比起单任务系统它的功能增强许多。 一.进程 进程:一个具有独立功…

nodejs微信支付安全证书下载,亲测有效

微信支付是目前非常流行的支付方式之一&#xff0c;很多开发者在集成微信支付时需要下载并使用微信支付的安全证书。本文将详细介绍如何在Node.js环境中下载微信支付安全证书&#xff0c;并提供一个亲测有效的示例代码。 前置条件 在开始之前&#xff0c;请确保你已经具备以下…

3d渲染软件有哪些(1),渲染100邀请码1a12

3D渲染是把三维模型转成2D图像的过程&#xff0c;领域不同常用的软件也不一样&#xff0c;今天我们就简单介绍几个。 在介绍前我们先推荐一个设计人员常用到的工具&#xff0c;就是网渲平台渲染100&#xff0c;通过它设计师可以把本地渲染放到云端进行&#xff0c;价格也不贵&a…

永洪bi里topN的设置/用法

要实现的效果&#xff1a;实现通过输入参数&#xff0c;进行图表top的排序筛选 图示&#xff1a; 筛选前&#xff1a; 输入3&#xff0c;看top3的值&#xff1a; 输入-3&#xff0c;看倒数3个的值&#xff1a; 设置步骤&#xff1a; 1️⃣&#xff1a;添加一个“文本参数组件…

二叉搜索树详解

一、二叉搜索树的概念 二叉搜索树又名二叉排序树以及二叉查找树&#xff0c;它是一颗空树或者是具有以下性质的二叉树 *若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 *若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 *它…

昂科烧录器支持KIOXIA铠侠的可编程只读存储器TH58NVG4S0HTAK0

芯片烧录行业领导者-昂科技术近日发布最新的烧录软件更新及新增支持的芯片型号列表&#xff0c;其中KIOXIA铠侠的电可擦除可编程只读存储器TH58NVG4S0HTAK0已经被昂科的通用烧录平台AP8000所支持。 TH58NVG4S0HTAK0是一个单一的3.3V 16Gbit&#xff08;18253611008位&#xff…

QT拖放事件之一:初识拖放4大事件处理函数

0、拖放 两个动作,合在一起称之为拖放事件; 拖:就是拖着走; 放:就是拖着走,然后松开鼠标了,释放了,这就是放; 注意:放:拖着的东西要放在什么地方??? 假如,我将一个记事本拖着跑,然后放到一个Widget窗口上,那么为了使得Widget能感知相应的事件(拖着进入事件…