<span class="choose"><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span> .choose { position: relative; } .input_check { position: absolu

前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重新设计,checkbox默认的样式非常丑 ,无法直接修改checkbox和radio的样式,这里我们借助label标签来对它进行样式美化. 先看实现效果图,如下: 实现思路 1.设置input 属性hidden对该input进行隐藏,或者通过display:none也可以 2.借助label for

checkbox开关 css .iosCheck { /* Blue edition */ } .iosCheck input { display: none; } .iosCheck i { display: inline-block; cursor: pointer; padding-right: 25px; transition: all ease 0.2s; -webkit-transition: all ease 0.2s; border-radius: 25px; box-shado

按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#" role="button">a标签按钮</a> <input type="button" class="btn btn-default" value="input的button标签按钮" />

获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() 获取jQuery对象的第N个元素 1.$(selector:eq(N-1)) 2.$(selector).eq(N-1) table常用css样式 border-spacing:10px; 表格里边框之间的距离.border-collapse  有三个参数可选:collapse,separate(默

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置.在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可. 同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css. bootstrap需要为页面内容和栅格系统包裹一个 在一个容器中.共有两个有此作用的class .container 类用于固定宽度并支持响应

一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性. 可通过添加 .lead 让段落突出显示 variables.less文件中定义的两个LESS变量决定了排版尺寸: @baseFontSize 和 @baseLineHeight.第一个变量定义了全局font-size基准,

input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些是不是美观多了呢?并且这样的input美化,无需jquery插件,只要几行css代码就可以. 思路 思路很简单:(1)将之前的按钮透明度opacity设置为0:(2)外层用div包裹 实现过程 图片下载:       [html代码] <div class="hdz_input_radio c

学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-weight:bold } It will affect all tag with any class. e.g. <h2 class="old" > or <h2 class="new">2>精确属性值 a[href="http:/

曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了....这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件事做到底......今天就总结一下所学到的知识. 理论: HTML(Hyper Text Markup Language) 超文本标记语言 —HTML文档 = 网页 —HTML标签(不区分大小写)(有些大写是自动生成的) 页面包括“格式标签”和“页面内容” —网页文件格式:.html或.htm HT

div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: 0; bottom: 1px; width: 100 % ; height: 980px; z - index: 9; background - color: #000; filter: alpha(opacity = 50); - moz - opacity: 0.5; - khtml - opa

17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color.border等属性都对其无效. 但是本身的样式又不太美观: 本身的radio外观:本身的checkedbox外观. 不能改样式,却又如此的不美观,实在不符合我们现在的审美和需求. 这是百度给的一个样式图片: 首先,HTML: <div> <input type="radio&quo

CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的

兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项目时再引入) content布局 当h5内嵌在app里面的时候,在iso手机下,底部(头部)固定按钮会跟着一起滚动,需要使用content布局,然后使用padding-bottom或者padding-top,把相应的位置空出来!!! 当需要在content里面滚动的时候,需要将body和html设置

一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和https协议.CDN是一种前端的优化方式. jquery的代码放在body标签里面的最下面. 二 全局css样式 全局css样式是为了确保分辨率的样式,需要在head标签中加上viewport元数据标签 <meta name="viewport" content="widt

表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或者手机上,显示的效果总是不统一,而且难以修改器样式. input[type="radio"] 样式定制 代码: <form> <p> <input type="radio" name="gender" id="

http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. 复制 <!DOCTYPE html> <html lang="zh-CN"> ...

checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="t

学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声明和嵌套 Ø        理解CSS的继承 Ø        熟练掌握CSS文本效果 Ø        掌握CSS图片效果 本章简介 上一章学习了CSS的语法基础及文字效果,学习了3种选择器,选择器是CSS中非常重要的概念,本章将深入学习选择器的知识,主要包括选择器的集体声明和嵌套.面向对象编程语

我们直接看样例然后在来解释使用方法. <!DOCTYPE html> <html> <head> <style> input[type="checkbox"]+p:before{ content:"台词:"; } </style> </head> <body> <input type="checkbox"/><p>我是唐老鸭.</p&

1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" content="width=device-width, initial-scale=1"> 1 上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%. 所有主流浏览