wdnmd
wdnmd

再lable中我们有几个不同的type参数:
 text    
写的是文本类型的参数

password   
不管输入的是什么显示的都是星星

date   
输入的是一个日历本

radis   
单选的圆圈选项

checkbox   
方块形状的打勾选项

hidden   
隐藏起来的文本

file   
用于上传文件给后端


还有几个按钮类型

button   
这是普通的按钮,看似没有什么用处,但是有很大的潜力

reset   
是个充值按钮

submit   
提交按钮 可以自动触发form表单提交数据的动作

input标签可以增加disable属性,禁用这个框框

input标签可以加value属性,就是默认值

  男<input type="radio" name="gender" value="male">
女<input type="radio" name="gender" value="female" checked>

可以加个checked属性

这些就是form内容

css内容就比较简单了,有多种选择器

基本选择器

元素选择器



id选择器



类选择器



通用选择器



组合选择器

div span后代选择器



div>span儿子选择器



div+span毗邻选择器



div~span弟弟选择器



我们将input框鼠标点进去之后的那个状态叫做 input获取焦点 聚焦 focus

鼠标移出去之后的状态 叫做input框失去焦点

伪元素选择器 (清除浮动带来的负面影响)

可以通过css添加文本内容

选择器优先级<br>
1.选择器相同的情况下 引入方式不同<br>
遵循就近原则 谁离标签更近 就听谁的<br> 2.选择器不同的情况下 <br>
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器<br>

随机推荐

  1. 创建网关项目(Spring Cloud Gateway)

    创建网关项目 加入网关后微服务的架构图 创建项目 POM文件 <properties> <java.version>1.8</java.version> <s ...

  2. Robot Framework 执行结果无法查看(tomcat部署)

    打开jenkins系统管理-命令行执行: System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","& ...

  3. java 多线程实现的四种方式

    一个线程的生命周期 线程是一个动态执行的过程,它也有一个从产生到死亡的过程. 下图显示了一个线程完整的生命周期. 新建状态: 使用 new 关键字和 Thread 类或其子类建立一个线程对象后,该线程 ...

  4. js手机端图片弹出方法

    1 $("img").click(function(){ //获取窗口可视大小 var width=$(window).width(); var height=$(window). ...

  5. Git分支,合并,切换分支的使用

    1.创建合并分支 在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD指针严格来说不是指向提交 ...

  6. 阿里云 Centos 7 PHP7环境配置 LNMP

    首先更新系统软件 $ yum update 安装nginx 1.安装nginx源 $ yum localinstall http://nginx.org/packages/centos/7/noarc ...

  7. shell正则匹配IP地址

    IP分成5大类: A类地址 ⑴ 第1字节为网络地址,其它3个字节为主机地址. ⑵ 范围:1.0.0.1—126.155.255.254 ⑶ 私有地址和保留地址: ① 10.X.X.X是私有地址(只能在 ...

  8. 【Flutter学习】页面跳转之路由及导航

    一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...

  9. configure: error: invalid variable name: `-prefix'

    configure: error: invalid variable name: `-prefix'其实就是写法的问题 正确写法 把prefix前面的"-"改成“--”

  10. percona-toolkit工具包的安装和初步使用

    percona-toolkit工具包的安装和初步使用 原文地址:http://blog.csdn.net/yumushui/article/details/42919601 一.percona-too ...