超链接/表格/表单的复习(课后作业)

news2024/9/25 19:21:02

1.作业1

提示:

标题在title中修改

百度logo是图片链接(img) 

新闻,贴吧是超链接,直接上官网cv

还有文本呢输入框

完成前端HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度仿真页面</title>
</head>

<body align="center">
    <p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></p>
    <p> 
        <a href="https://news.baidu.com/">新闻</a>
        <a href="https://map.baidu.com/@13047515,4707691,13z">地图</a>
        <a href="https://tieba.baidu.com/index.html">贴吧</a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
        <a href="https://image.baidu.com/">图片</a>
        <a href="https://wenku.baidu.com/?fr=bdpcindex">文库</a>
        <a href="https://pan.baidu.com/disk/main?from=1026962h&_at_=1726381996098">网盘</a>
        <a href="https://chat.baidu.com/search?isShowHello=1&pd=csaitab&setype=csaitab&extParamsJson=%7B%22enter_type%22%3A%22home_tab%22%7D">AI助手</a>
        <a href="https://www.baidu.com/more/">更多</a>
    </p>

    <input type="text" size="40px">
    <input type="button" value="百度一下">  <p></p>
    <p>问题反馈请<a href="">发送邮件</a></p>

</body>
</html>

显示的效果如下:

2.作业2

 

思考如何制作上面的表格

提示:

这里看似是只有一个表格,其实呢可以由很多个表格合并获得

但是要注意设置表格的宽度为一个值,这样显示的效果就是相当于一个表格了

完整代码如下:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第29届中国国际广告节会议注册表</title>

    <style>
        th, td {
            border: 1px solid #3498db; /* 更改这里的颜色值 */
            padding: 8px;
            text-align: center;
        }

    </style>

</head>

<body align="center" >
    <h1>第29届中国国际广告节会议注册表</h1>
    <form action="">
        <table align="center" border="1" width="800px">
            <!-- <caption>第29届中国国际广告节会议注册表</caption> -->
            <tr>
                <td>参赛者姓名</td>
                <td><input type="text"></td>
                <td>职务</td>
                <td><input type="text"></td>
            </tr>
    
            
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td>工作单位</td>
                <td><input type="text" size="100px"></td>
            </tr>
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td>电话</td>
                <td><input type="text"></td>
                <td>传真</td>
                <td><input type="text"></td>
                <td>手机</td>
                <td><input type="text"></td>
            </tr>
        </table>
            
        <table align="center" border="1" width="800px">
            <tr>
                <td>通讯地址</td>
                <td><input type="text"></td>
                <td>邮箱</td>
                <td><input type="text"></td>
            </tr>
    
            <tr>
                <td>E-mail</td>
                <td><input type="text"></td>
                <td>国家</td>
                <td>
                    <select name="" id="">
                        <option value="">中国</option>
                        <option value="">俄罗斯</option>
                        <option value="">法国</option>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>省份</td>
                <td>
                    <select name="" id="">
                        <option value="">天津</option>
                        <option value="">北京</option>
                        <option value="">江西</option>
    
                    </select>
                </td>
               <td>城市</td>
               <td><input type="text"></td>
            </tr>  
    
        </table>

        <table align="center" border="1" width="800px" height="80px">
            <tr>
                
                <td>会议费标准(人名币)</td>
            </tr>
            <caption></caption>
        </table>

        <table align="center" border="1" width="800px">
            <!-- <caption>会议费标准(人名币)</caption> -->
            <tr>
                <td>身份/时间</td>
                <td>2022年9月20日之前注册</td>
                <td>2022年9月20日之后注册</td>
               
            </tr>
    
            <tr>
                <td>中广协会会员</td>
                <td><input type="radio" name="r1">1500元</td>
                <td><input type="radio" name="r1">1800元</td>
            </tr>
    
            <tr>
                <td>非会员</td>
                <td><input type="radio" name="r1">1800元</td>
                <td><input type="radio" name="r1">2000元</td>
            </tr>
    
            
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td><input type="submit" style="background-color: aqua;">
                <input type="reset" style="background-color: aqua;"></input></td>
            </tr>
            
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td><a href="">第29届中国国际广告节会议注册表下载</a></td>
            </tr>

        </table>
        
    </form>
    
   

</body>
</html>

显示的效果为:

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

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

相关文章

4.qml单例模式

这里写目录标题 js文件单例模式qml文件单例模式 js文件单例模式 直接添加一个js文件到qml中 修改内容 TestA.qml import QtQuick 2.0 import QtQuick.Controls 2.12 import "./MyWork.js" as MWItem {Row{TextField {onEditingFinished: {MW.setA(text)}}Button…

基于Arduino Uno的简易可视化操作界面设计

Arduino UNO是基于ATmega328P的Arduino开发板。它有14个数字输入/输出引脚&#xff08;其中6个可用于PWM输出&#xff09;、6个模拟输入引脚&#xff0c;一个16 MHz的晶体振荡器&#xff0c;一个USB接口&#xff0c;一个DC接口&#xff0c;一个ICSP接口&#xff0c;一个复位按钮…

完整gpt应用(自用)

qrc.py 把gpt_qrc.qrc转化成gpt_qrc.py pyrcc5 -o icons_rc.py icons.qrc <RCC><qresource prefix"img"><file>img/53.png</file><file>img/ai.png</file><file>img/关闭.png</file><file>img/最小化.png&l…

9.15 BFS中等 133 Clone Graph review 138 随机链表的复制

133 Clone Graph //错误代码class Solution { public:Node* cloneGraph(Node* node) {//邻接表、BFS---》类似于二叉树的层次遍历if(!node || !node->val) return node;//构造队列queue<Node*> prev;prev.push(node);//构造新的图结点列表vector<Node*> adjList…

ESP8266_MicroPython——ADC_PWM

MicroPython 文章目录 MicroPython前言一、ADC二、PWM 前言 这一节简单学习一下ACD和PWM 一、ADC ADC(analog to digital conversion) 模拟数字转换。意思就是将模拟信号转化成数字信号&#xff0c;由于单片机只能识别二级进制数字&#xff0c;所以外界模拟信号常常会通过 A…

OpenCV结构分析与形状描述符(22)计算图像中某个轮廓或区域的矩函数moments()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一个多边形或光栅化形状直到三阶的所有矩。 该函数计算一个向量形状或光栅化形状直到三阶的矩。结果返回在 cv::Moments 结构中。 函数原型…

数据结构————二叉树基础知识(零基础包会的!)

今天带来数据结构二叉树的知识&#xff0c;保证大家不会离散数学或者没有数据结构基础&#xff0c;也能明明白白的。 一&#xff0c;树 1&#xff0c;树的结构 我们在了解什么是二叉树之前我们先了解下什么是树&#xff0c;树是一种非线性的数据结构&#xff0c;它是由n个节点…

Bootstrap 警告信息(Alerts)使用介绍

本章将讲解警告&#xff08;Alerts&#xff09;以及 Bootstrap 所提供的用于警告的 class。警告&#xff08;Alerts&#xff09;向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可…

C# 实现二维数据数组导出到 Excel

目录 功能需求 范例运行环境 Excel DCOM 配置 设计实现 组件库引入 ​编辑​ 方法设计 生成二维数据数组 核心方法实现 调用示例 总结 功能需求 将数据库查询出来的数据导出并生成 Excel 文件&#xff0c;是项目中经常使用的一项功能。本文将介绍通过数据集生成二维…

基于TCP的网络计算器实现

目录 一. 重新理解协议 二. 序列化与反序列化 2.1 概念 2.2 重新理解 read、write、recv、send 和 tcp 为什么支持全双工 2.3 理解TCP面向字节流 三. 请求应答模块实现 3.1 添加与解析报头 3.2 定制协议&#xff1a; 3.3 Json 四. 计算模块实现…

字典转换(根据字典转换、根据id转换)

一、三种转换方式 翻译场景:序列化时候转换 适用类型: 字典type转中文用户id转用户名部门id转名称附件id转url路径1.1 根据另一个映射字段 翻译保存到此字段 根据创建者createBy的id,查询名称设置到 createName 1.2 直接根据此字段值翻译后替换此字段值 ossId 替换为 url …

医疗监测数据检测系统源码分享

医疗监测数据检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer…

vue3透传、注入

属性透传 传递给子组件时&#xff0c;没有被子组件消费的属性或事件&#xff0c;常见的如id、class 注意1 1.class、style是合并的&#xff0c;style中如果出现重复的样式&#xff0c;以透传属性为准2.id属性是以透传属性为准&#xff0c;其他情况透传属性名相同&#xff0c…

深度学习云服务器免费使用教程

#云服务器# #深度学习# #人工智能# #计算机视觉# 本文为各位学习深度学习的入门选手而创建&#xff0c;降低深度学习的入门门槛。 谷歌云服务器Colab&#xff1a; T4GPU。限额&#xff0c;需要科学上网&#xff0c;不能使用终端。 谷歌云服务器地址&#xff1a;欢迎使用 C…

C语言 | Leetcode C语言题解之第405题数字转换为十六进制数

题目&#xff1a; 题解&#xff1a; char * toHex(int num){int i0;char *nums(char*)malloc(sizeof(char)*32);unsigned int newnum(unsigned int)num;if(num0){nums[0]0;nums[1]\0;return nums;}while(newnum>1){int flagnewnum%16;newnum/16;if(flag<9){nums[i]flag0…

华为OD机试 - 计算误码率(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…

Acwing 队列

模拟队列 主要思想&#xff1a;先进先出&#xff08;注意与栈做区分&#xff09;&#xff0c;队尾插入&#xff0c;队头删除。设置一个数组存储数据&#xff0c;队头指针指向队列第一个元素&#xff08;初始为0&#xff09;&#xff0c;队尾指针指向最后一个元素&#xff08;初…

Qt常用控件——QSpinBox

文章目录 QSpinBox核心属性及信号点餐示例 QSpinBox核心属性及信号 QSpinBox或者QDoubleSpinBox表示微调框&#xff0c;带有按钮的输入框&#xff0c;可以用来输入整数/浮点数或者通过点击按钮调整数值大小 QSpinBox和QDoubleSpinBox用法基本相同&#xff0c;本篇以QSpinBox为…

Ubuntu 安装包下载(以20版本 阿里镜像站为例子)

Ubuntu安装包下载 上一篇文章写了一些国内常用的镜像站&#xff0c;这篇以阿里云镜像站Ubuntu20版本为例。 https://mirrors.aliyun.com/ubuntu-releases/ 1.点击自己想要下载的版本 2.点击以amd64.iso为结尾的文件&#xff0c;这个是安装文件&#xff0c;如果是桌面端&…

C++初阶学习——探索STL奥秘——vector的模拟实现

vector的结构比较特殊&#xff0c;成员变量为三个指针 #pragma once #include <iostream> using std::cin; using std::cout; using std::endl;#include <string> using std::string;namespace Yohifo {template<class T>class vector{public:typedef T val…