Welcome

首页 / 脚本样式 / CSS

CSS 使用Sprites技术实现圆角效果

2017-02-06 18
首先来简单说一下什么是Sprites，Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。第一步：创建我们的 Sprite用PS等工具合成如图所示的图片（以一个像素的红线来区分）第二步：编写HTML代码首先，我们会给容器 di...

《CSS3实战》笔记--渐变设计（一）

2017-02-06 17
基于CSS的渐变与图片渐变相比，最大的优点是便于修改，同时支持无级缩放，过渡更加自然。目前，实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器，基于Presto引擎的Opera浏览器暂时不支持渐变，基于Trident的IE虽然可以通过滤镜的方式实现，但并不提倡。Webkit引擎（Safari 4及以上版本）的CSS渐变设计基本语法：-webkit-gradient（<type>,<point>[,<radius>...

《CSS3实战》笔记--渐变设计（二）

2017-02-06 21
Gecko引擎的CSS渐变设计直线渐变基本语法-moz-linear-gradient（[<point> || <angle>,]?<stop>,<stop>[,<stop>]*）参数说明：<point>:定义渐变起始点，取值包含数值，百分比，也可以使用关键字，其中left，center 和 right 关键字定义 x 轴坐标，top，center 和 bottom 关键字定义...

《CSS3实战》笔记--渐变设计（三）

2017-02-06 15
IE浏览器引擎的CSS渐变实现方法IE并不支持CSS渐变，但是提供了渐变滤镜，可以用来实现简单的渐变效果。基本语法该参数的参数说明如下：enabled:设置或检索滤镜是否激活。可选布尔值，包括 true 和 false，默认值为 true ，表示激活状态。startColor ：设置或检索色彩渐变的开始颜色和透明度。可选项，其格式为#AARRGGBB。AA，RR，GG，BB为十六进制正整数，取值范围为00~FF。RR指定红色值，GG指定绿色值，BB指定蓝色...

CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

2017-02-06 15
今天分享一个CSS3制作的翻牌效果，效果如下图所示，所过把把这个效果应用于相册肯定会很炫的。呵呵，超酷啊。一、HTML代码： 因为是CSS3实现，所以大家可以看到没有任何的JS代码。ul为一组图片，每个li中有个a（因为我们希望点击图片可以跳转）,a中包含两个div，一个是正常显示时的（即显示图片），一个是图片旋转后显示的（即介绍）。<！doctype html><html><head><meta charset...

html5手机触屏touch事件介绍

2017-02-06 25
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：touches：当前位于屏幕上的...

HTML5实战与剖析之触摸事件（touchstart、touchmove和touchend）

2017-02-06 24
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在...

学习小实例--滚动条的简单实现

2017-02-06 17
效果：代码：<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" c...

cookie解决微信不能存储localStorage的问题

2017-02-06 16
在开发基于微信的Web页面时，发现有些机型不能存储信息到localStorage中，或者是页面一旦关闭，存储的信息也失效了。用cookie来替代localStorage，存储一些简单的数据。上网查找了一下，发现w3school上已有不错的解决方案。设置cookie:function setCookie（c_name,value,expiredays）{var exdate=new Date（）exdate.setDate（exdate.getDate（）+...

input submit、button和回车键提交数据详解

2016-10-20 99
<form><input name="name"><input type="submit" value="提交"></form>以这种方式提交，input 值为22222222时，后面递交的url 就会变为localhost:3980/input.html?name=222222其中有些值得注意的细节： 设置type=submit后，输入控件会变成一个按钮，显示的文字为其value值，默认值是Subm...

div的offsetLeft与style.left区别

2016-10-18 30
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于：1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetL...

word-wrap

2016-07-27 40
word-wrap : normal | break-word 参数：normal : 允许内容顶开指定的容器边界break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生说明：设置或检索当当前行超过指定容器的边界时是否断开转行。对应的脚本特性为wordWrap。请参阅我编写的其他书目。示例：div { word-wrap: break-word; } word-break : normal | break-all...

CSS经典技巧十则第1/2页

2016-07-27 34
1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可以把它们全部写到一行上去：font: bold italic small-caps 1em/1.5em verdana,sans-serif;真不错...

HTML结构化：实践DIV＋CSS网页布局入门指南

2016-07-27 26
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性（例如：cellpadding,、hspace、align="left"等等）束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知...

CSS超级技巧大放送合集

2016-07-27 39
一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二.明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。...

CSS锦囊

2016-07-27 33
在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。有疑问，先验证 在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。 在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。 如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器...

DIV_圆边圆角的实现

2016-07-27 34
v:*{behavior: url（#default#VML）;} [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]...

漂亮的表格

2016-07-27 30
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; ...

凹陷文字 推荐

2016-07-27 29
怎么样，我凹下去了吧？你不想试试吗？www.lenvo.cn [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]...

自定义容器和字体大小

2016-07-27 30
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Home</title>...
<< 41 42 43 44 45 46 47 48 49 50 >>
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图