jQuery实现购物车数字加减效果

jQuery实现购物车数字加减效果

jQuery实现购物车数字加减效果,方法本简单。经常会写到购物车这块,而购物车很多就有加减这个效果(可以将HTML代码复制多个,同时支持),小小的总结了一下,代码如下: HTML <div class="gw_num"> <em class="jian">-</em> <input type="text" value="1" class="num"/> <em class="add">+</em> </div> css .gw_num{border: 1px solid #dbdbdb;width: 110px;line-he……
confirm优化样式的弹窗教程

confirm优化样式的弹窗教程

根据 alert confirm 优化样式的弹窗,很简单. HTML /* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } table{bord……
纯CSS3制作漂亮的价格表

纯CSS3制作漂亮的价格表

网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐。最常见的是主机商发布产品价格信息页,本文结合实例给大家分享以纯CSS+HTML实现的价格表。  HTML 我们以星美数据产品为例,将HTML结构布局好。其实我们所说的价格表并不是表格,全是ul,li元素组成,通过CSS来美化,展现在我们面前的页面效果看似表格而已。 <div id="pricePlans"> <ul id="p……
jQuery全屏滚动插件fullPage.js下载/参数

jQuery全屏滚动插件fullPage.js下载/参数

  简介 如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 ……
响应式设计教程:展示响应式设计的基本原理

响应式设计教程:展示响应式设计的基本原理

响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上,它比你想象的简单得多。为了让你能快速入门,我准备了一个简易的教程。通过这三个步骤,你一定可以了解响应式设计的基本原理和media query(在你有一些CSS基础的前提下)。 第一步. Meta 标签 为了适应屏幕,多数的移动浏览器会把HTML网页缩放到设备屏……
css3巧用border做旋转加载效果

css3巧用border做旋转加载效果

该效果主要是用到了css3的动画animation以及transform中的角度变换rotate。html的结构十分简单,用到一个div,也用到了css3中的属性 border-radius 。这边只测试了chrome的效果。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @-webkit-keyframes load{ 0%{ transform:rotate(0); } 50%{ trans……
纯css3可扩展搜索框代码

纯css3可扩展搜索框代码

可扩展纯css3圆形搜索框是一款适合移动和响应的设计。效果非常酷,但是不支持低版本的IE浏览器哦.css部分代码 input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; /* remove the search and cancel icon……
分享一份常用的手机端页面开发的CSS reset

分享一份常用的手机端页面开发的CSS reset

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,figcaption,figure,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0} body,button,input,select,textarea{font:12px/1 Lucida Grande,'Microsoft YaHei',"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif} h1{font-size:18px;font-weight:normal} h2{font-size:16px;font-weight:normal} h3{font-size:14px;font-……
CSS3美化复选框checkbox

CSS3美化复选框checkbox

我们知道HTML复选框默认的风格很简单,和处理图片代替复选框将美化页面形式的麻烦,那么这篇文章会带你一起的例子看看CSS3使复选框复选框样式美化使用,带来凉爽的滑动效果。  HTML 通常我们使用以下html结构,我们给复选框定义id#checkbox_a1,然后使用label的for属性与之关联,这样的话,用户点击label的时候,实际上就相当于点击了#checkbox_a1。 <input type="checkbox" id="checkbox_a1" class="chk_1" ……
CSS 背景-CSS background

CSS 背景-CSS background

一、Css background背景语法 CSS背景基础知识:CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。背景语法:background: background-color || background-image || background-repeat || background-attachment || background-positionCSS中背景单词:background-color 设置颜色作为对象背景颜色background-image 设置图片作为背景图片background-repeat 设置背景平铺重复方向……
CSS 阴影-CSS3 box-shadow

CSS 阴影-CSS3 box-shadow

今天我们探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow,只不过不同的是text-shadow是对象的文本设置阴影,而box-shadow是给对象实现图层阴影效果。今天我们接着一起来探讨一下CSS3中的另一个属性box-shadow的使用方法。CSS3的box-shadow有点类似于text-shadow,只不过不同的是text-shadow是对象的文本设置阴影,而box-shadow是给对象实现图层阴影效果。本文我们搁下IE不谈,只谈……