发表于: 2019-08-27 15:17:54

1 917


今天完成的事情:

今天完成了任务十的制作,并且在师兄的指导下完成了不足之处的修改,晚上开始看less,看的我有点懵,需要继续琢磨。学习了form表单样式的修改和下拉框的样式修改,学习了input和lable的区别以及使用,学习了cursor属性的使用

明天计划的事情:明天计划搞less,弄明白并且开始进行任务十一的制作。

遇到的问题:

1、刚开始想要通过更改input的样式来更改下面的按钮样式,但是发现更改的是输入框的样式,而要做到更改radio按钮则需要将input默认按钮隐藏,通过lable与input关联,然后加入图片来达到目的。

2、在下拉框处右侧小三角的样式需要修改,研究了好长时间,查到可以先消除样式,然后给select添加背景图的方法做到次效果

收获:

一、form表单一些知识点:

1、form 元素是块级元素,其前后会产生折行

2、<input name="Fruit" type="radio" value="" />

name为自定义,type是类型为“radio”的表单(按钮),还有其他的一些type如下

<form action="" method="get">

                       <label>type="text" 输入框</label

输入框控件,用于输入内容如用户名、密码之类内容输入框控件

                       <input name="" type="text" size="" /><br />

                       <label>type="checkbox" 多选复选框</label>

多选复选框控件,用于多选题、多选功能(进入了解 html checkbox多选框)

                       <input name="" type="checkbox" value="" /><br />
                       <label>type="radio" 单选框</label>
用于单选,唯一选择功能

                       <input name="" type="radio" value="" /><br />

                       <label>type="submit" 按钮</label>

按钮控件,用于提交、重置动作
                       <input name="" type="submit" value="" />

</form

3、

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("./image/xiala.png") no-repeat 95px center;

使用这三个代码可以清楚select的默认样式,然后添加背景图实现样式

4、<label>标签存在于<form>标签中,通过对 input 标签添加一个 id 属性值,然后在label标签中使用 for 属性,for的值和id属性值相同就是想了关联,这样点击lable区域也可以触发input的效果,任务中的单选按钮radio的样式重置就可以采用这种办法。

.input1 {
display: none;
}
.input1+label {
display: inline-block;
width: 120px;
height: 23px;
text-indent: 31px;
background:url(./image/yuan.png)no-repeat left ;
cursor: pointer;
}
.input1:checked+label {
background: url(./image/kongyuan.png)no-repeat left center;
}

首先隐藏了input默认的按钮样式,然后在点击前的图片加上,在添加hover效果,鼠标点击后图片添加为另一个。

5、CSS cursor 属性:

default 默认光标(通常是一个箭头)

auto 默认。浏览器设置的光标。

crosshair 光标呈现为十字线。

pointer 光标呈现为指示链接的指针(一只手)

move 此光标指示某对象可被移动。

text 此光标指示文本。

wait 此光标指示程序正忙(通常是一只表或沙漏)。

help 此光标指示可用的帮助(通常是一个问号或一个气球)。


返回列表 返回列表
评论

    分享到