dxdataGrid - MasterDetail
cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv
Pen Settings
HTML Preprocessor
About HTML Preprocessors
HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
Add Class(es) to &html>
Adding Classes
In CodePen, whatever you write in the HTML editor is what goes within the &body> tags in . So you don't have access to higher-up elements like the &html> tag. If you want to add classes there, that can effect the whole document, this is the place to do it.
Stuff for &head>
About the &head>
In CodePen, whatever you write in the HTML editor is what goes within the &body> tags in . If you need things in the &head> of the document, put that code here.
CSS Preprocessor
About CSS Preprocessors
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
About CSS Base
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices:
and a . Or, choose Neither and nothing will be applied.
Vendor Prefixing
About Vendor Prefixing
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.
We offer two popular choices:
(which processes your CSS server-side) and
(which applies prefixes via a script, client-side).
Autoprefixer
Prefixfree
Add External CSS
These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.
About External Resources
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Quick-add:
Foundation
Animate.css
+ add another resource
JavaScript Preprocessor
About JavaScript Preprocessors
JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
CoffeeScript
LiveScript
TypeScript
Add External JavaScript
These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.
About External Resources
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Quick-add:
GreenSock TweenMax
Handlebars
Polyfill.io
Underscore
+ add another resource
Code Indentation
Width of Indent
Save Automatically?
If active, Pens will autosave every 30 seconds after being saved once.
Auto-Updating Preview
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
&html ng-app=&myApp&&
&script type=&text/javascript& src=&/SharedStatic/DevExtreme/14_1/js/jquery-2.1.1.min.js&&&/script&
&script type=&text/javascript& src=&/SharedStatic/DevExtreme/14_1/js/angular.js&&&/script&
&script type=&text/javascript& src=&/SharedStatic/DevExtreme/14_1/js/angular-sanitize.js&&&/script&
&script type=&text/javascript& src=&/ajax/globalize/0.1.1/globalize.min.js&&&/script&
&script type=&text/javascript& src=&/jslib/14.2.6/js/dx.all.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&/jslib/14.2.6/mon.css& /&
&link rel=&stylesheet& type=&text/css& href=&/jslib/14.2.6/css/dx.light.css& /&
&link rel=&stylesheet& type=&text/css& href=&styles.css& /&
&body ng-controller=&defaultCtrl&&
var myApp = angular.module('myApp', ['dx']);
myApp.controller(&defaultCtrl&,['$scope', '$parse', function ($scope,$parse) {
var accessor = $parse();
Asset uploading is a PRO feature.
As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.
..................
Editor Commands
Autocomplete (if available)
Find Previous
Find & Replace
Indent Code Right
Indent Code Left
Tidy Up Code
Line Comment
Block Comment
Join This & Next Line
Pen Actions
Create New Pen
Info Panel (if owned)
HTML Specific
Select Outward Matching Pair
Wrap With...
Close Closest Open Tag
CSS Specific
Evaluate Simple Math
Increment Number 1
Decrement Number 1
Re-run Preview
Clear All Analyze Errors
Open This Dialog
CodePen requires JavaScript to render the code and preview areas in this view.
Trying , which is the preview area without any iframe and does not require JavaScript. Although what the preview is of might!
Need to know how to enable JavaScript?
Close this, use anyway.Discuz-x系列教程： DX的css命名规则、缓存、加载机制
Discuz-x系列教程： DX的css命名规则、缓存、加载机制
发布时间： 21:20:49
编辑：www.fx114.net
本篇文章主要介绍了"Discuz-x系列教程： DX的css命名规则、缓存、加载机制"，主要涉及到Discuz-x系列教程： DX的css命名规则、缓存、加载机制方面的内容，对于Discuz-x系列教程： DX的css命名规则、缓存、加载机制感兴趣的同学可以参考一下。
本帖最后由 cr180 于
09:46 编辑
DISCUZ-x版本中，对css的处理较之前的版本更加智能化了，为了让更多的同学有个充分的理解，特把【黎明】的资料整理一下发给大家。
各位同学如果有疑问可以跟帖，但禁止任何AD，直接删除！
首先，每个页面都会加载以下两个类似的css：
data/cache/style_1_common.css
data/cache/style_1_forum_index.css
一、两个文件名的命名规则
style_1_common.css
|--是整站通用的全局css，所以命名为【style_1_common.css】
|--前面的代号是当前使用这套风格的ID，所以style_1_common.css也就是第一套风格的共用的css
style_1_forum_index.css
|--是【forum】广场BBS频道首页的css样式，那么forum和index分别对应这CURSCRIPT和CURMODULE的常量值，这个在每个频|--道的入口脚本里都有定义，比如forum频道页面对应的是forum.php。
以上介绍的是css的缓存加载文件，当然，还有一些在特殊页面的css，这里就不详细描述了。
这两个css文件的生成
首先，那两个css是程序生成的css缓存文件，所以如果要改css的话，不能直接改那两个文件，否则一更新缓存，之前的改动就无效了。
拿自带的default模板举例吧，default模板中，带有一个common的文件夹，这个文件夹存放的是全局模板文件，
里面有css文件：
style_1_common.css&&是【common.css】生成的缓存
style_1_forum_index.css 是【module.css】生成的缓存
二、module.css的缓存和加载机制
打开module.css,可以看到有这样的说明
/** forum::index **/ 广场频道：首页 css代码开始&
这里是css代码
/** end **/ 广场首页css代码结束
这就是经常在模板中用到的判断，程序读取这个css文件的内容，通过标识进行判断，最后把符合条件内的所有css生成在一个对应的缓存文件中。
再举个例子：
/** forum::index,forum::viewthread **/& &广场频道：首页模块和帖子阅读页CSS代码开始
这里是css代码
/** end **/ 结束
第二个例子大家应该知道了，就是再增加一个条件，这里可以不止两个：
/** forum::index,forum::viewthread,forum::forumdisplay,XXXX&**/
ok，根据自己的需要来加就行了，记得符号【,】
大家可以参照这个学习一下，包括你想扩展他，都可以直接在里面直接添加就可以。
下面讲讲缓存css是如何生成的
common.css比较简单，就是直接读取，然后生成到data/cache目录下。
每个频道模块独立的css，会先将module.css在data/cache下生成一个对应的风格id下的缓存的css，然后当你访问某个频道时，会生成对应频道下的css，此时，刚才介绍的那些标识就起作用了。程序会根据/** group::index **/和/** end **/这种标识，拆分出哪些频道、哪些模块该需要哪些css。
程序部分就不介绍了，程序的代码主要在source/class/class_template.php文件处理，有兴趣的同学可以深入研究一下。
三、在模板制作中充分的运用好css加载机制，提高页面的加载速度
新建模板后同学们可以在【模板文件夹\common】中建立附加样式表并命名为：
extend_module.css
extend_common.css
这两个css文件就是重新定义common.css与module.css里面的样式，这两个附加样式与上面讲的两个css文件分别合并，最终就生成css缓存文件了
extend_module.css 这里面必须根据上面第二节里讲的，写好标识！！
如果想重新定义默认模板中的一些css，那么直接在这两个文件中重写就行了。
注意：如果你的模板布局是完全要重写的，那就命名为：common.css和module.css 这样程序就只处理新模板中的css，不会与default里面的合并了
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
本文标题：
本页链接：