发表于: 2020-05-09 23:18:35
1 1340
今天的任务:
今天完成了任务13的两个页面,并对之前任务10的默认radio样式做修改使其更符合主体:
1、form元素
form元素定义HTML表单,HTML表单是一个包含表单元素的区域。HTML表单包含表单元素。而表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。input元素是最重要的表单元素。表单元素是允许用户在表单中输入内容。input元素有很多形态,有不同的type属性,而radio是其中一个属性,用于定义单选按钮。
2、radio
input元素在form元素中使用,用来声明允许用户输入数据的input控件。输入类型是由类型属性(type)定义的,输入类型至少包含23种,大多数经常被用到的输入类型如下:text(文本输入)、password(密码输入)、submit(提交按钮)、button(按钮)、image(图像作为提交按钮)以及checkbox(复选框)和radio(单选按钮)。Radio对象代表HTML表单中的单选按钮。在HTML表单中<input type="radio">每出现一次,一个Radio对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
3、label
label标签为input元素定义标注(标记)。label元素不会向用户呈现任何特殊效果。"for"属性可把label绑到另外一个元素。只需把"for"属性的值设置为相关元素的id属性的值。给raido和后面的文字外面加个label标签的,这样的话点文字就能选上radio,改善用户体验。如果label标签包含一个input元素,那么点击label标签内容就可以选中input标签,改变radio默认样式也是基于这个原理。
4、select
select标签用来创建下拉列表。select标签中的option标签定义了列表中的可用选项。select元素用来创建下拉列表,是一种表单控件,可用于在表单中接受用户输入,select元素通过option标签定义列表中的可用选项,也就是下拉菜单选项。
所以修改radio 默认样式原理主要是使用label标签将input标签包裹,里面再放一个inline-block标签。
将input标签隐藏,使用inline-block标签样式代替input标签。
对less的混合有更深的认识:
.gamebutton()
}
编译:
对一个button设置属性,后面的3个button都可以直接调用,十分方便。
明天完成任务13,并开始任务14.
评论