发表于: 2019-10-12 19:50:05

1 903


编辑日报内容...

今天完成的事件

问题:

经过师兄提醒这个是按钮不是直接画出来用,focus来实现的代码如下:

<input type="radio" id="woman2" name="2">
<label for="woman2"></label>
<span>外径</span>

它的自带外形是这样的 如果需要更改 我们需要用到新的伪类checkbox:来实现

首先input 与label这2个标签是要一起用的他们之间是有联系的特别是要改样式。

首先要生成一个伪类元素来美化默认状态下代码如下:

label::before {
content"";
displayinline-block;
height.2rem;
width.2rem;
margin-right.1rem;
border-radius50%;
background#f8f9fb;
border.07rem solid #d7d7d7;

}

生成图片:

这里注意下 name是每一行组可以点击一个如果有3个name2 那么他们的效果就是点击一个 点击另一个消失如果不想让另一个消失那么就不能组成同一个名字

id就相当于他们单独的身份,如果同一组有3个ID一样会发生你不管点击第几个都是第一个生效。

input[type="radio"]:checked+label::before {
border-color#1d7ad9;

}
input[type="radio"]:checked+label::before {
content"";
displayinline-block;
height.2rem;
width.2rem;
border-radius50%;
background#f8f9fb;
border.07rem solid #d7d7d7;

}

通过checked的联系让点击画出的来的图像变色。而且如果你不加这行代码 那么你点击图片是没有任何效果的checked就像联系input与label桥梁有点类似与hover 你把鼠标移动上去就出发hover效果原理差不多。

接下来就是隐式原有的默认图片代码如下:

input[type="radio"] {
displaynone;

}

这样就会和默认按钮效果一样点击会发生变化同时改变了默认按钮的样式。

这里了解下:

input标签:是规定用户可以进行输入,而它的样式有很多。

具体代码写法<input type="" name=""

这里要注意下  type这里比如写 radio 那么这里的样式就是个按钮,你要是写text就相当于输入框和做任务4那个 手机输入框一样,而它的样式有很多。

参考:https://www.runoob.com/tags/tag-input.html

百度checked属性是:

checked:带有一个预选定复选框的 HTML 表单

定义和用法

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。

虽然不太明啥意思 但 这个伪类给我感觉是联系同级可以另一个元素获得按钮点击的效果。


遇到问题:

就是不知道怎么把他移动过去 如果用固定定位移动动过去的话:

背景就消失了。

感觉好像总是由什么东西影响到分类的属性。

明天计划:接着解决 如果实在不只能重新写感觉好像是布局出了问题。不管怎么给高给宽 都能影响到父类,而父类及解决了背景和位移问题有没法解决子类的问题。

  问题已经解决:设置个浮动就可以把它移动过去并且不影响父类的元素。



返回列表 返回列表
评论

    分享到