前端开发在近一两年发展的非常快，JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一 些前端开发中的共性问题，但是实现又不尽相同。通常一般的前端加载js文件都是这样 :<script type="text/javascript" src="js/js1.js"></script> <script type="text/javascript" src="js/js2.js"></script> <script type="text/javascript" src="js/js3.js"></script> <script type="text/jav...
sass依赖于缩进;scss是sass3引入的新语法 下面将介绍scss基本用法 参数$prop: xxx 嵌套ul {...li {...&:hover} } @mixin//定义 @mixin xxx($xxx){} //使用 @include xxx() @extend//使用 @extend .xxx; //会继承子属性 @import// _base.scss body {... } // style.scss 引入 @import "base"; lighten&darken//颜色加深、变淡 $light-color:lighten($base-color,50%); $dark-color:darken($base-color,50%); saturate&desaturate...
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml准备工作1：设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maxi...
LI代码的格式化:A).运用CSS格式化列表符： ul li{list-style-type:none;}B).如果你想将列表符换成图像，则： ul li{list-style-type:none;list-style-image: url(/blog/images/icon.gif);}C).为了左对齐，可以用如下代码： ul{list-style-type:none;margin:0px;}D).如果想给列表加背景色，可以用如下代码： ul{list-style-type: none;margin:0px;}ul li{background:#CCC;}E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码：...
!important是CSS1就定义的语法，是用于提高指定样式规则的应用优先级。IE一直都不支持这个语法，而其他的浏览器都支持。因此，就可以利用它来分别给火狐浏览器和IE浏览器样式不同的定义。举例：<html> <body> <span id="main">测试</span> </body> </html> 样式表：#main {width:100px!important;width:10px;border:1px solid #000; } 火狐浏览器能够理解!important的优先级，因此显示宽度为100px。而IE浏览器不能够理解!important...
解决@font-face跨域的两种方法：https://m.daixiaorui.com/read/283.html浏览器支持Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.注意： Internet Explorer 8 及更早IE版本不支持@font-face 规则.属性定义及使用说明@font-face规则，网页设计师再也不必使用的"web-safe"的字体...
准修饰选择器（Quasi-qualified selectors）你应当避免过分修饰选择器，例如如果你能写 .nav{} 就尽量不要写 ul.nav{}。过分修饰选择器将影响性能，影响 class 复用性，增加选择器私有度。这些都是你应当竭力避免的。不过有时你可能希望告诉其他开发者 class 的使用范围。以 .product-page 为例，这个 class 看起来像是一个根容器，可能是 html 或者 body 元素，但是仅凭 .product-page 则无法判断。我们可以在选择器前加上准修饰（...
我们接着上文，那么在上篇文章的最后，写到了css-loader的用法，如果你用心发现，就能看到我在style.css样式文件中写了一个这样的样式：div {transition: all ease 1s;}一、这是一个css3的过渡样式，我们知道，写css3的时候，需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件安装postcss-loader: npm install postcss-loader --save-dev安装autoprefixer: npm install autoprefixer --save-dev 在de...
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div{border:1px solid red;margin:20px;} .txtcenter{text-align:center;} </style> </head><body> <div class="txtcenter">居中显示</div> <div class="txtcenter"><img src="../Desktop/11.jpg" width="101" height="101" /></div></body> </html> 原文：http://www.cnblogs.com/Riona-C/p/7148116.html
圆角矩形可以用为4个角分别设置圆度，但是有顺序的border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;简写方法 : 左上角 右上角 右下角 左下角border-radius : 15px 0 0 15px;原文：https://www.cnblogs.com/ericblog1992/p/12910031.html
什么是div?div就是HTML一个普通标签，进行区域划分。特性：独占一行。肚子不能实现复杂效果。必须结合CSS样式进行渲染。div是块级元素作用：div标签可以把文档分割为独立的、不同的部分。他可可以用作严格的组织工具，并且不使用任何格式与其关联。什么是CSS?Cascading Style Sheets层叠样式表。【CSS】的概述；CSS 通常称为CSS样式或者层叠样式表，主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高度、边...
link和@import都是HTML中引入CSS的语法单词。两者的基本语法link语法结构<link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css"/>link标签通过URL路径引入外部的CSS文件到HTML中。@import语法结构<style type="text/css"> @import + 空格 + url(外部CSS文件URL路径地址); </style>@import是在样式表定义中再引入外部的CSS文件。原文：https://www.cnblogs.com/yanggb/p/10381366.html
box-shadow: 它可以设置一个或者多个下拉阴影的框语法：box-shadow:h-shadow v-shadow blur spread color inset注意：该属性把一个或者多个下拉阴影添加到框上，该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值，一个可选的颜色值和一个可选的inset关键字来规定。属性参数说明：h-shadow:必需的，水平阴影的位置，允许为负值v-shadow:必需的，垂直阴影的位置，允许为负值blur:可选，模糊距离spread:可选，阴影的大小colo...
display:table-cell的用法简介:display属性的使用相当频繁，比如display:block或者display:inline等，但是对于display:table-cell可能比较陌生，因为此属性在特定的情况下会发挥很大的作用，下面就简单介绍它的作用，先看一段代码实例: 蚂蚁部落.parent{ width:600px; height:600px; background-color:green; vertical-align:middle;}.children{ width:100px; height:100px; background-color:red;} 在以上代码...
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器选择器类型示例说明.class类选择器.demo选择所有class包含demo的元素#idID选择器#unique选择所有id是unique的元素ele元素选择器p选择所有p元素ele,ele并列选择器h1,h2选择...