Welcome 微信登录

首页 / 脚本样式 / CSS

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

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

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

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

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

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

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

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

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

html5手机触屏touch事件介绍

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

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

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

div的offsetLeft与style.left区别

2016年10月18日 77 阅读
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于：1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetL...
HTML结构化：实践DIV＋CSS网页布局入门指南

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

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

CSS超级技巧大放送合集

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

CSS锦囊

2016年07月27日 96 阅读
在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。有疑问，先验证 在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。 在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。 如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器...
<< 41 42 43 44 45 46 47 48 49 50 >>
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图