HTML前端页面设计静态网站

浅浅分享一下前端作业,大佬轻喷~

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个网页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    h2,
    h3 {
      text-align: left;
    }

    p {
      text-align: left;
      font-size: 14px;
      font-weight: normal;
    }

    .pink-box {
      width: 120px;
      height: 100px;
      background-color: pink;
      text-align: left;
      line-height: 100px;
      font-weight: normal;
    }

    .pink-box a {
      text-decoration: none;
      color: inherit;
      font-weight: normal;
    }

    table {
      width: 400px;
      border-collapse: collapse;
    }

    table th,
    table td {
      border: 1px solid #ccc;
      padding: 5px;
    }

    table th {
      text-align: center;
      font-weight: normal;
    }

    table td {
      text-align: left;
      font-weight: normal;
    }
  </style>
</head>

<body>

  <h2>二级标题</h2>
  <p>不知道写啥。</p>
  <h3>三级标题</h3>
  <p>一张图片。</p>
  <img src="一个图片.jpg" width="500" />
  <div class="pink-box">
    盒子
  </div>
  <a href="https://www.baidu.com">点击我可以跳到百度哦</a>
  <ul>
    <li>我</li>
    <li>是</li>
    <li>无</li>
    <li>序</li>
    <li>表</li>
  </ul>

  <input type="text" style="width: 300px;" placeholder="我是一个宽300px但是输入什么都没用的输入框">
  <button disabled>不管怎么按都没用的按钮</button>

  <table>
    <tr>
      <th>用户名:</th>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>密码:</th>
      <td><input type="password"></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center;">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
      </td>
    </tr>
  </table>

  <p>自我介绍</p>
  <label>性别:
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女
  </label>
  <label>城市: <input type="text" value="重庆"></label>
  <label>爱好:<input type="checkbox">打游戏 <input type="checkbox">看电影 <input type="checkbox">听音乐 <input
      type="checkbox">运动<br />
    目标:<textarea style="width:300px; height:100px;" placeholder="我要努力加入Web前端!加油!"></textarea>
  </label>
</body>

</html>

 

***新人博主创作不易,希望大家多多点赞关注呀~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

金媒婚恋相亲系统10.4择爱开源旗舰版支持微信小程和抖音小程序上架

最近大家应该注意到了&#xff0c;金媒婚恋相亲系统已经更新至最新的10.4版本了&#xff01;本人作为商业用户也已经更新至最新的旗舰版了&#xff0c;更新的内容是啥&#xff01;这个官方都有列出&#xff0c;一个方面就是更新了多端的登录逻辑和UI 和后台CRM及很多细节的优化…

Flink CDC 同步 Mysql 数据

文章目录 一、Flink CDC、Flink、CDC各有啥关系1.1 概述1.2 和 jdbc Connectors 对比 二、使用2.1 Mysql 打开 bin-log 功能2.2 在 Mysql 中建库建表准备2.3 遇到的坑2.4 测试 三、番外 一、Flink CDC、Flink、CDC各有啥关系 Flink&#xff1a;流式计算框架&#xff0c;不包含 …

软件标准研发管理流程文件,项目管理,项目经理管理(word原件)

为了规范系统开发流程&#xff0c;我们制定了详尽的规范文档&#xff0c;旨在通过标准化、系统化的方法提升开发效率与项目质量。该流程从明确需求阶段开始&#xff0c;通过详细的设计规划确保解决方案的可行性与前瞻性&#xff0c;随后进入高效的编码实现阶段&#xff0c;遵循…

AAA 数据库事务隔离级别及死锁

目录 一、事务的四大特性&#xff08;ACID&#xff09; 1. 原子性(atomicity)&#xff1a; 2. 一致性(consistency)&#xff1a; 3. 隔离性(isolation)&#xff1a; 4. 持久性(durability)&#xff1a; 二、死锁的产生及解决方法 三、事务的四种隔离级别 0 .封锁协议 …

固定电话怎么认证显示公司名称?

在当今商业环境中&#xff0c;企业的联系方式&#xff0c;尤其是固定电话&#xff0c;不仅是与客户沟通的重要桥梁&#xff0c;也是展示企业专业形象的一部分。许多企业希望通过拨打固定电话联系客户时&#xff0c;能够对外显示公司名称&#xff0c;以此来增加电话的可信度和品…

使用 MMDetection 实现 Pascal VOC 数据集的目标检测项目练习(二) ubuntu的下载安装

首先&#xff0c;Linux系统是人工智能和深度学习首选系统。原因如下: 开放性和自由度&#xff1a;Linux 是一个开源操作系统&#xff0c;允许开发者自由修改和分发代码。这在开发和研究阶段非常有用&#xff0c;因为开发者可以轻松地访问和修改底层代码。社区支持&#xff1a;…

GetX的一些高级API

目录 前言 一、一些常用的API 二、局部状态组件 1.可选的全局设置和手动配置 2.局部状态组件 1.ValueBuilder 1.特点 2.基本用法 2.ObxValue 1.特点 2.基本用法 前言 这篇文章主要讲解GetX的一些高级API和一些有用的小组件。 一、一些常用的API GetX提供了一些高级…

做一个干电池的电量检测器03:数值拟合与电路仿真

首先在表格中进行详细的计算&#xff0c;整理出所需的数据。接着&#xff0c;我们运用MATLAB的强大功能对这些数据进行插值处理&#xff0c;生成了一个离散的数值数组。这个数组的每个数值都精确地对应着模数转换器&#xff08;ADC&#xff09;采样到的信号。通过这些数值&…

# linux从入门到精通-从基础学起,逐步提升,探索linux奥秘(十九)--mysql数据库基本操作

linux从入门到精通-从基础学起&#xff0c;逐步提升&#xff0c;探索linux奥秘&#xff08;十九&#xff09;–mysql数据库基本操作 一、MySQL的基本操作&#xff08;1&#xff09;&#xff08;难点&#xff09; 1、名词介绍 以Excel文件举例&#xff1a; 数据库&#xff1a…

关于我的编程语言——C/C++——第四篇(深入1)

&#xff08;叠甲&#xff1a;如有侵权请联系&#xff0c;内容都是自己学习的总结&#xff0c;一定不全面&#xff0c;仅当互相交流&#xff08;轻点骂&#xff09;我也只是站在巨人肩膀上的一个小卡拉米&#xff0c;已老实&#xff0c;求放过&#xff09; 字符类型介绍 char…

【python】OpenCV—Tracking(10.4)—Centroid

文章目录 1、任务描述2、人脸检测模型3、完整代码4、结果展示5、涉及到的库函数6、参考 1、任务描述 基于质心实现多目标&#xff08;以人脸为例&#xff09;跟踪 人脸检测采用深度学习的方法 核心步骤&#xff1a; 步骤#1&#xff1a;接受边界框坐标并计算质心 步骤#2&…

Unity核心笔记

1、认识模型的制作 1.建模 2.展UV 3.材质和纹理贴图 4.骨骼绑定 5.动画制作 总结 2、图片导入概述 1.Unity支持的图片格式 2.图片设置的6大部分 3、纹理类型设置 1.纹理类型主要是设置什么 2.参数讲解 4、纹理形状设置 1.纹理形状主要设置什么 2.参数讲解 5、纹理高级设置 …

(57)MATLAB使用迫零均衡器和MMSE均衡器的BPSK调制系统仿真

文章目录 前言一、仿真测试模型二、仿真代码三、仿真结果四、迫零均衡器和MMSE均衡器的实现1.均衡器的MATLAB实现2.均衡器的性能测试 总结 前言 本文给出仿真模型与MATLAB代码&#xff0c;分别使用具有ISI的三个不同传输特性的信道&#xff0c;仿真测试了使用迫零均衡器和MMSE…

[项目] C++基于多设计模式下的同步异步日志系统

[项目] C基于多设计模式下的同步&异步日志系统 文章目录 [项目] C基于多设计模式下的同步&异步日志系统日志系统1、项目介绍2、开发环境3、核心技术4、日志系统介绍4.1 日志系统的价值4.2 日志系统技术实现4.2.1 同步写日志4.2.2 异步写日志 5、相关技术知识5.1 不定参…

动态规划应该如何学习?

动态规划如何学习 参考灵神的视频和题解做的笔记&#xff08;灵神YYDS&#xff0c;以后也都会用这套逻辑去思考&#xff09; 枚举选哪个&#xff1a; 动态规划入门&#xff1a;从记忆化搜索到递推_哔哩哔哩_bilibili 746. 使用最小花费爬楼梯 - 力扣&#xff08;LeetCode&a…

RK3588的QT交叉编译环境搭建

主要参考为RK3568或RK3288开发板创建交叉编译环境{采用amd64的ubuntu系统配置交叉编译arm64开发环境}(保姆级包括安装QT)超详细记录版_rk3568交叉编译-CSDN博客 先说一下&#xff0c;使用的Ubuntu20.04.5版本&#xff0c;qt源码用的5.14.2版本&#xff0c;交叉编译器使用RK3588…

专利生成穿刺demo

一、做原型 做原型&#xff1f;具体需求是啥&#xff1f;只有一个“帮助客户生成专利说明书”这样一个笼统的要求&#xff1f; 只有这些肯定是不能用来指导原型开发的。既然目前没有准确的需求&#xff0c;那就先看看现有的产品现状吧。 1.竞品分析 怎么开展哪&#xff1f;…

数字信号处理Python示例(3)生成三相正弦信号

文章目录 前言一、三相正弦信号的表示二、生成三相正弦信号的Python代码三、三相正弦信号的图示与分析四、生成幅度不相等的三相正弦信号的Python代码五、幅度不相等的三相正弦信号的图示与分析写在后面的话 前言 首先给出三相正弦信号的数学表达式&#xff0c;并给出生成三相…

【linux 多进程并发】0302 Linux下多进程模型的网络服务器架构设计,实时响应多客户端请求

0302 多进程网络服务器架构 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 一、概…

Linux云计算 |【第五阶段】CLOUD-DAY9

主要内容&#xff1a; Metrics资源利用率监控、存储卷管理&#xff08;临时卷ConfitMap、EmptyDir、持久卷HostPath、NFS(PV/PVC)&#xff09; 一、Metrics介绍 metrics是一个监控系统资源使用的插件&#xff0c;可以监控Node节点上的CPU、内存的使用率&#xff0c;或Pod对资…