- 清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原理是，在「高级」浏览器中使用 :af...
CSS 令人不爽写 css 很麻烦，又不好维护，总之令人不爽。 CSS 预处理器于是就为 css 加入编程元素，这就是“css预处理器”。 Sass vs Less最广为人知的 css 预处理器是 Sass 和 Less。众多 css 预处理器中谁最优秀，最简短的回答：Sass。 Sass 简介Sass 是由 Ruby 写的，但与 Ruby 的语法没有一丁点关系，所以学 Sass 不用学 Ruby，只是需要安装 Ruby 而已。Sass 是 CSS3 的扩展，是 CSS3 的超集。 安装 Ruby已说过，Sass 是由...
目标 30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 HTML是什么样的 ...
在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。 例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外...
PostHTML是一个转换HTML/ XML的工具。 PostHTML本身是非常小的。它只包括一个HTML解析器，一个HTML节点树API和一个节点树stringifier。 var posthtml = require(posthtml);var html = Super TitleAwesome Text;posthtml() .use(require(posthtml-custom-elements)()) .process(html/*, options */) .then(function(result) { console.log(result.html); // Super TitleAwesome Text }); ...
创建项目文件夹 进入项目文件夹 初始化项目 使用npm命令: npm init ,根据提示完成。 安装 Gulp 进入项目文件夹,使用Node的包管理命令npm进行安装. 全局安装 npm install -g gulp 项目依赖中安装 npm install --save-dev gulp 创建Gulp配置文件 在项目根目录新建配置文...
设置外边距的最简单的办法就是运用 margin属性。margin用于设置对象标签之间间隔距离，比方2个上下排列的DIV盒子，我们就能够运用margin款式完成上下2个盒子间距。margin 属性承受任何长度单位，能够是像素、英寸、毫米或 em。margin 能够设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了1/4 英寸宽的空白：h1 {margin : 0.25in;}，下面为 h1 元素的四个边分别定义了不同的外边距，所运用的长...
自从大概两年前用CSS给SIGT设计了logo后，我心里一直有个想法，我认为使用Verdana字体和CSS里的绝对定位技术能画出更复杂的图案，也就是说，直接用HTML代码生成嵌入式的矢量图。 我选择绘制卡通剧《 辛普森一家》里的 荷马形象为代表，因为他的形象很流行，大家都认识： o o o o ( O O ...
使用CSS3来实现Loading动画特效的代码案例分享代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3 loading等待加载代码 - 何问起</title><style>@keyframes move {&1. 使用CSS3来实现Loading动画特效的代码案例分享简介：本文描述了使用CSS3来实现Loading动画特效的代码案例分享，有需要的小伙伴可以参考下2. 利用CSS3扁平化Loading动画特效简介：这篇文章利用CSS3扁平化Loading动画特效3. 30种CSS3炫酷页面...
DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误，就是"p+CSS"这种叫法其实是一种不准确的叫法，是国人给这种布局标准页面的方法起的名字，是对技术理解不够透彻导致的，而标准的叫法是什么呢？呵呵，没错，标准叫法是xHTML+CSS！ 单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法，认为过去布局页面用的是Table，称之为"Table+CSS"，而现在布局页面呢，用p，所以叫"p+CSS"。...
1 写在前面最近在整理cnblogs上页面的样式，默认右侧【随笔分类】中的标签是每行显示一个，而我想把右侧【随笔分类】中的标签设置为一行显示多个标签，至于显示多少个则随标签的大小而定，并且每个标签在鼠标放上去的时候会有背景颜色的变化。效果如下图。下面我们就来分析一下如何让左边的标签显示方式变为右边这样的吧2 块元素在分析块元素之前我们首先建立html网页，以便后面的分析。html代码如下。<html><head><meta charset="...
概述Web 兴起之后，关于CSS的介绍和学习资料已经铺天盖地。本文不涉及具体的CSS语法之类的，而是希望从初学者的角度，让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用。什么是 CSS了解一个概念，首先看到的就是它的名字，而往往被忽略的，也是它的名字。CSS (cascading style sheets)，可以翻译成中文 层叠样式表 。从名字可以看出：层叠：说明 样式可以叠加，所以会有优先级样式表：说明CSS是描述样式的，而...
一、图片边框border在“CSS边框border”这一节我们详细讲解了边框border属性。在CSS中，对于图片的边框，我们也是使用border属性来定义。语法：border-width:像素值;border-style:属性值;border-color:颜色值; 注：或者使用border简洁写法，如“border:1px solid gray;”。说明：如果大家忘了border属性，请自行回去复习一下。举例1：<!DOCTYPE html> <head><title>图片边框border</title><style type="text/css">img{width:60px...
运行下面的代码就可以了HTML 30分钟入门教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; background-color:#eee} .name { font-weight:bold } dl {margin-left:20px} dt {font-weight:bold} .trans {color:red} 0) { var entity = s.substring(i + 1, semicolonIndex); if (entity.length > 1 && entity.charAt(0) == '#') { if (en...
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面...