- 博客(26)
- 收藏
- 关注
RSS订阅转载 这可能是史上最全的CSS自适应布局总结
所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。唠叨一句：看到一个效果图的时候，千万不要急着手贱去敲代码！先思考清楚页面的构造，理清各元素之间的关系，特别需要注意的是在不同的设备下需要有怎
2017-07-28 11:13:15
519
3原创 CSS3阴影 box-shadow的使用和技巧总结
.box-shadow{ //Firefox4.0- -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Safariand Google chrome10.0- -webkit-box-shadow:投影方式 X轴
2017-06-05 10:57:15
322
转载 CSS 中 display:inline-block 属性使用详解
本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。基础知识display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-bloc
2017-05-11 09:55:54
1261
转载 css3中transition属性的详细介绍
transition用于在一定的时间内平滑的过度，这种效果可以在鼠标单击，获取焦点，被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性的属性值。从定义可以知道transition是一个用于动画过度的属性，然而transiton属性只不过是一个简写属性，用于设置四个过度属性，这四个过度属性分别是: transition-property (执行变换的属性 )
2017-04-04 16:04:13
583
转载 Bootstrap的优先级、选择器、伪类
概述：Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。由于大部分的选择器都非常的常见就一笔带过了，这里重点介绍一下Bootstrap用到的知识点。一、优先级之前我们使用CSS的时候知道样式有三种，分别是行内样式、内嵌样式、外部样式，它们的优先级是 行内>内嵌>外部。OK，现在我们将Bootstarp的优先级，如何确定CSS的优先级？这里我们要先
2017-04-04 14:43:47
1773
转载 JS调试必备的5个debug技巧
1. debugger;我以前也说过，你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。需要带有条件的断点吗？你只需要用if语句包围它：复制代码代码如下:if (somethingHappens) { debugger;}但要记住在程序发布前删掉它们。2. 设置在
2017-01-05 11:15:13
715
转载 CSS3阴影 box-shadow的使用和技巧总结
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}box-shadow属性的参数设置取值：阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，
2016-12-05 15:38:29
333
转载 CSS中强大的EM
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何
2016-12-01 11:40:58
327
转载 《实用技巧》——让你的网站变成响应式的3个简单步骤
1 – 布局 当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。 当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘
2016-11-29 14:49:56
2718
转载 html特殊字符 编码css3 content:"我是特殊符
html代码css代码.cross{ width: 20px; height: 20px; background-color: #F3F9FF; border-radius: 10px; border: 1px solid #DBE6EF; display: inline-block; position: relative;
2016-11-22 11:54:42
590
转载 CSS3 中关于 select 下拉列表的样式
1. [图片] Styling_SELECT.jpg 2. [代码]test.htmlDOCTYPEhtml>htmlxmlns="http://www.w3.org/1999/xhtml"> head> title>ADVANCED CSS3 STYLING OF SELECT ELEMENT (
2016-11-22 11:50:36
2419
转载 CSS3 box-sizing 属性
实例规定两个并排的带边框的框：div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}
2016-11-16 11:26:39
185
转载 如何设置css3中placeholder的字体颜色
因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。 ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
2016-11-16 11:19:59
322
转载 CSS3中的rem值与px之间的换算
rem好像也是一个相对大小的值，它是相对于根元素html>，比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px，这是twentytwelve默认主题里的设置）。然后其他的字体就是将你要的值除以14得到的值；比如默认的twentytwelve主题大小是960px；换算成rem就是960/14=68.57142857142857rem（我这个用电脑
2016-11-02 10:45:26
1301
转载 css3中transition属性详解
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
2016-10-13 11:45:39
744
原创 CSS3详解：transform常用属性
CSS3 transform是什么？transform的含义是：改变，使…变形；转换CSS3 transform都有哪些常用属性？transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。下面我们来分解各个属性的用法：transfor
2016-10-13 11:20:37
1022
转载 深入理解CSS过渡transition
定义 过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果transition-property: 过渡属性(默认值为all)transition-duration:
2016-10-12 16:54:48
1713
转载 我所知道的几种display:table-cell的应用
一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用（写于2016年8月24日：时代在变，当下，是时候登上舞台了）。我们都知道，单元格有一
2016-10-12 11:00:37
440
转载 基于display:table的CSS布局
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。网页元素应用上那些与表格相关的display属性值后，能够模仿出与
2016-10-12 10:51:35
281
转载 HTML5系列-SVG了解
我们对svg进行初步了解1.介绍SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图，但SVG有很多的用法你可能还不知道。我们通过AI可以制作svg，制作的矢量图在AI提供了
2016-10-11 17:21:23
524
转载 什么是SVG和SVG常用的形状
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体与其他图像格式相比，使用 SVG 的优势在于： SVG
2016-10-11 17:16:47
577
转载 CSS3新增样式大解析：[6]rotate之旋转-初级
CSS3中添加的transform是对元素进行变化操作的，包括位移，旋转，放大，变形等等。今天我就跟大家讲讲Rotate（旋转）的操作。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。方法/步骤css3新增的一个控制元素旋转属性的函
2016-10-11 16:55:06
420
转载 CSS3教程:border-image属性
一、border-image的兼容性border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些dem
2016-10-11 11:28:12
363
转载 stopPropagation, preventDefault 和 return false 的区别
因为有父,子节点同在; 因为有监听事件和浏览器默认动作之分。使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是stopPropagation(), preventDefault() 和 return false。它们之间有什么区别, 该何时使用呢? 将在本文中进行讲解。术语监听事件： 指在节点上能被监听的页面操作。如:
2016-10-10 16:39:04
165
原创 CSS3 transition 属性
div{width:100px;transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */}Internet Explorer
2016-07-05 11:08:24
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人