Quantcast
Channel: 小样儿(ShowYounger) » CSS
Browsing latest articles
Browse All 20 View Live

Image may be NSFW.
Clik here to view.

2015年需要了解的前端框架和语言

语言/平台 Node.js第一,PHT第二,JavaScript第三。因为Node.js的社区很多,所以这个结果你也不用太意外。如果你知道JavaScript,你已经一只脚踏进了用Node.js来构建Web APP的可能。 框架 AngularJS处于框架的领导地位。大量的公司和企业已经采用Angular,这就要求开发者更多的具备使用这个框架的技能。主要还是因为有Google里最好的工程师支持。...

View Article



Image may be NSFW.
Clik here to view.

CSS垂直居中总结

http://www.cnblogs.com/dojo-lzz/p/4419596.html 工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享。本文讨论的垂直居中仅支持IE8+ 1、使用绝对定位垂直居中 <div class="container"> <!--<div></div>--> <div class="center...

View Article

CSS雪碧(CSS Sprite)

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 原理 CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP 请求数量。该图片使用CSS...

View Article

CSS Compressor

http://www.cssdrive.com/index.php/main/csscompressor

View Article

各种前端资源汇总

Webpack: [webpack-howto] [webpack] [http://www.infoq.com/cn/articles/react-and-webpack]   JS相关: [javascript weekly] [javascript标准参考教程] --阮一峰的参考教程,可读性很好,非常不错的 [QuirksMode-DOM] [深入理解JAVASCRIPT系列] [User...

View Article


Image may be NSFW.
Clik here to view.

移动Web单行文字垂直居中的问题

单行文字垂直居中的方式你可能可以脱口而出,height和line-height设置为同样就行了,或者设置相同的padding-top和padding-bottom值。 上图是Chrome浏览器下的效果,没什么好惊讶的,完全符合我们的预期。 然后我们到移动端,设置相等的height和line-height,情况就变的很古怪,先上个截图(截图来自易信的Webview):...

View Article

前端页面如何优化合适

http://segmentfault.com/q/1010000004139542

View Article

前端模块化

前端模块化 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀...

View Article


Image may be NSFW.
Clik here to view.

CSS常见居中讨论

先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .container{ text-align: center; } </style> <div class="container"> <img src="Mars.png">...

View Article


Image may be NSFW.
Clik here to view.

纠正前端开发中容易出错知识点

扎实的基础有时候需要纵览群书,但针对编码领域,单靠纸上谈兵远远不够。思考,实践,再思考,再实践。累积到一定代码量,思路自然豁然开朗。重复的时间沉淀,将缔造更加强健高效的代码。 部分整理自网络,个人水平有限,望见谅。 html 1)将input设为只读,使用readonly而非diabled...

View Article

Image may be NSFW.
Clik here to view.

CSS常见布局问题整理

整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考。 纠正前端开发中容易出错知识点 http://www.showyounger.com/show/103985.html 1,  多元素水平居中 实现一下效果:...

View Article

Image may be NSFW.
Clik here to view.

css水平垂直居中总结

在网页布局中,垂直居中对齐总是一个绕不过的话题,而且这两种对齐方式由于浏览器渲染方式的不同,也存在很多不同的场景,本文试图将这些场景一一列举并给出解决方案,也是对这个知识点的一点回顾和总结。 1.水平居中 水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中,即父元素必须是块级盒子容器,父元素宽度必须已经被设定好,在这两个前提下我们来看水平居中问题。 场景1:子元素是块级元素且宽度没有设定...

View Article

Image may be NSFW.
Clik here to view.

【前端攻略】最全面的水平垂直居中方案与flexbox布局

最近又遇到许多垂直居中的问题,这是Css布局 当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案。而且在Css3的flexbox出现之后,解决各类居中 问题变得更加容易了。搜了搜园子内关于flexbox的文章觉得很多不够详尽,故想借介绍flexbox的同时好好总结一番各类垂直居中的方法。 由简至繁: 行内元素的水平居中...

View Article


Image may be NSFW.
Clik here to view.

微信网页设计样式库发布

为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。 该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。     开发者只需三步,就能在自己的网页上轻松实现按钮、浮层提示等功能: 1. 根据文档说明,下载 WeUI 库。 2....

View Article

2015-2016前端架构体系技术精简版

(玩个小游戏,去github点满2000+ star,将开放完整版和源文件下载,进入github) ![](http://7tszky.com1.z0.glb.clouddn.com/FsPayu9dzc8ecy1M16qQl5zmQe01) 点击查看github高清图 点击查看完整版 一、框架与组件 **bootstrap等UI框架设计与实现 伸缩布局:grid网格布局...

View Article


Image may be NSFW.
Clik here to view.

前端不为人知的一面--前端冷知识集锦

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址栏运行JavaScript代码...

View Article

CSS Sprites generator

http://csssprites.com/

View Article


Image may be NSFW.
Clik here to view.

为你的Web程序加个启动画面

.Net开发者一定熟悉下面这个画面: 这就是宇宙第一IDE Visual Studio的启动画面,学名叫Splash Screen(或者Splash Window)。同样,Javar们一定对Eclipse的启动画面不会陌生。不只是IDE,很多桌面程序都会有这个Splash 窗口,在程序进行初始化时显示。 这方面做得最赞的非Adobe旗下的设计类软件莫数了,毕竟是搞艺术出身的啊。博主从PS...

View Article

Image may be NSFW.
Clik here to view.

关于浏览器类型和版本号的思考

很多时候,我们需要根据浏览器版本做这样或者那样的事情,这里主要包括JS层的和CSS样式层面上。 CSS层面上的话,这里我就不比多说了主要是因为浏览器对CSS样式标准支持的程度不一样导致的,最多见的就是IE系的;JS层面的话是浏览器在最初 标准不统一是出现的各种问题,形成了当前的各种令人头疼的问题,即使是同一种浏览器在不同的版本号下可能也会存在各种的问题,这个时候处理浏览器的兼容性...

View Article

Image may be NSFW.
Clik here to view.

15 个有趣的 JavaScript 与 CSS 库

在十一月份的前端技术列表中,我们整合了一些令人感到惊叹的 GitHub 项目,其中包含了新的 CSS 框架、node.js包管理器,以及用于实现图标、加载效果、工具提示的纯 CSS 解决方案。 那么,让我们一起来看看吧。Have Fun !  1. Wing Wing Wing 是一个微型(压缩后仅有4KB)响应式的 CSS 框架,它提供了一个 12...

View Article
Browsing latest articles
Browse All 20 View Live




Latest Images