zoukankan      html  css  js  c++  java
  • 自定义checkbox, radio样式总结

    任务目的

    1. 深入了解html label标签
    2. 了解CSS边框、背景、伪元素、伪类(注意和伪元素区分)等属性的设置
    3. 了解CSS中常见的雪碧图,并能自己制作使用雪碧图

    任务描述

    1. 参考 样例(点击查看),实现页面开发,要求实现效果基本一致

    任务注意事项

    1. 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点。
    2. 注意测试不同情况,尤其是极端情况下的效果。

    参考资料

    1. MDN label: 了解html中label的基本知识
    2. MDN background-position: 了解背景图片定位相关知识
    3. MDN :checked: 了解input的:checked伪类的基本知识以及应用场景
    4. MDN :before:了解input的:before伪元素的基本知识
    5. MDN :after:了解input的:after伪元素的基本知识

    自定义checkbox, radio样式总结

    1、HTML <label> Tag

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    5、已提交作业

    代码地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-2

    预览地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-2/index.html

  • 相关阅读:
    C++ 项目和资源导引
    C++ 类再探
    C++ 语句函数再探
    leetcode-174. Dungeon Game 地下城游戏
    34. Find First and Last Position of Element in Sorted Array + 二分
    leetcode-27. Remove Element删除元素
    git 使用入门
    MySQL数据库的启动与停止
    C++类型转换
    C++ 获取对象类型
  • 原文地址:https://www.cnblogs.com/melbourne1102/p/6592708.html
Copyright © 2011-2022 走看看