文章列表
云师兄 ,随心所欲 于 10个月前发表 1135 4 2
适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和其所有子元素设置透明度级别 2.css选择器---------------------- http://www.w3school.com.cn/cssref/css_selectors.asp [http://www.w3school.com.cn/cssref/css_selectors.asp] 其中li:nth-child(2n+1)表示选择基数个(可以类推) input:not([type="submit"]) 可以做否定的选择 3.html5兼容浏览器老版本对标签不识别问题 <!--[if Lt IE 9 ] [removed] [removed] 4.文本阴影 text-shadow:1px 1px 1px white; 右偏移,左偏移, 模糊程度(1个PX相当于一个轮廓) ,颜色 5.多出的文本隐藏和显示 overflow:hidden;text-overflow:ellipsis; hover
10个月前
CSS/重构
结一 于 10个月前发表 1982 0 0
一般来说,网格系统分为container、row及column三大部分,而container一般是负责内容居中的,这对pc端比较合适,而大移动端是真的不太需要,所以直接砍掉,那么就剩下row和column了。 上代码: @mixin row() {width: 100%;display: flex; } @mixin col($num, $total: 1) {// 如果$total为默认的1,则表示等分的$num分之一// 否则计算$num/$total@if$total == 1 {width: 100% / $num; } @else {width: percentage($num / $total); } } 如何使用: .row{ @include row; } // col的命名规范为col-占的格子数-总的格子数.col-1-2{ @include col(2); } .col-1-3{ @include col(1, 3); } .col-2-3{ @include col(2, 3); } .col-1-4{
10个月前
CSS/重构
分享的项目:web-fontmin By forsigner

字体子集化,在线提取你需要的字体。

708 0 0
1年前
CSS/重构
forsigner 于 1年前发表 1202 1 0
关于@FONT-FACE @font-face [http://www.w3.org/TR/css3-fonts/] 是 CSS3 [http://www.w3.org/TR/CSS/#css3] 中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你可能见过类似下面的代码片段,它可以让 @font-face 兼容所有浏览器。 @font-face{ font-family:"SentyZHAO";
1年前
CSS/重构
结一 于 1年前发表 3946 3 3
首先,本文是普通入门知识篇,主要说的是断点的设置。 很多想接触响应式的同学都会有以下疑惑: * 为什么要做响应式? * 怎么入门响应式,是不是很难? * 分辨率那么多,响应式断点怎么设置? 所以本文简单说下下手响应式的一些基础,包你入门响应式,没学会的话再手把手教。 为什么要学响应式 这个问题呢就跟女神有多面一样,比喻在家是睡衣,上班是职业装,团建参加活动什么的就是休闲运动装了。网页呢,对于pc,平板,手机当然也得有不同的打扮排版才吸引用户,提升体验。 不然如中国移动手机端的表现是这样的(整个大小被等比例缩放到适应移动端的device-width),根本没法提用户体验: 中国移动移动端表现 [http://7tszky.com1.z0.glb.clouddn.com/FtN1lC_cKmEXPUkFBaU8tFEkq0Lw] 当然还有个更俗的原因就是你要全方位无死角伺候好你的各种平台的用户,让他们用得爽,然后你每个月才有白花花的银子。 响应式是什么 简单来说,响应式就是在不同的分辨率下,都要让内容以最佳的展现形式呈现给你用户,提升用户体验。如下图:
1年前
CSS/重构
结一 于 1年前发表 1802 1 5
“无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《开经偈》 HTML标签 * HTML入门 [https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Introduction] * HTML5 标签列表 [https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list] * 标签元素分类 [http://www.adminwang.com/css/90.html] ie8- 不支持html5新增标签,可通过引入js来实现: html5shiv [https://github.com/afarkas/html5shiv/] <!--[if lt IE 9]> <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]-->
1年前
CSS/重构
结一 于 1年前发表 3139 0 4
由于移动端的设备宽度各不相同,而且因为竖屏宽度都比较小,所以一般都采用满屏的方式布局,而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏,那么各种百分比技术就显得尤其重要,下面大概聊聊实战过程使用到的一些技术。 为了方便各种技术对比,我们使用不同的技术实现同一个四等分满屏,且每个小分为一个正方形的需求。 整体的html结构为: // `list--xxx`表示下面具体技术的名字 ul.full-list.list--xxx .item*4 为了方便视觉查看,我们将奇偶数的item背景色设置不同: .full-list.item{ background:#f5f5f5; }.full-list.item:nth-child(2n){ background: #ccc; } .full-list.item:hover{ background: #f00; } demo效果见: 移动端百分比宽度的几种实现 [http://output.jsbin.com/yuwopic] VW
1年前
CSS/重构
moonye 于 1年前发表 1431 0 2
居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平居中可以使内容是inline或inline-block 非文本场景下,其实padding也可以实现相同效果。这个可以根据内容自适应,不然这样一来外层容器宽度就不固定了。 文本垂直居中 文本垂直居中 单行的时候 line-height:30px; height:30px; 如果是多行,那么可以考虑这样子 padding:30px0; 这样上下间距一样了,多行无压力 图片居中 这里分几个场景 1 容器比较大,且容器和图片是固定了宽高的,那么用上面的思路很容易解决,内联+line-height或内联+padding //css.wrap0 { height: 300px; width: 100%; text-align: center; } .c0{ line-height: 300px; display: inline-block; } //dom <div class="wrap0">
1年前
CSS/重构
张颖 ,认真认真 于 1年前发表 2796 5 0
适逢元旦假期,妹子逛街吃火锅看电影陪女朋友之际,写出来的文章难免画风略微粗糙,但是这个动画的实现还是费了一番脑子的,话说程序猿之间交流并不需要过多解释,上代码就搞定。 首先说一下我们这个要实现的圆环进度动画,有三个特点: 1、背景是透明的,所以用遮挡实现的方法就不用考虑了; 2、圆环颜色是有透明度的,所以用两个半圆环实现大于180度的圆环效果不能有叠加部分; 3、最好用纯css3简洁的实现。 然后要备注下重点: 我们的动画效果要应用在 移动端 ,尤其是 有些性能较差的安卓手机 ,所以一定要考虑性能问题。 先上效果图: [http://7tszky.com1.z0.glb.clouddn.com/FnIwJNX1DXIxd66ff9B3Gxq85bsU] 所以我们很快的出了我们被pass掉的第一版方案 :对于不可用遮挡来实现的圆环动画效果,我们可以用两个半圆环的运动来组合,动画效果使用transition和transform实现。 圆环小于50%时: [http://7tszky.com1.z0.glb.clouddn.com/Fvi4kJHNsi8DTbnzHdFec9oPfHqY]
1年前
CSS/重构
结一 于 1年前发表 2065 1 1
seo本身涉及范围非常广,所包含的知识也是非常值得深入研究的一个方向,本文仅从重构侧出发聊聊最近做的一些seo实战。 TDK优化 TDK为 title , description , keywords 三个的统称。当然 title 是最有用的,是非常值得优化的;而 keywords 因为以前被seo人员过度使用,所以现在对这个进行优化对搜索引擎是没用的,这里就不说了; description 的描述会直接显示在搜索的介绍中,所以对用户的判断是否点击还是非常有效的。 TITLE优化 title 的分隔符一般有 , , _ , - 等,其中 _ 对百度比较友好,而 - 对谷歌比较友好,第四个为空格,英文站点可以使用,中文少用。 title 长度一般pc端大概30个中文,移动端20个,超过则会截断为省略号。 因为业务关系,我们做的更多的是针对百度搜索引擎的优化,所以这里把百度搜索引擎优化的建议分享下: title 格式: * 首页: 网站名称 或者 网站名称_提供服务介绍or产品介绍 * 频道页: 频道名称_网站名称 * 文章页: 文章title_频道名称_网站名称
1年前
CSS/重构
张颖 ,认真认真 于 1年前发表 1454 2 0
前言 关于z-index,每个人都会用,但大多人都不理解其真正的生效机制。最近做项目有很多用到z-index的地方,才发现以前用的一知半解,所以上网查了一些资料梳理了一下。下文参考自 !What No One Told You About Z-Index [http://philipwalton.com/articles/what-no-one-told-you-about-z-index/] ,文中介绍了很多关于z-index使用的关键点。 关于z-index的生效机制并不复杂,但如果不花一点时间研究其特点,有很多关键点容易被忽略。 问题 HTML文档中有三个div元素,每个div中存在一个span元素,三个span元素分别设置背景颜色为red,green,以及blue。然后每个span都设置为position: absolute,三个span的位置稍微错开以便可以仔细观察它们之间的堆叠顺序。然后将第一个span元素的z-index设置为1,其他两个不设置。具体代码如下:
1年前
CSS/重构
coverguo 于 1年前发表 1458 1 0
阅读此文章前,建议大家先观看一下这个迪斯尼的 小视频 [http://v.qq.com/boke/page/x/0/p/x0156risyip.html] , 本文的灵感来自于该视频的哈 该视频是描述迪士尼这么多年积累的动画开发经验和规则。 有人就好奇了,迪士尼的动画守则跟我们前端有啥关系吖? 当然有关系! * 我们知道在前端开发中,我们少不了使用css3 transiton(过渡) 和 animation(动画) 来制作页面生动的交互效果。 * 然而生动形象的动画往往建立在 正确的动画规则基础下 。 -------------------------------------------------------------------------------- 看到这些原则的时候,我就在思考,是否在 前端开发动画 中,能够运用到这些原则呢?故自己根据这些原则动手试了下相应的动画效果。 由于篇幅过长,故分成上下两篇来描述这些原则哈
1年前
CSS/重构