css规范

CSS 规范

分类: Alice 文档库 发表评论↓

本规范概述

制定本规范的目的在于使我们的CSS代码更加易于维护和重用，从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup)，即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式，然后才开始编码，编码的同时进行Debug，Validate和代码片断的总结，而不是在所有模板都完成后才进行这三个步骤。

一、关于样式库构建规范

详见：http://aliceui.com/alice-css-guide/

二、selector 命名规范：

  • 命名除 .fn- / .ui- / .sl- 外，可自定义命名。请慎用 selected current disabled first last success error
  • 一般情况下，如果命名比较通用，比如 current，请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}，即使是为了重用，也应该注意。只有在非常明确不会影响到其他组件工作，并且其他人不会写这种命名的情况下，才让它变成全局通用的。
  • 作为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其他命名一律使用小写字母

三、注释：

  • 组件注释:

    /**

 * @name: 组件名

 * @overview: 组件介绍

 * @require: 依赖的样式

 * @author: 小鱼(sofish@163.com)

 */
  • 块状或行内元素，都请使用 /* comment */注释，注释文字前后端保持各有一个空格
  • 为了您的体验着想，一目了解的代码，就不要注释了，比如 “display:none; /* 让元素看不见 */” 工作还有很多啊，同学，请为了自己的体力着想。

四、CSS文件

  • 文件编码必须使用utf-8（无BOM）
  • 文件一律通过 link 链入 (NOT @import)
  • 当只是单个页面使用时，才写在 <head> 的 <style> 中

五、Hack 规则

  • 一般情况下，不要使用 IE 条件注释： <!–[if IE]><![endif]–>

  • 通用 Hack

    .all-IE{property:value\9;}

:root .IE-9{property:value\0/;}

.gte-IE-8{property:value\0;}

.lte-IE-7{*property:value;}

.IE-7{+property:value;}

.IE-6{_property:value;}

.not-IE{property//:value;}

@-moz-document url-prefix() { .firefox{property:value;} }

@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }

@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }

  • 当然，强烈建议你使用更优雅的hack方式。那就是避免hack。或者在书写上，做点小trick。比如：

    .selector .child{property:value;} /* for ie-6 */

.selector > .child{property:value;} /* except ie-6 */
  • 关于Hack: 在firefox写完，IE有问题？还是其他浏览器也出现了。你知道IE Hack 能解决。我想，你也可能知道，用其他方法也能绕过。建议少用Hack。

六、书写规范：

1. 以如下写法为例：

第一种方式：（强烈推荐）

/* 区域模块-1 */

.tech, .ued{

    background:#f60 url(alipay.com/orange.png) no-repeat 0 0;

}



/* 区域模块-2 */

.tech{

    width:950px;

    margin:0 auto;

}

.tech .wd{

    width:620px;

    float:left;

}
第二种方式：（如果让其他人看，请先格式化）

/* 区域模块-3 */

.ued{width:100%;padding:30px 50px;}

.ued .visual{display:inline-block;font:700 normal 12px/1.5 arial;}

2. 非常重要，需要你注意的点:

      • 区域模块间用空行分隔
      • 多个选择器写一起时，逗号（,）后紧跟一个空格
      • 避免行内样式，即使是JS，也应该尽量使用class/ID来决定显示，而非行内样式
      • 避免使用低效选择器（所以，别滥用class；当然，不滥用ID我相信你是知道的）详见：http://code.google.com/speed/page-speed/docs/rendering.html

      • 尽量使用缩写，比如 font:700 normal 12px/1.5 arial; 一般不要写成

        font-style:normal;

font-size:12px;

line-height:1.5;

font-family:arail;

        通常需要使用缩写规则的:

        padding: top right bottom left;

padding: top-bottom right+left;

padding: top left-right bottom;

padding: top-right-bottom-left;

如：padding:1px 2px 3px 4px;



margin: 同上



如使用像`red`这样的颜色名，采用小写；16进制写法使用大写；写3位，还是6位，自便：

color: red; color;#FFF; color:#ABCABC



background: color imageUrl repeat attachment position;

如：background:#ddd url(alipay-wd.png) no-repeat scroll 10px 20px;



border: size style color;

如: border:1px solid #ddd;



font: weight variant style size/lineHeight family;

如 font:700 small-caps italic 12px/1.5 "Courier New"; font-weight 统一用 500 代替 normal, 用 700 代替 bold;



list-style: type position image;

如：list-style: square inside url(alipay-wd.png);不过，通常我们要使用的是 list-style:none;

      • CSS3 书写规范：浏览器私有写法在前，标准写法在后

        -moz-box-shadow: 1px 2px 3px #ddd;

-webkit-box-shadow: 1px 2px 3px #ddd;

box-shadow: 1px 2px 3px #ddd;
      • 1.书写顺序

        不强制书写顺序。但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：1. 框架为先，细节次之比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的，写在后面。

        .selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
      • 2. 有因才有果

        比如想使用”图片替换文字“技术，通常要使用的text-indent。如果我们使用标签的是 span：<span class="thepic">这个文字将被图片替换</span>我们应该是先将 span 变成”块级元素“（使用 display:block，虽然他永远不是块级元素），再将文字 indent。而不是先 indent 再变成块级的：

        .thepic{display:block;text-indent:-9999em;}

        又如我们，如果想让一个 span 使用 margin, 那么我们应该这样写:span{display:block;margin-bottom:10px;} 而非 span{margin-bottom:10px;display:block;}。因为没有 display 之前，行内元素是没有 margin 的。

七、IE私有特性

1. expression

记住一句话：无论什么时候，都不要使用它。用 Javascript 吧。更优雅，更灵活。

2. filter

      • 应该尽量避免使用 AlphaImageLoader
      • 可以适当在投影/发光/渐变/去色方面上使用

3. IE bug

常见BUG，详见：http://sofish.de/1400

八、如何规划你的 CSS 文件结构

1.一定要有全局设置

全局设置可以避免重复书写同样的东西。比如3人在一个项目中，假设项目中涉及到的链接有 10 种颜色，如果有全局重设，我们就可以统一设置颜色。如果没有，我们可能每个都会为自己所负责部分的链接定义相应的颜色。这样一来就导致多处定义，且定义不统一。以后维护需要到各个地方都改。这是很麻烦的事。另外就是css文件也会因此变大。所以，在写之前，大家应该先分析视觉稿，统一全局设置。

/* global reset */

body{padding:0;margin:0;font.....}

a{color:#07f;}

a:hover{color:#555;}

需要注意的是，一般情况下，不要直接给标签写样式。而应该使用 class。像下面这种写法，并不是很合适:

h1{font-size:30px}

h2{font-size:20px}

h3{font-size:10px;}

如果有另外一个 h2 也要使用 10px 的，而其他的都仍使用 20px 的，那可就不好办了。所以，推荐用这种方法：

/* global classes */

.text-size30{font-size:30px;}

.text-size20{font-size:20px;}

.text-size10{font-size:10px;}

<h2 class="text-size20">… <h2 class="text-size10">…

2.一定要模块化

有两点需要注意的，一是，注意代码重用的模块化；一是，注意 HTML 结构的模块化，而不是分块。

      • 我们是这样重用的：

        <div id="module-1" class="module">

    <h3>TITLE</h3>

    <p class="module-item">

        some text

    </p>

</div>

<div id="module-2" class="module">

    < h3>TITLE</h3>

    <p class="module-item">

        some text

    </p>

</div>
        /* module, reuse style in module scrope*/

.module{}

.module-status{}

.module-item{}

.module-status .module-1-item{}

/* customize */

#module-1 .module-item{}

#module-2 .module-item{}

      • HTML 的模块化：我们应该这样写（他们的视觉是一体的，代码也应该是一体的）：

        <div id="module-1" class="module">

<h3>TITLE</h3>

<p class="module-item">

    some text

</p>

</div> <!-- #module .module -->

        而不是这样写：

        <h3>TITLE</h3>

<!-- 第一块 -->

<div id="module-1" class="module>    <p class="module-item">

        some text

    </p>

</div> <!-- 第二块 -->

九、值得注意的事

1.Background Color:

      • 一般我们都会写: background:url(path/to/image) no-repeat 0 0;
      • 当元素背景是深色的时候，比如#000，我们通常会选择一种比较浅的颜色来做为文本的颜色，比如#fff，为了避免网速缓慢导致CSS已经 加载，而图片仍未加载完成或图片服务器挂掉时文本不可见，请尽量使用加上CSS定义的背景颜色，如：background:#e8edef url(path/to/image) no-repeat 0 0;

2. has Layout

别用轻易使用hack，IE下很多兼容性问题都是 has Layout 引起的。试着给元素加上:

display: inline-block

height: (除 auto 外任何值)

width: (除 auto 外任何值)

float: (left 或 right)

position: absolute

writing-mode: tb-rl

zoom: (除 normal 外任意值)

3. 代码测试:

一般情况下，我们需要测试通过的是电脑端的A-Grade浏览器：

  Win XP Win 7 Mac 10.6.† iOS 3.† iOS 4.† Android 2.2.†
Safari 5.†     A-grade      
Chrome † (latest stable) A-grade          
Firefox 4.†   A-grade (upon GA release) A-grade (upon GA release)      
Firefox 3.6.† A-grade A-grade A-grade      
IE 9.0   A-grade (upon GA release)        
IE 8.0 A-grade A-grade        
IE 7.0 A-grade          
IE 6.0 A-grade          
Safari for iOS       A-grade A-grade  
WebKit for Android OS           A-gradea

更多关于这个列表的资料，请看：http://developer.yahoo.com/yui/articles/gbs/

你可能感兴趣的:(css)

  • 是时候反思下 Web 前端了
    我以往写的技术类文章，绝大部分是问题反思、方法论之类的，极少有某个具体技术或工具的介绍与使用教程——除非是我创造的。眼看着曾经经常针对前端领域问题进行有价值思考与讨论的前辈、大佬、同行们接连退隐或沉默，这块儿的高价值新产出内容越来越少。因此，我打算自告奋勇地正式接下「对前端领域问题进行思考并尽量产出高价值内容」这个生态位的接力棒。需要特别说明的是，「前端领域」不局限于以HTML、CSS、JavaS
  • 27、web前端开发之CSS3（四） 跟着汪老师学编程 前端css3css
    8.动画（Animations）CSS3引入了强大的动画（Animations）功能，使得网页开发者可以通过纯CSS实现复杂的动画效果，而无需依赖JavaScript。通过@keyframes规则，开发者可以定义多个关键帧点，从而创建平滑且灵活的动画序列。本节将详细讲解CSS3动画的基本使用、动画属性、实际应用场景及最佳实践。8.1.动画的基本概念CSS3动画允许开发者通过定义多个关键帧点（Key
  • 24、web前端开发之CSS3（一） 跟着汪老师学编程 前端css3css
    CSS3详细讲义目录CSS3简介CSS3核心特性选择器盒模型背景与边框文本样式颜色与透明度过渡与动画变换弹性盒布局网格布局媒体查询多列布局字体与排版装饰与效果性能优化新特性与兼容性CSS3实践示例总结一、CSS3简介CSS3（CascadingStyleSheets,Level3）是CSS技术的最新版本，旨在通过引入新的功能和改进，提升Web开发的效率和网页的视觉效果。CSS3是模块化的，每个模块
  • 【HTML+CSS】使用HTML与后端技术连接数据库 m0_74823264 面试学习路线阿里巴巴htmlcss数据库
    目录一、概述1.1HTML前端1.2后端技术1.3数据库二、HTML表单示例三、PHP后端示例3.1连接数据库3.2接收数据并插入数据库四、安全性4.1防止SQL注入4.2数据验证与清洗五、优化5.1索引优化5.2查询优化六、现代Web开发中的最佳实践6.1使用ORM（对象关系映射）6.2前后端分离6.3异步通信（AJAX/FetchAPI）七、结论在Web开发中，经常需要从前端（HTML/CSS
  • 26、web前端开发之CSS3（三） 跟着汪老师学编程 前端css3css
    5.文本（Text）CSS3大大增强了对文本样式和排版的控制，使得网页设计更加灵活和多样化。本讲详细介绍CSS3中常用的文本相关属性，包括文本对齐、字体大小、行高、字母间距、单词拆分、溢出隐藏等，帮助开发者更好地控制和优化网页中的文本显示效果。5.1.文本对齐（text-align）text-align属性用于控制块级元素（如div、p等）中的文本水平排列方式。通过合理使用text-align，可
  • package.json browserslist 82年的辣鸡 JavaScriptVue.jsvue
    作用：根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。共享使用browserslist的组件们：组件名功能Autoprefixerpostcss添加css前缀组件bable-preset-env编译预设环境智能添加polyfill垫片代码postcss-normalize基础语法：只要package.js
  • 处理前端兼容性的重要工具：Browserslist AvskBug 前端
    在前端开发中，处理CSS和JavaScript兼容性问题是一个常见的挑战。不同的浏览器对于CSS和JavaScript的解析和支持程度各不相同，因此开发人员需要采取一些措施来确保他们的网站在各种浏览器中都能正确地显示和运行。在这方面，一个非常重要的工具是Browserslist。Browserslist是一个用于配置目标浏览器的工具，它使用一种简单的查询语言来指定要支持的浏览器范围。通过在项目中使
  • 最强markdown编辑器,究竟是谁！？ ficns 编辑器
    以下是一些不同类型的Markdown软件推荐：1.Typora:•优点：曾经是广受欢迎的免费软件，后改为收费软件，但仍有很多人觉得它物有所值。它提供了一个无干扰的写作环境，真正做到了所见即所得，将编辑和预览模式合二为一，在输入Markdown内容时即时生成预览效果，界面简洁直观，支持多种主题和自定义CSS，能让用户专注于写作。支持多种操作系统，包括Windows、macOS和Linux。它还支持图
  • CSS多设备兼容-媒体查询以及在SCSS中的应用！
    CSS媒体查询为你提供了一种应用CSS的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用，例如“视口宽于480像素”的时候。我们可以利用媒体查询来实现响应式布局，适应各种设备(pc、ipad、phone)视口大小。媒体查询参考：媒体查询媒体查询的类型有一下4种：类型说明all默认值，所有设备（可省略不写）print打印设备(用于打印机和打印预览）screen用于电脑屏幕，
  • 给Web开发者的HarmonyOS指南01-文本样式
    给Web开发者的HarmonyOS指南01-文本样式本系列教程适合HarmonyOS初学者，为那些熟悉用HTML与CSS语法的Web前端开发者准备的。本系列教程会将HTML/CSS代码片段替换为等价的HarmonyOS/ArkUI代码。页面结构HTML与ArkUI在Web开发中，HTML文档结构由、和等标签组成，其中标签包含了页面中所有可见的内容。而在HarmonyOS的ArkUI框架中，使用@E
  • Python Eel 与 Remi、NiceGUI 的区别：选择合适的库来创建 Web 界面 scoone python前端开发语言
    在Python社区中，有几个库可以帮助开发者快速创建基于Web的用户界面，其中PythonEel、Remi和NiceGUI是比较受欢迎的几个。本文将对比这三者的主要区别，帮助您根据项目需求选择最合适的库。PythonEel目的Eel的目标是简化将Python脚本转换为完整Web应用程序的过程。使用方式允许使用HTML/CSS/JavaScript创建前端，Python作为后端。提供简单的路由系统，
  • CSS3：overflow属性详解 八万鸡米花 htmlcsscss3html5
    1.Overflowoverflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden，就可以把超出容器的部分隐藏起来；如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto；overflow：auto属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条，滚动条也可以单独设置，例如overflow-x：hidden；overflow-y：auto；这
  • 带你解析原子化css引擎unocss的工作原理 谁能挡我成仙 css前端
    最近荒废了，几天没写文章，今天抽时间水一篇内容。带你解析原子化css引擎unocss的工作原理@unocss/core首先，你得知道什么是CustomRulesShortcutsPreflightCustomvariantsThemeLayersUtilitiesPreprocess&Prefixing我们将围绕上述功能来实现一个mini-unocss工作流程在了解此之前我希望你能读完unocss
  • CSS(十一）——CSS分组和嵌套，尺寸（Dimension） 神秘的博主 css前端
    CSS分组和嵌套选择器分组选择器举个例子，多个标签有同一个样式，就可以不一个一个分开写，使用分组选择器比如：h1{color:green;}h2{color:green;}p{color:green;}就可以写为：h1,h2,p{color:green;}嵌套选择器它可能适用于选择器内部的选择器的样式。在下面的例子设置了四个样式：p{}:为所有p元素指定一个样式。.marked{}:为所有clas
  • UnoCss(原子化css引擎) 让你的开发更轻松愉快 hulianwangjike2026 csstensorflow前端
    什么是原子化CSS，UnoCSS又是什么，对此有疑问的推荐看下antfu的这篇文章——重新构想原子化CSS(antfu.me)相信看完这篇文章的你也会跟我一样热衷于UnoCSS.介绍今天介绍一个CSS开发利器UnoCSS,是一个具有高性能且极具灵活性的即时原子化CSS引擎，具有按需加载的特性，相信使用过TailwindCSS，WindiCSS，等CSS框架的同学对CSS原子化这个概念都不会陌生，原
  • Vue学习记录之二十 postcss自定义插件及Unocss的使用 LvManBa vue.js学习postcss
    一、实例1使用postCss自定义px转vw插件编写css插件:一、在项目根目录下建立一个plugins文件夹，然后建立一个postcss-px-to-viewport.ts文件。//vite内置了postCss无需安装import{Plugin}from'postcss'//定义一个变量constOptions={viewportWidth:375,//UI设计稿上的宽度，这里我们默认的视口宽度
  • [CSS]CSS 尺寸 (Dimension) 海神之光. csscss前端
    CSS尺寸(Dimension)属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。更多实例设置元素的高度这个例子演示了如何设置不同元素的高度。使用百分比设置图像的高度这个例子演示了如何使用百分比值设置元素的高度。使用像素值来设置元素的宽度本例演示如何使用像素值来设置元素的宽度。设置元素的最大高度此示例演示如何设置元素的最大高度。使用百分比来设置元素的最大宽度本例演示如何使用百分比值来设置元
  • CSS 尺寸 (Dimension) wjs2024 开发语言
    CSS尺寸(Dimension)在网页设计中，CSS（层叠样式表）的尺寸属性是控制元素大小和位置的关键。本文将详细介绍CSS尺寸相关的概念、属性及其应用。1.CSS尺寸概述CSS尺寸主要包括宽度和高度，这些属性可以应用于各种HTML元素，如div、p、img等。通过合理设置尺寸，可以使网页布局更加美观、合理。2.CSS宽度和高度属性2.1宽度（Width）宽度属性用于设置元素的宽度。以下是一些常用
  • 腾讯滑块验证码自动分析工具：原理与实现 ADRU 爬虫pythonpythongithub网络爬虫
    腾讯滑块验证码自动分析工具：原理与实现项目简介滑块验证码是网站常用的安全验证方式，需要用户将滑块拖动到正确位置以验证身份。本项目开发了一个自动化工具，通过计算机视觉技术，能够分析腾讯滑块验证码并精确计算滑块需要移动的距离。该工具可用于自动化测试、安全研究和验证码优化等领域。技术栈：Python、OpenCV、PIL(Pillow)、Matplotlib、NumPy核心功能自动解析验证码CSS样式信
  • Vue3组件化开发（一） 独鹿DT Vue2&Vue3vuevue.jsvue3组件化vue组件间通讯
    Vue3组件化开发（一）组件的拆分和嵌套组件的CSS作用域问题组件通信（父传子）`props`的数组用法`props`的对象用法非prop的Attribute的传递子组件有根组件包裹禁用Attribute继承子组件无根组件包裹，且有多个元素组件通信（子传父）`emits`的数组写法`emits`的对象写法组件的拆分和嵌套这个我也不知从何写起，就这样拆分，引用。细节补充在引入其他组件时，加后缀。虽然
  • 如何使用HTML，CSS和JavaScript创建 二进制计算器？ 濯一一 Html5+Css3二进制计算器BinaryCalHTMLCSSJavaScript
    HTML或超文本标记语言以及CSS(级联样式表)和JavaScript可用于开发可执行某些功能的交互式用户应用程序。同样,可以完全使用HTML,CSS和JS开发二进制计算器。二进制计算器：对二进制数执行算术运算。二进制计算器的缓冲区限制为8位。如果算术运算的结果超过8位,则多余的位将被截断。算术运算是使用JavaScript函数完成的。该应用程序包括：一个显示屏,在该显示屏上可以显示用户输入以及算
  • JavaScript 改变 HTML 图像 我自纵横2023 JaveScript教程javascripthtml开发语言ecmascript前端
    JavaScript改变HTML图像JavaScript改变HTML图像的核心是通过动态修改标签的src属性或调整CSS样式实现图像切换或视觉效果变化。以下是具体方法与场景解析：一、核心方法：修改src属性1.直接替换图像路径通过document.getElementById()获取图像元素，修改其src属性即可切换图片：functionchangeImage(){constimg=documen
  • 用 HTML、CSS 和 JavaScript 实现二进制猜数字游戏 天若有情673 htmlcssjavascript
    在Web开发的世界里，我们常常希望通过简单而有趣的项目来巩固和应用所学的知识。今天，我们就来介绍一个基于HTML、CSS和JavaScript实现的二进制猜数字游戏，这个游戏既可以作为新手入门的练手项目，也能帮助大家更好地理解二进制的原理。项目背景二进制猜数字游戏是一个经典的利用二进制原理设计的小游戏。游戏通过展示6张卡片，玩家只需告知数字是否在卡片上，就能让程序猜出玩家心中所想的1-63之间的数
  • CSS 预处理器 weixin_44356698 前端面试2025css前端
    在面试中回答关于CSS预处理器的问题时，你可以从以下几个方面进行回答，展示你的知识深度和实践经验：1.什么是CSS预处理器？你可以从定义和目的入手：“CSS预处理器是一种扩展CSS功能的工具，它允许开发者使用变量、嵌套规则、混合（mixins）、函数等高级特性来编写CSS。通过预处理器，我们可以更高效地组织和维护样式代码，减少重复代码，提升开发效率。常见的CSS预处理器包括Sass、Less和St
  • LESS vs. SCSS：选择何种CSS预处理器？ 每天一个技术点 每天一个知识点csslessscss
    CSS预处理器如LESS和SCSS已成为现代Web开发中不可或缺的工具，它们为原生CSS提供了强大的变量、嵌套、混合（Mixins）、运算等高级特性，显著提升了样式表的可维护性和开发效率。尽管功能相似，LESS和SCSS在语法、编译环境以及一些特定特性上存在一些显著的区别。本文将从多个方面详尽对比这两种预处理器，并结合实例深入探讨它们各自的特色与适用场景。1.语法差异LESSLESS语法与CSS相
  • 【进阶系列】前端开发环境构建(三)CSS -- Susy 江中散人 css前端
    1.3Susy——CSS框架Susy是一个基于NatalieDowne的CSSSystems的CSS框架，通过Sass实现，利用Compass来简化，可用于静态网站以及各种框架应用。ResponsivelayouttoolkitforSass：Susyisanagnosticsetoftoolsforcreatingpowerful,customlayouts.Weprovidethelangua
  • css预处理器 Prince_fmx css预处理器
    sass必须先安装ruby,再安装sassgeminstallsassless先安装npmnpminstall-gless来自;http://blog.csdn.net/u013063153/article/details/52485993推荐链接：http://www.ruanyifeng.com/blog/2012/06/sass.htmlCSS预处理器是什么？一般来说，它们基于CSS扩展了一
  • 详细对比Sass与SCSS 编程小郭 前端sassscss前端
    Sass（SyntacticallyAwesomeStyleSheets）和SCSS（SassyCascadedStyleSheets）都是CSS的预处理器，它们允许开发者使用变量、嵌套规则、函数和其他编程特性来编写更易于维护和管理的样式表。然而，Sass和SCSS在语法和应用场景上存在一些差异。Sass与SCSS的区别语法：Sass：Sass的语法较为独特，它使用缩进和换行符来区分不同的代码块，
  • 【前端学习】Day-18 js定时器、事件绑定、案例 ChenAi140 前端学习前端javascript学习
    文章目录1.js定时器2.事件绑定3.案例前端三大技术：HTML、CSS、JS(原生JS、JQuery、Vue)DOM-节点(标签)操作(增删改查)—D->DocumentBOM-打开窗口、滚动窗口、定时事件B->Browser1.js定时器js中的定时器有两种：Interval、TimeoutInterval定时器的开启和关闭setInterval(函数,时间)-创建定时器对象，每隔指定时间就自
  • vue样式初始化_VUE项目初始化 weixin_39806818 vue样式初始化
    Vue项目初始化：Vue项目请求生命周期和文件组件创建vue文件：user用户页面exportdefault{name:"User",components:{Nav,Footer,},data(){return{}},methods:{}}1.入口文件：加载vue、router、store等配置以及加载自定义配置(自己的js、css，第三方的js、css)2.创建项目唯一根组件，渲染App.vue
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他