标签目录：css

2015
07-20

yii2.0 灵活使用AssetBundle管理CSS样式及JS脚本

2.0的变化相信大家都看到了，其中对一个资源包概念做出了很完美的实现，那就是AssetBundle，但是很多初学者朋友可能不太能够正确的领会其中的含义我画了一张图，大家可以将就看一下：其中，控制器动作的视图（view）渲染顺序是优先于我们的模板页（layout）的，那么一旦我们在某个视图中使用了新的JS库，或新的CSS样式文件，那么我们如何去处理呢？以下方式是错误的，请避免使用：有的人会直接在视图里添加对css或者js的link... 继续阅读 >

2015
07-10

15个实用的CSS在线实例教程

前端技术可以说是必须学习的一个技术，现在做网站都需要懂DIV、CSS，在国内很多企业招网页设计师都要求会写基本的前端代码，所以前端技术是必须了解的，对网页设计师本身也有帮助，今天向大家推荐一些不错的实用CSS教程，学习这些可以提高自己的CSS技能，了解一些新的好用的用法，在日后项目也许会用上。用CSS背景给SVG上色有关SVG图像、cssmask、给背景SVG添加颜色等一些用法。查看教程CSS网球... 继续阅读 >

2015
06-27

前端视频教程与文档教程

1.百度网盘下载地址 教程下载地址 :http://pan.baidu.com/s/1dD1ynzb 继续阅读 >

2015
06-20

Yii2.0引入CSS,JS文件方法

在yii2中，由于yii2版本升级导致了，很多yii2的用法跟yii1有着很大的区别，这几天一直在view层的视图界面徘徊着，遇到什么问题呢？问题就是搞不清我该如何去引入CSS,JS文件了！也看了社区中其它有经验的大神的教程，也按着做了，但是还是有一些问题存在着，比如说yii2的项目打开后，头部和尾部是公共的，该如何去掉？以及如何才能不改动原main.php文件的情况下，去引入JS,CSS文件，也许有一种办法就是写一个xxxAsset.php的配置文... 继续阅读 >

2015
05-15

css中单位 px、em 的区别

在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们... 继续阅读 >

2015
02-07

专为控制打印设计的CSS样式

大多数Web设计师对打印控制还不是很熟悉，他们往往更迷恋像素，而不是打印机。在现实世界中，很多人依赖从网站上打印网页来参考：在这个数字时代,在一些特殊的场合，很多人手中还会拿着纸张。Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距。为打印机而不是屏幕设计的样式/*样式将只应用于打印*/@mediaprint{}注＊也可通单独的CSS文件,设置link的media="print"属性来指定此样式专用于打印<l... 继续阅读 >

2015
02-02

即将推出的CSS4 Level 4 Selectors(第4级选择器)

注*CSS4草案发布了。是时侯学习一些新的CSS，不是吗？我们都习惯去学一个又一个的新前端框架，但是我们常常忘记了，作为我们每天使用的网络核心语言CSS本身也在不断地推出一些新功能。W3C编辑草案从1月15日的CSSSelectorsLevel4draft草案描述了一次CSS的飞跃。在我们开始之前，你应该知道：本文中的CSS，很多都无法在浏览器中工作。即使是最新的浏览器。这是因为，它们还是一些草案-处于起草... 继续阅读 >

2015
01-27

CSS 强制换行和超出隐藏实现

一、强制换行word-break:break-all;只对英文起作用，以字母作为换行依据。word-wrap:break-word;只对英文起作用，以单词作为换行依据。white-space:pre-wrap;只对中文起作用，强制换行。word-break:break-all和word-wrap:break-word都是能使其容器如div的内容自动换行，它们的区别在于：1、word-break:break-all假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断... 继续阅读 >

2015
01-27

CSS中设置margin:0 auto; 水平居中无效的原因分析

很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0auto;却没有效果，不能居中的问题，margin:0auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，在这里说两个典型的错误引起的不能居中的问题：1、没有设置宽度<divstyle="margin:0auto;"></div>看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题。2、没声明DOCTYPE1）DOCTYPE... 继续阅读 >

2015
01-27

Yii2.0教程应用结构篇 —— 前端资源

Yii中的资源是和Web页面相关的文件，可为CSS文件，JavaScript文件，图片或视频等，资源放在Web可访问的目录下，直接被Web服务器调用。通过程序自动管理资源更好一点，例如，当你在页面中使用[[yii\jui\DatePicker]]小部件时，它会自动包含需要的CSS和JavaScript文件，而不是要求你手工去找到这些文件并包含，当你升级小部件时，它会自动使用新版本的资源文件，在本教程中，我们会详述Yii提供的强大的资源管理功能。资源包Y... 继续阅读 >

2015
01-03

优化你的CSS

系列概述在移动web兴起的年代，速度优化重新被大家重视起来，因为手机的网络环境和性能比PC端差了很多，估计大家也能感觉到用手机打开网页的时候，能明显感觉到页面蜗牛般的速度。这个系列的优化会以移动环境为基础，当然绝大多数规则也同样适合PC端。优化的基本原则速度优化有一些基本思路，提前总结一下按需加载(只加载你需要的)并行(让串行的事情并行起来)压缩(通过压缩减少体积)缓存(利用缓存，减少请求等... 继续阅读 >

2014
12-13

10个不可忽视的CSS代码片段

本文介绍10个非常有用的CSS代码片段，绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等，使用平率高，经常无法完全达到想要效果。现在有了这10个CSS代码片段，我们可以将这些效果做得更好。1、垂直对齐在使用CSS的时候，你可能会出现疑问，我如何在容器中将文本或元素垂直对齐。现在使用CSS3Transforms，我们可以更有效解决这问题，如下：.verticalcenter{position:relative;top:... 继续阅读 >

2014
12-03

CSS 类名的单词连字符：下划线还是连接符？

本文的部分内容整理自我对此问题的解答：命名CSS的类或ID时单词间如何连接？-知乎问题CSS类或ID命名时单词间连接通常有这几种写法：驼峰式：solutionTitle、solutionDetail用横杠连接：solution-title、solution-detail下划线连接：solution_title、solution_detail应该采用哪种写法呢？选择的时候是出于个人习惯还是有别的考虑？看了下豆瓣，美团，淘宝的源码，都是采用solution_t... 继续阅读 >

2014
12-03

7件你不知道但可以用CSS做的事

不管你信不信，CSS和JavaScript开始重叠，就像CSS增加了更多功能一新。在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。CSS@supports在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScri... 继续阅读 >

2014
12-03

Web 开发中 20 个很有用的 CSS 库

在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用。在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方... 继续阅读 >

2014
12-03

2014年20款最好的CSS工具

说到WEB设计，不得不介绍介绍CSS工具，CSS工具在这里面扮演很重要的角色，可以简化无数开发者和设计师的工作，写出更好的CSS代码。而网上有非常多的CSS工具，帮助设计师和开发者高效的工作和进行更多创新的创作，设计师和web开发者也把越来越多的CSS工具收入为自身的开发和设计利器。在这篇文章中，我们罗列了2014年最好的20款CSS工具，希望能帮助大家简化自己的开发工作，创作出更多更好的创新... 继续阅读 >