label

label标签有一个很好的作用就是扩大表单控件元素的点击区域。

一般有两种方法可以达到效果:(1)使用label标签包裹表单控件(2)设置label标签的for属性和表单的id属性一致

这意味着有三种方式可以实现

 <label for="checkbox"></label><input type="checkbox" id="checkbox" />

2 <label><input type="checkbox"  /></label>

3 <label for="checkbox"><input type="checkbox" id="checkbox" /></label>

forid可访问性好于label标签包裹 最好选用第一种方式-------至于原因http://www.zhangxinxu.com/wordpress/2011/07/%e8%af%b4%e8%af%b4html5%e4%b8%adlabel%e6%a0%87%e7%ad%be%e7%9a%84%e5%8f%af%e8%ae%bf%e9%97%ae%e6%80%a7%e9%97%ae%e9%a2%98/(张鑫旭博客  说说HTML5中label标签的可访问性问题)

background-position

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera,background-attachment必须设置为 "fixed(固定)".

默认值: 0% 0%
继承: no
版本: CSS1
JavaScript 语法: object object.style.backgroundPosition="center"

属性值

描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
如果仅指定一个关键字,其他值将会是"center"
x% y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。 。默认值为:0%0%
xpos ypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他 CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions
inherit 指定background-position属性设置应该从父元素继承

(1057x291)

HTML代码:

<link rel="stylesheet" type="text/css" href="style.css" />
<div class="div"> </div>

css:

.div{
border:1px solid pink;
width:151px;
height:582px;
background:url(girl.png) no-repeat;
background-position:center;
}

效果如下:

background-position:center top;

其他效果可以想象;

关于background-position:-xpx,-ypx;

css:

.div{
border:1px solid pink;
width:302px;
height:582px;
background:url(girl.png) no-repeat;
background-position:0px 0px;
}

效果:

background-position:-151px -100px;

效果:

——————————————————————————————————————————————————————————————————————

关于checkbox/radio表单自定义样式

两种方法:

需要将表单元素进行隐藏:display:none;或者visibility:hidden;

<1>伪元素法:

HTML:

<input type="radio" id="radio1" name="radio" class="radio" /> <label for="radio1" > </label>
<input type="checkbox" id="checkbox1" name="checkbox1" class="checkbox"><label for="checkbox1"></label>

css:

/*此处使用了兄弟选择器  在HTML中label标签在input标签的后面*/
.radio+label{
border-radius: 50%;
width:16px;
height: 16px;
border:1px solid #d9d9d9;
display: inline-block;
}
.radio:checked+label,.checkbox:checked+label{
border:1px solid #d73d32;
}
.radio:checked+label:before{
border-radius: 50%;
width:8px;
height:8px;
line-height: 8px;
position:relative;
top:-30%;
content: '';
display: inline-block;
text-align: center;
background: #d73d32;
}
.checkbox+label{
width:16px;
height:16px;
border:1px solid #d9d9d9;
display: inline-block;
}
.checkbox:checked+label:before{
width:8px;
height:8px;
line-height: 8px;
position:relative;
top:-25%;
content: '\2713'; /*使用特殊字符需要加斜杠*/
color:#d73d32;
display: inline-block;
text-align: center;
}

<2>雪碧图的方法:

HTML

 <input type="radio" id="radio1_sprite" name="radio" class="radio_sprite" /> <label for="radio1_sprite" > </label>
<input type="checkbox" id="checkbox1_sprite" name="checkbox1" class="checkbox_sprite"><label for="checkbox1_sprite"></label>

css:

.radio_sprite+label,.checkbox_sprite+label{
width:16px;
height:16px;
background: url(ck/bg.png) no-repeat;
display: inline-block;
}
.radio_sprite+label{
background-position: -24px -10px;
}
.radio_sprite:checked+label{
background-position: -59px -10px;
}
.checkbox_sprite+label{
background-position: -24px -32px;
}
.checkbox_sprite:checked+label{
background-position: -59px -32px;
}

雪碧图定义:CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。

优点

减少加载网页图片时对服务器的请求次数

可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。

提高页面的加载速度

sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。

减少鼠标滑过的一些bug

IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。

​不足

CSS雪碧的最大问题是内存使用

除非这个雪碧图片是被非常小心的组织,你就会最终使用大量的无用的空白。一个例子是来自于WHIT TV的网站。注意这是一个1299×15,000像素的PNG图片。它也被压缩的很好--实际下载大小只有大概26K - 但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后,它将占用差不多75MB的内存 (1299 * 15000 * 4)。如果这个图片并没有使用alpha透明,它将会被优化至1299 * 15000 * 3,但是要在损失渲染速度的情况下。即使那样,我们也会讨论55MB。这张图片的大部分其实就是空白,那里什么都没有,没有任何有用的内容。只是加载 WHIT主页 就会导致你的浏览器的内存占用上升到至少75+MB,仅仅是因为那一张图片。(PS:遗憾的是,该网站最近已经改版,文中提到的图片已经不存在了)

影响浏览器的缩放功能

如果一个使用CSS雪碧的页面使用一些浏览器提供的整页缩放功能缩放了,浏览器就需要做一些额外的工作来纠正这些图片边缘的行为--基本上来说,是为了避免雪碧中相邻的图片被"露进来"。这对于小图片没有什么问题,但是对于大图片会是一个性能下降。

拼图维护比较麻烦

拼合这么多图片,需要耐心。同时还要时刻思考如何在使用这个图片是不会产生相互的影响。将又瘦又高的图片和又宽又矮的图片放到一起时,不容易操作。如果要修改雪碧中的一个图片,你就要修改整张图片,这无疑会增大工作量。

使CSS的编写变得困难

如果CSS雪碧足够复杂,则大大增加了CSS的代码量和难度,让维护和修改变得困难起来。

CSS雪碧调用的图片不能被打印

CSS 雪碧调用的图片不能被打印,除非在@media中特别添加 print声明。

错误得使用Sprites影响可访问性

一些刚入门的开发人员会为了节省 HTTP 请求数(这是使用 CSS Sprite 一直强调的好处)而把所有的图片都当背景图片来处理 – 甚至是那些传达重要信息的图片。结果会导致一个缺乏可访问性的网站,也会降低 HTML 中 title 和 alt 的潜在益处。

因此,CSS sprite 本身没错,而且也不会引发可访问性问题(事实上,正确得使用会提高可访问性)。但是不分对错的过度使用 sprite 会阻碍具有可访问性和生产率方面的网页建设进程。

关于自定义checkbox-radio标签的样式的方法(label 和 background-position理解)的更多相关文章

  1. 自定义checkbox/radio

    一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...

  2. jquery checkbox radio 标签 选中的3种方法

    张映 发表于 2013-07-16 分类目录: js/jquery 标签:checkbox, jquery, radio, 选中 jquery 很灵活,checkbox radio标签选中的方法有很多 ...

  3. jquery validate自定义checkbox验证规则和样式

    参考:http://blog.csdn.net/xh16319/article/details/9987847 自定义checkbox验证,“检查checkbox是否选中” jQuery.valida ...

  4. css自定义 range radio select的样式滑轮,按钮,选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

  5. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  6. 自定义checkbox,radio样式

    input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...

  7. 文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。

    这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...

  8. Struts2中 radio标签的详细使用方法

    首先在页面中引入struts标签库: <%@ taglib prefix="s" uri="/struts-tags"%> 在JSP页面中创建单选按 ...

  9. 自定义checkbox, radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

随机推荐

  1. VS2010编译错: #error : This file requires _WIN32_WINNT to be #defined at least to 0x0403...的解决方法

        最近拿到一个别人的工程,是使用VS.net创建的,而我的机器上只有vs2010,于是用自带的转换工具将它转换成vs2010的工程,转换之前我就很担心,怕转换完后会出问题,但是没有办法,我实在是 ...

  2. linux下创建用户及组

    linux下创建用户及组: 1.创建组 groupadd  组名 2.创建用户,并将用户添加到组 useradd  用户名  -g  组名 3.更改用户的密码 password  用户名 4.修改目录 ...

  3. HDFS执行getDatanodeReport输出信息

    HDFS执行getDatanodeReport输出信息: Name: (192.168.101.100) Hostname: bigsrv Decommission Status : Normal C ...

  4. ZooKeeper通过ACL修复未授权访问漏洞

    默认情况下ZooKeeper允许匿名访问,因此在安全漏洞扫描中暴漏未授权访问漏洞. 一.参考资料 <ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表& ...

  5. AJPFX关于数组获取最值的思路和方法

    思路分析:1.定义一个变量(max,初始值一般为数组中的第一个元素值),用来记录最大值.2.遍历数组,获取数组中的每一个元素,然后依次和max进行比较.如果当前遍历到的元素比max大,就把当前元素值给 ...

  6. CCF|最小差值|Java

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = ...

  7. Java的知识储备及面试-几个方面

    1.Java本身语法基础 https://github.com/Snailclimb/JavaGuide/blob/master/Java%E7%9B%B8%E5%85%B3/Java%E5%9F%B ...

  8. 【数据分析 R语言实战】学习笔记 第三章 数据预处理 (下)

    3.3缺失值处理 R中缺失值以NA表示,判断数据是否存在缺失值的函数有两个,最基本的函数是is.na()它可以应用于向量.数据框等多种对象,返回逻辑值. > attach(data) The f ...

  9. 黑马程序员----java基础:多线程

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ---- ...

  10. 一些常用的meta标签及其作用

    声明文档使用的字符编码  <meta charset='utf-8'>优先使用 IE 最新版本和 Chrome  <meta http-equiv="X-UA-Compat ...