css
关注
分享
扫一扫
文章平均质量分 74
zzc1684
这个作者很懒，什么都没留下…
展开
-
table中强制不换行
总是一些文章说要强制换行，很少提到说如何不换行。一般都会使用word-break: keep-all;使得强制不换行。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=...原创 2015-03-24 09:58:54 · 249 阅读 · 0 评论 -
AngularJS学习笔记
http://www.360doc.com/content/13/0729/13/13328522_303333441.shtml AngularJS学习笔记2013-07-19 18:33 更新邹业盛关于AngularJS开始的例子依赖注入作用域数据绑定与模板5.1. 数据->模板5.2. 模板->数据5.3....原创 2015-06-18 11:18:58 · 322 阅读 · 0 评论 -
css兼容性的图片变灰
img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0...原创 2014-09-22 15:33:10 · 225 阅读 · 0 评论 -
半透明遮蔽层div
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>半透明遮蔽层div</title> <meta content="width=device-width, ini原创 2016-05-30 09:55:07 · 204 阅读 · 0 评论 -
CSS布局 ——从display，position， float属性谈起
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W...原创 2015-08-11 17:40:24 · 127 阅读 · 0 评论 -
css input[type=file] 样式美化，input上传按钮美化
思路： input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 代码如下： DOM结构： <a href="javascript:;" class="a-upload"> <input type="file" name="" id=""&原创 2016-09-18 15:19:10 · 1575 阅读 · 0 评论 -
盒子模型，块级元素和行内元素
总结块级元素和行内元素区别行内元素同一行水平排列。块级元素各占据一行，垂直方向排列。块级元素可以包含行内元素和块级元素。但行内元素不能包含块级元素。行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效可以通过修改样式display属性改...原创 2016-01-15 09:37:52 · 295 阅读 · 0 评论 -
行内元素和margin叠加问题
<!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>&原创 2016-01-15 10:34:00 · 264 阅读 · 0 评论 -
如何使用CSS设置<input>标签的背景小图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/ur...原创 2016-01-16 14:55:02 · 432 阅读 · 0 评论 -
CSS3background-size背景图片尺寸属性
前言好了第二天更新background-size，那么就更新，小文章一篇，希望大家一起提高。background-size 可以设置背景图片的大小，数值包括 长度length和百分比percentage。 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。那么下面我们一起来了解这个background-size属性吧。background-siz...原创 2016-01-16 15:13:09 · 351 阅读 · 0 评论 -
CSS3实例教程:hover、active和:focus伪选择器。
CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。 今天我们先来接触:hover、active和:focus这三种状态伪类选择器。:hover选择器、:active选择器和:focus选择器 :hover选择器：当鼠标悬停在所指定的元素上时所使用的样式； ...原创 2016-01-16 15:39:17 · 638 阅读 · 0 评论 -
使用 CSS 转换为你的网页带来活力让你的网页栩栩如生
使用级联样式表 (CSS) 转换，你可以在二维和三维空间内转换元素。 使用 CSS 转换，你可以在元素的父元素中更改元素的位置，操作元素的旋转或缩放以及应用扭曲失真。添加 perspective 属性（或 perspective 转换函数）可将第三维添加到转换。我们将在这里介绍 CSS 转换坐标系统。然后，我们将演示 CSS 公布的转换功能，并以图示 perspective 属性的效果...原创 2016-02-24 01:14:09 · 173 阅读 · 0 评论 -
CSS3 Gradient
CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient─CS...原创 2016-02-24 17:25:41 · 201 阅读 · 0 评论 -
webkitAnimationEnd事件与webkitTransitionEnd事件
在CSS 3中，可以通过使用keyframe样式属性与animation样式属性实现animation动画，使用transition样式属性实现transition动画。在WebKit引擎的浏览器（包括Chrome浏览器与Safari浏览器）中，存在与这两种动画功能相关的webkitAnimationEnd 事件与webkitTransitionEnd事件，本文对这两个事件进行详细介绍...原创 2016-02-24 22:10:48 · 203 阅读 · 0 评论 -
IE10之-ms-touch-action
本文主要内容来自：http://technet.microsoft.com/zh-cn/library/hh772044 个人做调研学习用！ -ms-touch-action --------------- 在IE10下给元素增加触控效果 auto 默认值，允许浏览器给...原创 2016-02-25 18:38:31 · 126 阅读 · 0 评论 -
学习使用：before和：after伪元素
如果你一直密切关注着各种网页设计的博客，你可能已经注意到了：before和：after伪元素已经在前端开发中获得了相当多的关注。特别是在Nicolas Gallagher的博客中，后期运用了很多伪类元素。Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标。为了补充说明上述内容(和利用当前发展的趋势)，我收集一些完全在伪元素下运行的东西。本文主要针对...原创 2015-06-18 09:39:59 · 174 阅读 · 0 评论 -
Layer Styles CSS在线编辑工具
http://www.layerstyles.org/builder.html 它使用起来就像浏览器中你最爱的图片编辑器一般，而它能够帮助你生成CSS。原创 2015-06-18 09:38:51 · 421 阅读 · 0 评论 -
10套超漂亮的Bootstrap UI KIT(已转Html格式)
我们平时分享过不少的精品UI KIT PSD素材，这些组件虽然很漂亮，但是要转换成HTML网页格式时却不是一件容易的事情，因为UI组件元素很多，如果要转HTML需要不少的时间，而且要精通前端技术。今天设计达人网整理自pixelkit上的免费UI KIT素材，这些PSD已经转成DIV+CSS格式，可以直接快速的应用在网页上，更棒的是它使用Bootstrap框架编写，最新的HTML5+CSS3...原创 2015-06-06 20:27:17 · 468 阅读 · 0 评论 -
再来 20 个免费的 Bootstrap 的后台管理模板
http://www.oschina.net/news/52033/free-bootstrap-admin-templates 6月14日上海 OSC 源创会开始报名，送机械键盘和开源无码内裤之前 OSC 曾经发过多个后台管理界面模板的推荐，例如：50 个漂亮的后台管理界面模板25 个精美的后台管理界面模板和布局分享 6 套超酷的后台管理...原创 2015-06-06 20:34:54 · 1837 阅读 · 0 评论 -
LESS CSS 框架简介 使用 LESS 简化层叠样式表（CSS）的编写
http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ http://www.bootcss.com/p/lesscss/#synopsis 简介CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义...原创 2015-06-11 14:12:40 · 223 阅读 · 0 评论 -
Less2Css插件
Less2Css插件依赖lessc这个工具，下载这个压缩包，然后解压后，将路径添加到系统环境Path变量中，若在cmd中，输入lessc，不报错，则表示设置成功原创 2015-06-12 10:03:05 · 263 阅读 · 0 评论 -
使用 Google Fonts 为网页添加美观字体
在线字体提供丰富多样的字体样式，能使页面更美观，更具吸引力。Google Fonts 就是一个开源的在线字体库，使用起来简单快速。 前言文字是网页中很重要的组成部分。为文字选择一个合适的字体，能够更好的展现一个网站的个性，表达所要传递的信息，同时吸引用户来产生兴趣。说到字体，我们首先会想到 CSS 里面的 font，例如：<html><head>...原创 2015-06-12 11:51:17 · 1697 阅读 · 1 评论 -
background-position 用法详细介绍
语法： background-position : length || length background-position : position || position 取值： length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | righ...原创 2015-06-12 14:57:19 · 130 阅读 · 0 评论 -
IE6 下父级(relative)使用padding后,子元素绝对定位(absolute)的bug
在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但 ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等貌似有些不一致。在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，...原创 2015-06-12 15:02:20 · 338 阅读 · 0 评论 -
十步图解CSS的position
CSS的positon，我想做为一个Web制作者来说都有碰到过，但至于对其是否真正的了解呢？那我就不也说了，至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用，觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家...原创 2015-06-12 15:07:51 · 134 阅读 · 0 评论 -
CSS 清除浮动
div定位布局图解（position:absolute|relative|fixed和float浮动）http://www.ipmtea.net/css/201010/09_335.html 众 所周知，平时在写HTML代码时，难免少不了使用Float样式，这样一来，假使您没有清除浮动，那么有浮动元素的父元素容器将元素将无法自动撑开。换句 简单好理解的话...原创 2015-06-13 01:00:48 · 185 阅读 · 0 评论 -
7 款 Bootstrap 在线富编辑器
Bootstrap 已经大大简化响应式 web 开发，但是，如果再加上不用手动一点点敲代码，而是可以快速选择你想要使用的 Bootstrap 组件，然后直接将其拖进你的画板中，开发是否会变得更加轻松？！这便是所谓的所见即所得（What you see is what you get，WYSIWYG）开发模式，能帮你达成这一切的，便是“所见即所得编辑器”。所见即所得编辑器通常分为以下两...原创 2015-06-14 09:32:04 · 226 阅读 · 0 评论 -
21个免费的UI界面设计工具、资源及网站
本文将介绍21个免费的UI界面设计工具、资源及网站，如果你在做用户体验设计、界面设计、产品设计、JS前段开发、手机产品设计以及iPad和平板电脑产品设计，不妨来看看。AD：51CTO移动APP安全沙龙！马上要爆满，手慢没座位！我们刚刚介绍了移动设计初探：触屏网页设计。本文将介绍一些UI界面与设计使用的元素、软件和网站。内容很丰富，适合用户体验设计师、界面设计师、产品设计师、JS前...原创 2015-06-15 09:27:52 · 299 阅读 · 0 评论 -
丰富您设计的10个CSS3效果库
Magic CSS3 Animations Magic CSS3 Animations是一个CSS3动画包，拥有一些特效可以你的Web项目中免费使用。拥有像金光闪闪，角度，旋转，炸 弹等特殊效果。使用简单，大部分的动画是跨浏览器兼容。 Animate.css Animate.css是一个现成的CSS3的动画特效库。这个库拥有60个不同的动画效果。Once animate.min.css is i...原创 2015-06-16 00:44:50 · 559 阅读 · 0 评论 -
10个基于jQuery/CSS3的图片特效素材
阅读目录1、jQuery iNav水平滚动菜画插件2、jQuery鼠标悬停图片动画HoverEx3、jQuery带小图标的图片滑动焦点图4、jQuery仿搜狗输入法首页焦点图5、jQuery原始图片对比插件6、jQuery仿腾讯游戏上古世纪焦点图7、jQuery环形图片播放插件8、jQuery抖动动画焦点图9、jQuery带文字描述的焦点图10、jQ...原创 2015-06-16 00:51:14 · 192 阅读 · 0 评论 -
CSS3盒模型display:box;box-flex详解
display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（...原创 2015-06-16 08:56:20 · 167 阅读 · 0 评论 -
CSS hack大全&详解（什么是CSS hack）
1、什么是CSS hack?CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏 览器会先给元素使用width:300px;的样式，紧接着后面还有个_wid...原创 2016-02-26 14:38:15 · 153 阅读 · 0 评论