表单+初部认识css

2023-10-29

表单

<input type="hidden" name="hideName" value="666">
<input type="text" name="user" value="张三" readonly>
<input type="submit" value="提交" disabled>
<input type="radio" name="a" id="man" value="男">
<label for="man">男</label>
<input type="radio" name="a" id="woman" value="女">
<label for="woman">女</label>

hidden 隐藏域,作用:需要把数据的名称和值传给后台,但不在用户页面显示。

readonly 只读属性 作用:让用户看到信息但是不让用户修改。

disabled 禁用属性 作用:禁用按钮原来的功能,使用场景:问卷等,用户未填好表单无法提交,由javascript判断是否填写好。

label 元素定义标注,无任何特殊效果 作用:增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上。注意:label的 for 属性应当与相关元素的 id 属性相同。

css

css的概念

Cascading Style Sheet 级联样式表。表现HTML或XHTML文件样式的计算机语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

css的优势

网页的表现统一,容易修改,样式丰富,页面布局灵活,减少网页的代码量,增加网页的浏览速度,节省网络带宽,运用独立于页面的CSS,有利于网页被搜索引擎收录。

css样式

行内样式

<p style="color:red;font-size:30px;">我表示段落</p>

行内样式 使用style属性引入CSS样式。

内部样式表

​<style>
      div{
         color:red;
       }
</style>
<body>
      <div>我是div</div>
</body>

优点:方便在同页面中修改样式。

缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底。

外部样式表

链接外部样式表

<link rel="stylesheet" href="./5.css">

rel="stylesheet" 使用外部样式表

href 文件的路径

导入外部样式表

<style>@import url(./5.css);</style>

url里面可以加引号(单引号或者双引号)也可以不加引号。

CSS基本选择器

标签选择器

<style>
        p{
            font-size: 30px;
            color:red;
        }
        h1{
            color:aqua;
        }
        div{
            color:blue
        }
</style>

所有标签都可以作为标签选择器。

类选择器

<style>
     .divclass{
          color:red;
          font-size:50px;
      }
</style>
<body>
    <div class="divclass">我是块元素</div>
</body>

divclass是类名称 类选择器记得要加上"." 一般工作中推荐使用 类选择器加样式。

id选择器

<style>
      #one{
          color:red;
      }
</style>
<body>
      <div id="one">
        我是块元素我的id是one
      </div>
</body>

使用id选择器 要使用#,#后面名称需要和id=""后面的值对应,id选择器中id具有唯一性 。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

表单+初部认识css 的相关文章

  • 向 CSS 网格系统(如 960.gs)添加填充

    我正在构建一个使用流行的 960 gs 16 列网格系统的网站 这是设计相关部分的屏幕截图 网格列覆盖在顶部 问题是白色的 现在流行 框 由于它有白色背景 我想要在盒子内添加一些填充物 很简单 我添加了一个 div 在父级内部并对其进行适当
  • 如何在鼠标悬停时覆盖 div / box?

    我有一个链接 当用户将鼠标悬停在其上时 它应该在链接下显示一个框 div 盒子应该覆盖其下方的所有内容 我如何使用 css 或 javascript 来做到这一点 您有一个隐藏的绝对定位的 div 和链接的子级 然后 当您将鼠标悬停在链接上
  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty
  • HTML - 使用 JS 根据值更改文本颜色

    我正在使用 Django 创建一个以 HTML 形式显示的表格 我想当数字为负数时将数字的颜色更改为红色 当数字为正数时将数字的颜色更改为绿色 我知道我需要使用 JS 来实现这一点 但我无法让它工作 任何帮助将不胜感激 这是我的 Djang
  • 使用 javascript 设置最大高度

    我有一个 div 这个 div 的最大宽度是用户定义的 我知道我可以使用 element style height 完成它 但这在 IE 中不起作用 关于如何使用 javascript 实现 Firefox 的最大高度等效项有什么想法吗 通
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • Chrome DevTools:计算样式与 css 规则不同?

    当我在 CSS 文件中定义 4px 时 我的 DOM 元素的 border top width 怎么可能是 0px 当我使用 Chrome DevTools 检查元素时 我发现计算的样式告诉 0px 而最上面的 css 规则是 4px 而且
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • 如何使用 Cypress 定位没有 id 属性的嵌套输入?

    我正在为 React 项目编写 Cypress 测试 我需要能够瞄准
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 将 html 转换为 pdf 时防止表格单元格跨页破坏

    使用 Google Apps 脚本 我有一个 html 模板 我填写该模板 然后以 pdf 形式发送 通过传真和 或电子邮件 该模板包括一个带有问题 答案的两列表格 如果行数足够多 表格会在pdf中跨页分页 并且分页符通常发生在单元格的中间
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐

  • 【正则表达式04】匹配多个字符

    xyz xyz为普通字符 不是元字符 把xyz当做一个整体去匹配 x 匹配 0 个或者 1 个 x x 匹配 0 个或者任意多个 x 匹配0个或者任意多个字符 换行符除外 x 匹配至少 1 个 x x n 匹配n个x n是非负整数 x n
  • 如何通过没有直接关系的参数关联两个事物

    通过没有直接关系的参数关联两个事物 可以采用以下几种方法 统计分析 通过收集大量数据 使用统计方法发现两个事物之间的相关性 虽然两个事物之间可能没有直接的因果关系 但通过收集和分析大量的数据 可以发现它们之间存在间接的相关性 可视化分析 通
  • SaltStack 企业级自动化运维实战

    一 SaltStack 概述 1 SaltStack 简介 SaltStack是一个服务器基础架构集中化管理平台 具备配置管理 远程执行 监控等功能 一般可以理解为简化版的puppet和加强版的func SaltStack基于Python语
  • 我是一个线程

    第一回 初生牛犊 我是一个线程 我一出生就被编了个号 0x3704 然后被领到一个昏暗的屋子里 在这里我发现了很多和我一模一样的同伴 我身边的同伴0x6900 待的时间比较长 他带着沧桑的口气对我说 我们线程的宿命就是处理包裹 把包裹处理完
  • 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案...

    给定一个整数数组 nums 和一个整数目标值 target 要求在数组中找出两个整数 使得它们的和为目标值 并返回它们的数组下标 你可以假设每种输入只会对应一个答案 且同一个元素在答案中不能重复出现 你可以按任意顺序返回答案 例如 给定 n
  • Jenkins配置邮件发送测试报告

    我们用jenkins集成测试 Jenkins GitLab Python自动化测试持续集成 构建任务执行完成后 可以将测试结果通过邮件形式发送至相关人员 告知本次项目构建结果 一 开启邮箱SMTP服务 这里我用的是网易163邮箱 登录163
  • Unity 实现 角色的换装

    换装的三个要点 材质 网格 模型 unity中换装 即更改角色部位上的skinnedMeshRender组件的属性 更换mesh mesh 和骨骼的重新绑定 最后更换材质 一个模型 带有skinnedMeshRender组件 的子节点 和对
  • 灰灰-328-LeetCode682棒球比赛(vector、stack、atio()、substr()、c_str()、accumulate())

    你现在是棒球比赛记录员 给定一个字符串列表 每个字符串可以是以下四种类型之一 1 整数 一轮的得分 直接表示您在本轮中获得的积分数 2 一轮的得分 表示本轮获得的得分是前两轮有效 回合得分的总和 3 D 一轮的得分 表示本轮获得的得分是前一
  • SQLPro Studio for Mac(可视化数据库管理工具)

    SQLPro Studio for Mac是一款可视化数据库管理工具 为创建 MySQL MSSQL Oracle和Postgres连接提供支持的数据库管理解决方案 包括SSH隧道功能 SQLPro Studio为您提供了通过相同的用户界面
  • 华为免费虚拟服务器,免费试用虚拟服务器

    免费试用虚拟服务器 内容精选 换一换 本节操作介绍切换虚拟私有云的操作步骤 仅支持单网卡切换虚拟私有云 切换虚拟私有云会导致云服务器网络中断 切换虚拟私有云过程中 请勿操作云服务器的弹性公网IP 或对云服务器做其他操作 切换虚拟私有云后 云
  • OpenCV

    OpenCV Mat类的copyT clone 赋值的区别 1 clone 2 copyTo 3 等号 赋值 4 验证 先说一下Mat类的结构 Mat类我们可以分成两部分 头部分 矩阵数据部分 头部分 用于记录矩阵数据的大小 类型 数据指针
  • 遗传算法的概念和python实现

    遗传算法是一个非常经典的智能算法 主要用于解决优化问题 本文主要简单介绍一些原理 同时给出一个基于python实现的 用于解决实数内优化问题的模板 本文参考 原理 遗传算法入门详解 知乎 简单介绍 遗传算法就是借鉴生物学中的遗传 首先生成若
  • TCP三次握手详解

    一 什么是TCP三次握手 三次握手 Three way Handshake 是指建立一个TCP连接时 需要客户端和服务器总共发送3个包 三次握手的目的是连接服务器指定端口 建立TCP连接 并同步连接双方的序列号和确认号并交换 TCP 窗口大
  • 你不知道的JavaScript---------- 行为委托

    目录 Prototype 机制 面向委托的设计 类理论 委托理论 比较思维模型 JavaScript创建UI控件 控件创建渲染 ES5类继承形式 控件 类 类形式 委托控件对象 委托形式 更简洁的设计 更好的语法 内省 Prototype
  • C++ 条件编译指令和defined 操作符

    使用条件条件编译指令 可以限制程序中的某些内容要在满足一定条件下才参与编译 因此 可以利用条件编译指令使同一个源程序在不同的编译环境下产生不同的目标代码 在头文件中使用 ifdef和 ifndef是非常重要的 可以防止双重定义错误的出现 常
  • centos8安装docker

    执行yum install docker ce会报错Problem package docker ce 3 19 03 3 3 el7 x86 64 requires containerd io gt 1 2 2 3 but none of
  • Android中RecyclerView分页加载数据

    Android中RecyclerView分页加载数据 在Android开发中 RecyclerView是一个强大的视图容器 常用于展示大量数据 当数据量很大时 一次性加载所有数据可能会导致用户等待时间过长或者内存不足的问题 为了解决这个问题
  • 第十一届蓝桥杯 b组

    答案 3880 代码 package 第十一届蓝桥杯 public class Main01 public static void main String args int t 10000 int time 0 boolean b true
  • [深入浅出Cocoa]iOS网络编程之Socket

    深入浅出Cocoa iOS网络编程之Socket 罗朝辉 http blog csdn net kesalin CC 许可 转载请注明出处 更多 Cocoa 开发文章 敬请访问 深入浅出Cocoa CSDN专栏 http blog csdn
  • 表单+初部认识css

    表单