发表于: 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() {
    width100%;
    height52px;
    bordernone;
    font-size18px;
}
.lasttime {

        .gamebutton()

}

编译:

.main .lasttime {
  width100%;
  height52px;
  bordernone;
  font-size18px;
}

对一个button设置属性,后面的3个button都可以直接调用,十分方便。

明天完成任务13,并开始任务14.


返回列表 返回列表
评论

    分享到