CSS入门教程:网页首字下沉:first-letter版本：CSS2 兼容性：IE5.5 语法：Selector : first-letter { sRules } 说明：设置对象内的第一个字符的样式。此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。 示例：p a:first-letter { color: gre...
(一)网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角： corner横幅广告： banner子菜单： subMenu搜索： search搜索框： searchBox登录： login登录条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示信息： msg热点：hot新闻： news小技巧： tips下载： download栏目标题： title热点： hot加入： joinus注册： regsiter指南...
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.htmloverflow:hidden真的失效了吗http://www.aliued.cn/2012/12/30/overflowhidden%E7%9C%9F%E7%9A%84%E5%A4%B1%E6%95%88%E4%BA%86%E5%90%97.html原文：http://www.cnblogs.com/CarolHuang/p/6116773.html
CSS的目标，或者说是革命纲领就是：“将样式与内容分离”，这个目标能否实现，很大程度上依赖于CSS访问内容的能力。在CSS3中，这个任务得到了有力支持，强大的结构伪类Structural pseudo-classes出现了。提供了非常丰富的查询方式，让CSS选择器变得如此和蔼可亲了。让我们来快速概览一下，同时期待着浏览器整体换代的来到，毕竟只有最新的浏览器才支持CSS3选择器及其他特性。 支持浏览器：Firefox 3.1+, IE8+ (only in IE8 stand...
http://www.cnblogs.com/milkmap/archive/2012/02/09/2343880.htmlionicframework.com原文：http://www.cnblogs.com/Athrun/p/4683429.html
1、display block块级元素（div、p等） inline 行内元素（a、span等） 常见的例子：把li修改成inline ，制作成水平菜单2、max-width 来适应不同浏览器窗口大小，IE7+都支持这一属性3、box-sizing:border-box 将元素设置这一属性时，元素的内边距和边框不会影响其内容宽度，再也不需要计算内容宽度的值了。 缺点就是不同浏览器内核要分别设置，并只支持IE8+4、position 5、浮动与display:inline-block 的区别与用法 教程见...
前端工程化(2)：postCss 和 babel的使用本文例子可以点击这里0 前言babel是什么： 官网给出的定义Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。postcss是什么： 官网给出的的定义：PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持...
一般的文字截断（适用于内联与块）：.text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/}对于表格文字溢出的定义： 对于表格超出范围显示省略号table{ width:...
终于把这套课程讲完了，虽然时间隔了很长，但也算有始有终了，这是在YY讲课中我自己录的，讲了网页设计的基础，这也是我第一次给那么多人讲课，讲的不好多多包涵。前几次视频和课件是分开的，后几次都打包在一起了，由于第三章是教使用Dreamweaver，而我建议开始学的时候使用文本编辑器，因此就没讲这章，等学完基础，相信你们能够自己摸索Dreamweaver的使用。视频：第一、二章网页设计语言基础(1)：http://yun.baidu.com/s/1sjz2V...
问题描述使用@import引入外部css，作用域却是全局的<template></template><script>export default {name: "user"}; </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import "../static/css/user.css"; .user-content{background-color: #3982e5; } </style>Add "scoped" attribute to limit CSS to this component only这句话大家应该是见多了, 我也使用scoped, 但是使用@import引...
:active伪类是在类似‘mousedown‘事件触发的时机生效的，而手机上并没有‘mousedown‘事件，取而代之的只有‘touchstart‘和‘touchend‘。只需要给这个a链接的touch系列的任意事件touchstart/touchend绑定一个空的匿名方法即可hack成功var a = document.getElementsByTagName(‘a‘);for(var i = 0; i < a.length; i++) { a[i].addEventListener(‘touchstart‘,function(){},false); }添加以上代码，touch按下去后，发现a的...
//扩展Extend less的伪类，合并了选择器，放在与它引用匹配的选择器上Use Method：以在study上扩展test的样式为例.test{color:#000000;font-size:18px; }//grammar 1 .study{&:extend(.test);background:red; }//grammar 2 .study:extend(.test){background:red; }//输出css .test, .study {color: #000000;font-size: 18px; } .study {background: red; }//扩展all Use Method：以在study上扩展test的样式为例当有all的时候，会连...
一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。假定你已经安装好了Ruby，接着在命令行输入下面的命令： gem install...
方法一：cursor: not-allowed;document.getElementById(‘id‘).style.cursor="not-allowed";方法二：pointer-events:none; 原文：https://www.cnblogs.com/art-poet/p/12651768.html
一、CSS3转换 通过转换实现对对元素进行旋转、缩放、移动、拉伸的效果；这种原来必须要通过JS或者图片处理才可以实现的效果，现在都可以通过CSS3来完成。 2D转换采用transform属性来实现效果。二、transform属性的取值rotate()函数 是可以进行旋转的函数scale()函数 可以进行缩放的函数三、函数的用法transform:rotate( deg);旋转将transform属性的取值设置为rotate函数，在括号里的是旋转的角度，其单位是deg（degree程...