CSS笔记：1、CSS：层叠样式表，用来美化页面，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色，背景颜色，边框等。2、行内样式表：style的值为键值对 style="color:red;font-size:50px;"<divstyle="color:red;font-size:50px;font-family:微软雅黑;background-color:blue;width:300px;border-style:dashed;border-color:red;border-width:10px;cursor:pointer;"></div>其中边框如果四条边框都一样也可以直接写为bord...
p{width: 100px; //设置p标签宽度white-space: nowrap; //文本超出P标签宽度不换行，而是溢出overflow: hidden; //文本超出P标签，超出部分隐藏text-overflow: ellipsis; //CSS3的新属性：显示省略号代替被修剪的文本；其他两个属性：1、clip-修剪文本，2、string-使用给定的字符串来代表被修剪的文本} 原文：http://www.cnblogs.com/lvmylife/p/5339014.html
不得不佩服京东的速度，昨天刚下单的两本书今天上午就到了。其中一本是全彩页的《众妙之门 - 精通CSS3》，细看了前几十页，书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子，扔个例子的链接（没源码下载，要自己手动输入，而且近乎所有的例子页面均已失效），未经细剖便草草了事，感觉倒是适合作为厕所读物（汗）。。。。虽然书中不细剖，却也不能白花银子，不妨自己实打实地查资料、记笔记，不辜负了早上送...
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #main { background-color: #E01313; height: 100%; } #nav { backgr...
因为网上此类教程有很多，我就抓重点，让项目快速上手。如果是在windows系统下，就先安装ruby，官网下载地址：https://rubyinstaller.org/downloads/安装完之后，来跟着节奏燥起来。1、在命令行中：gem install sass2、这时候就可以直接进到你的项目文件中：sass --watch scss/:scss/ // 这监听scss整个文件夹，并生成新的css到scss文件夹中。（ps: 这里生成的文件夹也可以自己替换）提醒： 这里如果只想改变文件夹中某一个sc...
多列布局——Columns为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。语法：columns：<column-width> || <column-count>多列布局...
课程地址：http://www.imooc.com/learn/33第1章 初识CSS3CSS3课程列出第一站，先带领大家进入CSS3的世界，探索CSS3的魅力！你做好准备了吗？第2章 边框本课程主要讲解border-color 、border-image 、border-radius 及box-shadow 相关知识第3章 颜色相关学习CSS3中与颜色有关的属性，包括RGBA colors和Gradient，来实现在此之前只能通过其它手段如背景图片才能得到的绚丽效果。第4章 文字与字体本章学习CSS3中文字相关的属性，包括t...
30种炫酷CSS3鼠标滑过按钮动画特效效果演示：http://www.htmleaf.com/Demo/201510282718.htmlCSS3鼠标hover按钮过渡动画效果演示：http://www.htmleaf.com/Demo/201708104678.html基于css3的各种新颖的鼠标hover图片动画效果演示：http://www.htmleaf.com/Demo/20141018225.html16种基于Bootstrap的css3图片hover效果演示：http://www.htmleaf.com/Demo/201703134400.html原文：https://www.cnblogs.com/he-qiang/p/8615153.html
用flex实现css里的三大经典布局，不需要额外很多代码。1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center设置水平方向居中，align-center设置垂直方向居中。<div id="parent"><div id="child"></div></div>#parent {
/* align-content和align-items必须配合使用 */display: flex;justify-content: center;align-content: center;align-items: center;width: 300px;height: 300px;outline: solid 1px;}#child ...
话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant：使用CSS，可以对字体进行设置，字体属性包括五种常见属性：字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant。通过这五个属性，可以设定文本在web页面的显示效果或文本的打印效果。1.字体系列font-family支持按照优先级顺序列出各种要指派使用的字体，当用户系统没有安装首选字体...
sublime开发前端确实好用，有好多些个的插件，轻量便捷，但是在使用sublime中的一些插件的时候总是会遇到困扰，跟自己想象中的不一样，比如在使用SublimeCodeIntel插件的时候，就会遇到一个烦人的问题：在css中输入分号要换行的时候，总是弹出自动提示，按下回车就会确认提示，很是烦人。为此：特意上网查了2个小时，终于找到解决方案：打开Sublime默认设置文件：‘Perferences->Package Settings->SublimeCodeIntel->Setting - De...
单行居中，多行居左，超过两行用省略号（绝对定位）<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 320px;margin: 10px auto;background: #ddd;position: relative;}h2 {position: relative;line-height...
模板：<button class="r receive_code">获取验证码</button><span class="r code"></span>脚本：// 生成六位数字验证码$(".code").html(null);function createCode() {var code = "";var length = 6;var i;var str = "";var content;var codeSpan = $(".code");var arrColor = ["blue", "red", "green", "brown", "gray", "pink", "red", "green", "brown", "blue"];codeSpan.html(null);for (i = 0; i < length; i++) {index = Ma...
CSS3中使用了很多的属性选择器，通过这些属性选择器，可以根据我们自己的设计来定义元素的样式，制作精美的网页。CSS3属性选择器下面是CSS3的属性选择器的语法，及使用。元素名字[元素类型=“类型名字”]：选择器名字{属性：值；属性：值；
} 在元素类型匹配时，就可以使用类似正则的匹配方法。 [att=val] 指定特定名字的元素 [att*=val] 匹配val*的元素， [att^=val] 匹配val开头的元素，比如id为val1、val432432都可...
CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. m...
为了悼念，各大网站都纷纷将自己的站点颜色调灰，就连图片也一样，到底如何实现的呢，请看下面的代码。