├── CNAME ├── .npmignore ├── example ├── dist │ ├── image │ │ ├── taobao.png │ │ └── taobao │ │ │ ├── a1.gif │ │ │ ├── a2.jpg │ │ │ ├── a3.jpg │ │ │ ├── a4.gif │ │ │ ├── a5.jpg │ │ │ ├── ad.jpg │ │ │ ├── b1.png │ │ │ ├── b2.png │ │ │ ├── b3.png │ │ │ ├── gd1.jpg │ │ │ ├── gd2.jpg │ │ │ ├── gd3.jpg │ │ │ ├── gd4.jpg │ │ │ ├── gd5.jpg │ │ │ ├── gd6.jpg │ │ │ ├── gd7.jpg │ │ │ ├── gd8.jpg │ │ │ ├── iv1.gif │ │ │ ├── iv2.gif │ │ │ ├── iv3.gif │ │ │ ├── iv4.gif │ │ │ ├── iv5.gif │ │ │ ├── iv6.gif │ │ │ ├── ks1.jpg │ │ │ ├── ks2.jpg │ │ │ ├── ks3.jpg │ │ │ ├── ks4.jpg │ │ │ ├── ks5.jpg │ │ │ ├── ks6.jpg │ │ │ ├── ks7.jpg │ │ │ ├── ks8.jpg │ │ │ ├── ks9.jpg │ │ │ ├── p1.jpg │ │ │ ├── p2.jpg │ │ │ ├── p3.png │ │ │ ├── p4.gif │ │ │ ├── p5.gif │ │ │ ├── p6.gif │ │ │ ├── top.jpg │ │ │ ├── a_btn.png │ │ │ ├── ad_b1.jpg │ │ │ ├── ad_b2.gif │ │ │ ├── inf1.jpg │ │ │ ├── inf2.jpg │ │ │ ├── ks10.jpg │ │ │ ├── ks11.jpg │ │ │ ├── ks12.jpg │ │ │ ├── ks13.jpg │ │ │ ├── ks14.jpg │ │ │ ├── ks15.jpg │ │ │ ├── logo.swf │ │ │ ├── t_ad.gif │ │ │ └── loading.gif │ └── css │ │ ├── taobao-min-cl.css │ │ ├── taobao-min.css │ │ ├── taobao-origin.css │ │ └── taobao.css ├── gulpfile.js ├── compress.js └── src │ ├── taobao-min-cl.qcss │ ├── taobao-min.qcss │ └── taobao.qcss ├── test ├── gulpfile.js ├── src │ └── test.qcss └── dist │ └── test.css ├── mini ├── run.js └── cssmin.js ├── .gitignore ├── test-postcss-qcss ├── run.js ├── src │ └── test.qcss └── dest │ └── test.css ├── package.json ├── index.js ├── test-node-qcss ├── src │ └── test.qcss └── dist │ └── test.css ├── css2qcss.js ├── qcss-map.js ├── node-qcss.js ├── qcss-web.js └── README.md /CNAME: -------------------------------------------------------------------------------- 1 | gulp.qcss.tech -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | tmp/ 3 | .DS_Store -------------------------------------------------------------------------------- /example/dist/image/taobao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao.png -------------------------------------------------------------------------------- /example/dist/image/taobao/a1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/a1.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/a2.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/a3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/a3.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/a4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/a4.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/a5.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ad.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/b1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/b1.png -------------------------------------------------------------------------------- /example/dist/image/taobao/b2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/b2.png -------------------------------------------------------------------------------- /example/dist/image/taobao/b3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/b3.png -------------------------------------------------------------------------------- /example/dist/image/taobao/gd1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd1.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd2.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd3.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd4.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd5.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd6.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd7.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/gd8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/gd8.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/iv1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/iv1.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/iv2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/iv2.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/iv3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/iv3.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/iv4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/iv4.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/iv5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/iv5.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/iv6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/iv6.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/ks1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks1.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks2.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks3.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks4.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks5.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks6.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks7.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks8.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks9.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/p1.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/p2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/p2.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/p3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/p3.png -------------------------------------------------------------------------------- /example/dist/image/taobao/p4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/p4.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/p5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/p5.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/p6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/p6.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/top.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/a_btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/a_btn.png -------------------------------------------------------------------------------- /example/dist/image/taobao/ad_b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ad_b1.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ad_b2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ad_b2.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/inf1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/inf1.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/inf2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/inf2.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks10.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks11.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks12.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks13.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks14.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/ks15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/ks15.jpg -------------------------------------------------------------------------------- /example/dist/image/taobao/logo.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/logo.swf -------------------------------------------------------------------------------- /example/dist/image/taobao/t_ad.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/t_ad.gif -------------------------------------------------------------------------------- /example/dist/image/taobao/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/HEAD/example/dist/image/taobao/loading.gif -------------------------------------------------------------------------------- /test/gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * test file by zhangxinxu 3 | */ 4 | 5 | var gulp = require('gulp'); 6 | 7 | var qcss = require('../index'); 8 | 9 | gulp.task('default', function () { 10 | gulp.src('src/test.qcss') 11 | .pipe(qcss()) 12 | .pipe(gulp.dest('dist/')); 13 | }); -------------------------------------------------------------------------------- /mini/run.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 压缩测试的脚本 3 | */ 4 | 5 | const fs = require('fs'); 6 | 7 | const css2qcss = require('../css2qcss'); 8 | 9 | fs.readFile('./test/extra.css', 'utf8', (err, data) => { 10 | let length = data.length; 11 | 12 | //去除注释 13 | data = css2qcss(data); 14 | 15 | fs.writeFile('./test/extra.qcss', data, function () { 16 | console.log('extra.qcss压缩成功，尺寸减小了：' + Math.round(10000 * (length - data.length) / length) / 100 + '%'); 17 | }); 18 | }); -------------------------------------------------------------------------------- /mini/cssmin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 简单的CSS压缩方法 3 | * @param {[type]} data [description] 4 | * @return {[type]} [description] 5 | */ 6 | module.exports = function (data) { 7 | return data.replace(/\/\*((.|\n|\t)*?)\*\//g, '') 8 | //除去首尾空格 9 | .replace(/(\s)*{\s*/g,"{").replace(/(\s)*}\s*/g, '}') 10 | //去除样式间空格 11 | .replace(/(\s)*;\s*/g, ';') 12 | //去除样式名称后面空格 13 | .replace(/:(\s)*/g, ':') 14 | //去除换行符 15 | .replace(/(\n|\t)+/g, '') 16 | //去除末尾分号 17 | .replace(/;}/g, '}').trim(); 18 | }; -------------------------------------------------------------------------------- /example/gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * qcss vs css test by zhangxinxu 3 | */ 4 | 5 | var gulp = require('gulp'); 6 | 7 | var qcss = require('../index'); 8 | 9 | gulp.task('default', ['qcss'], function () { 10 | gulp.start('qcss:watch'); 11 | }); 12 | 13 | gulp.task('qcss', function () { 14 | console.log('编译qcss'); 15 | 16 | return gulp.src('src/taobao.qcss') 17 | .pipe(qcss()) 18 | .pipe(gulp.dest('dist/css')); 19 | }); 20 | 21 | gulp.task('qcss:watch', function () { 22 | gulp.watch('./src/*.qcss', ['qcss']); 23 | }); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | .DS_Store 40 | .vscode 41 | -------------------------------------------------------------------------------- /test-postcss-qcss/run.js: -------------------------------------------------------------------------------- 1 | // postcss中运行qcss测试 2 | let qcss = require('../qcss-web.js'); 3 | const postcss = require('postcss'); 4 | const fs = require('fs') 5 | 6 | let parse = (css, opts = {}) => { 7 | return postcss.parse(qcss(css), opts); 8 | } 9 | 10 | fs.readFile(__dirname + '/src/test.qcss', 'utf-8', (err, css) => { 11 | postcss([{ 12 | postcssPlugin: 'postcss-qcss' 13 | }]).process(css, { 14 | from: __dirname + '/src/test.qcss', 15 | to: __dirname + '/dest/test.css', 16 | parser: parse 17 | }) 18 | .then(result => { 19 | fs.writeFile(__dirname + '/dest/test.css', result.css, (err) => { 20 | if (!err) { 21 | console.log('dest/test.css编译成功'); 22 | } 23 | }) 24 | }).catch(error => { 25 | console.error(error) 26 | }) 27 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-qcss", 3 | "version": "0.0.3", 4 | "description": "A gulp plugin for writing css quickly as rocket!.", 5 | "keywords": [ 6 | "gulpplugin", 7 | "qcss", 8 | "css", 9 | "efficiency", 10 | "postcss-plugin" 11 | ], 12 | "scripts": { 13 | "test": "./test gulp" 14 | }, 15 | "homepage": "https://github.com/zhangxinxu/gulp-qcss", 16 | "bugs": { 17 | "url": "https://github.com/zhangxinxu/gulp-qcss/issues" 18 | }, 19 | "author": { 20 | "name": "zhangxinxu", 21 | "url": "https://github.com/zhangxinxu" 22 | }, 23 | "main": "index.js", 24 | "repository": { 25 | "type": "git", 26 | "url": "git://github.com/zhangxinxu/gulp-qcss.git" 27 | }, 28 | "dependencies": { 29 | "gulp-util": "^2.2.14", 30 | "through2": "^0.4.2", 31 | "postcss": "latest" 32 | }, 33 | "devDependencies": {}, 34 | "engines": { 35 | "node": ">=0.9" 36 | }, 37 | "license": "MIT", 38 | "maintainers": [ 39 | { 40 | "name": "zhangxinxu", 41 | "email": "zhangxinxu@zhangxinxu.com" 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description CSS急速书写工具，属性和特性声明全部变成几个简单字母，告别冒号和长长名称 3 | * @author zhangxinxu(.com) 4 | */ 5 | 6 | var through = require('through2'); 7 | var gutil = require('gulp-util'); 8 | var PluginError = gutil.PluginError; 9 | var qcss = require('./qcss-web'); 10 | 11 | // 常量 12 | const PLUGIN_NAME = 'gulp-qcss'; 13 | 14 | // 插件级别的函数（处理文件） 15 | function qCss(extension) { 16 | extension = extension || 'css'; 17 | 18 | // 创建一个 stream 通道，以让每个文件通过 19 | var stream = through.obj(function(file, enc, cb) { 20 | if (file.isStream()) { 21 | this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!')); 22 | return cb(); 23 | } 24 | 25 | if (file.isBuffer()) { 26 | var data = file.contents.toString('utf8'); 27 | 28 | dataReplace = qcss(data); 29 | 30 | file.contents = Buffer.concat([new Buffer(dataReplace)]); 31 | } 32 | 33 | // 改变文件后缀 34 | file.path = gutil.replaceExtension(file.path, '.' + extension); 35 | 36 | // 确保文件进入下一个 gulp 插件 37 | this.push(file); 38 | 39 | // 告诉 stream 引擎，我们已经处理完了这个文件 40 | cb(); 41 | }); 42 | 43 | // 返回文件 stream 44 | return stream; 45 | }; 46 | 47 | // 导出插件主函数 48 | module.exports = qCss; -------------------------------------------------------------------------------- /test/src/test.qcss: -------------------------------------------------------------------------------- 1 | /* 2 | $blue = #00a050; 3 | $light = #eee; 4 | $font = 'Microsoft yahei'; 5 | */ 6 | .clear{cl}.center{tc;}.hidden{dn;}hr{dn;} 7 | .ml2{ml2}.ml5{ml5;}.ml10{ml10;}.m5{m5;} 8 | .imgpad{p3; bd#ccc;} 9 | .f11{f1.1em;}.f12{f1.2em;} 10 | #link{ 11 | bg#f5f5f5; 12 | bdl5 s #ccc; 13 | f13; p4 0 4 8;} 14 | .params_table{bg#a0b3d6; f12;} 15 | .params_table th{bg#f0f3f9; bd3 s #fff; tc} 16 | .params_table td{bgc#f9f9f9; p2 4; bd3 s #fff;} 17 | .params_table tr:hover{op.9;} 18 | span.s{f0.9em; c#999;} 19 | h2.pagetitle {mt30;tc;}h3{p0;m30 0 0;n}.entry h3{mt18}h3{f1.3em;} 20 | body.category h3{f1.5em; mt10;} 21 | .zxx_code{p10; m5 0; f12; bg light; bd1 d #ccc; cl; z1;} 22 | .zxx_code pre{m0; c#00F; prew; bkw;} 23 | img.centered {db;mla;mra;} 24 | img.alignright {p4;m0 0 2 7;di; }img.alignleft {p4;m0 7 3 0;di;} 25 | .alignright {l;}.alignleft {r;} 26 | p{p8 0; m0;} 27 | .a_link{tdl;trn op .2s;}.a_link:hover{c#f30; tdn;} 28 | img{bd0;}.vimg{mb-3;} 29 | code{br3; p0 4; ff font;} 30 | .m-bg { 31 | bg url(example.jpg) no calc(100% - 30px * 2 ) b, linear-gradient(to t, #333, #999); 32 | } 33 | .m-clac{m 9 10 calc(4px / 2 + 4px + 9 * 4px) 0;} 34 | @media all and (max-width:320px) { 35 | .da_inner{w calc(100vw - 24px);} 36 | .top_da{h262;} 37 | .top_da_out::before{dn} 38 | } 39 | @supports (max-width: 100px) { 40 | body { bg red; } 41 | } -------------------------------------------------------------------------------- /test-node-qcss/src/test.qcss: -------------------------------------------------------------------------------- 1 | /* 2 | $blue = #00a050; 3 | $light = #eee; 4 | $font = 'Microsoft yahei'; 5 | */ 6 | .clear{cl}.center{tc;}.hidden{dn;}hr{dn;} 7 | .ml2{ml2}.ml5{ml5;}.ml10{ml10;}.m5{m5;} 8 | .imgpad{p3; bd#ccc;} 9 | .f11{f1.1em;}.f12{f1.2em;} 10 | #link{ 11 | bg#f5f5f5; 12 | bdl5 s #ccc; 13 | f13; p4 0 4 8;} 14 | .params_table{bg#a0b3d6; f12;} 15 | .params_table th{bg#f0f3f9; bd3 s #fff; tc} 16 | .params_table td{bgc#f9f9f9; p2 4; bd3 s #fff;} 17 | .params_table tr:hover{op.9;} 18 | span.s{f0.9em; c#999;} 19 | h2.pagetitle {mt30;tc;}h3{p0;m30 0 0;n}.entry h3{mt18}h3{f1.3em;} 20 | body.category h3{f1.5em; mt10;} 21 | .zxx_code{p10; m5 0; f12; bg light; bd1 d #ccc; cl; z1;} 22 | .zxx_code pre{m0; c#00F; prew; bkw;} 23 | img.centered {db;mla;mra;} 24 | img.alignright {p4;m0 0 2 7;di; }img.alignleft {p4;m0 7 3 0;di;} 25 | .alignright {l;}.alignleft {r;} 26 | p{p8 0; m0;} 27 | .a_link{tdl;trm op .2s;}.a_link:hover{c#f30; tdn;} 28 | img{bd0;}.vimg{mb-3;} 29 | code{br3; p0 4; ff font;} 30 | .m-bg { 31 | bg url(example.jpg) no calc(100% - 30px * 2 ) b, linear-gradient(to t, #333, #999); 32 | } 33 | .m-clac{m 9 10 calc(4px / 2 + 4px + 9 * 4px) 0;} 34 | @media all and (max-width:320px) { 35 | .da_inner{w calc(100vw - 24px);} 36 | .top_da{h262;} 37 | .top_da_out::before{dn} 38 | } 39 | @supports (max-width: 100px) { 40 | body { bg red; } 41 | } -------------------------------------------------------------------------------- /test-postcss-qcss/src/test.qcss: -------------------------------------------------------------------------------- 1 | /* 2 | $blue = #00a050; 3 | $light = #eee; 4 | $font = 'Microsoft yahei'; 5 | */ 6 | .clear{cl}.center{tc;}.hidden{dn;}hr{dn;} 7 | .ml2{ml2}.ml5{ml5;}.ml10{ml10;}.m5{m5;} 8 | .imgpad{p3; bd#ccc;} 9 | .f11{f1.1em;}.f12{f1.2em;} 10 | #link{ 11 | bg#f5f5f5; 12 | bdl5 s #ccc; 13 | f13; p4 0 4 8;} 14 | .params_table{bg#a0b3d6; f12;} 15 | .params_table th{bg#f0f3f9; bd3 s #fff; tc} 16 | .params_table td{bgc#f9f9f9; p2 4; bd3 s #fff;} 17 | .params_table tr:hover{op.9;} 18 | span.s{f0.9em; c#999;} 19 | h2.pagetitle {mt30;tc;}h3{p0;m30 0 0;n}.entry h3{mt18}h3{f1.3em;} 20 | body.category h3{f1.5em; mt10;} 21 | .zxx_code{p10; m5 0; f12; bg light; bd1 d #ccc; cl; z1;} 22 | .zxx_code pre{m0; c#00F; prew; bkw;} 23 | img.centered {db;mla;mra;} 24 | img.alignright {p4;m0 0 2 7;di; }img.alignleft {p4;m0 7 3 0;di;} 25 | .alignright {l;}.alignleft {r;} 26 | p{p8 0; m0; 27 | --vv: url(xxx); 28 | bg var(--vv)} 29 | .a_link{tdl;trm op .2s;}.a_link:hover{c#f30; tdn;} 30 | img{bd0;}.vimg{mb-3;} 31 | code{br3; p0 4; ff font;} 32 | .m-bg { 33 | bg url(example.jpg) no calc(100% - 30px * 2 ) b, linear-gradient(to t, #333, #999); 34 | dfc; 35 | } 36 | .m-clac{m 9 10 calc(4px / 2 + 4px + 9 * 4px) 0;} 37 | @media all and (max-width:320px) { 38 | .da_inner{w calc(100vw - 24px);} 39 | .top_da{h262;} 40 | .top_da_out::before{dn} 41 | } 42 | @supports (max-width: 100px) { 43 | body { bg red; } 44 | } -------------------------------------------------------------------------------- /test/dist/test.css: -------------------------------------------------------------------------------- 1 | /* 2 | $blue = #00a050; 3 | $light = #eee; 4 | $font = 'Microsoft yahei'; 5 | */ 6 | .clear { 7 | clear: both 8 | } 9 | .center { 10 | text-align: center; 11 | } 12 | .hidden { 13 | display: none; 14 | } 15 | hr { 16 | display: none; 17 | } 18 | .ml2 { 19 | margin-left: 2px 20 | } 21 | .ml5 { 22 | margin-left: 5px; 23 | } 24 | .ml10 { 25 | margin-left: 10px; 26 | } 27 | .m5 { 28 | margin: 5px; 29 | } 30 | .imgpad { 31 | padding: 3px; 32 | border: #ccc; 33 | } 34 | .f11 { 35 | font-size: 1.1em; 36 | } 37 | .f12 { 38 | font-size: 1.2em; 39 | } 40 | #link { 41 | background: #f5f5f5; 42 | border-left: 5px solid #ccc; 43 | font-size: 13px; 44 | padding: 4px 0 4px 8px; 45 | } 46 | .params_table { 47 | background: #a0b3d6; 48 | font-size: 12px; 49 | } 50 | .params_table th { 51 | background: #f0f3f9; 52 | border: 3px solid #fff; 53 | text-align: center 54 | } 55 | .params_table td { 56 | background-color: #f9f9f9; 57 | padding: 2px 4px; 58 | border: 3px solid #fff; 59 | } 60 | .params_table tr:hover { 61 | opacity: .9; 62 | } 63 | span.s { 64 | font-size: 0.9em; 65 | color: #999; 66 | } 67 | h2.pagetitle { 68 | margin-top: 30px; 69 | text-align: center; 70 | } 71 | h3 { 72 | padding: 0; 73 | margin: 30px 0 0; 74 | font-weight: normal; 75 | font-style: normal 76 | } 77 | .entry h3 { 78 | margin-top: 18px 79 | } 80 | h3 { 81 | font-size: 1.3em; 82 | } 83 | body.category h3 { 84 | font-size: 1.5em; 85 | margin-top: 10px; 86 | } 87 | .zxx_code { 88 | padding: 10px; 89 | margin: 5px 0; 90 | font-size: 12px; 91 | background: #eee; 92 | border: 1px dashed #ccc; 93 | clear: both; 94 | zoom: 1; 95 | } 96 | .zxx_code pre { 97 | margin: 0; 98 | color: #00F; 99 | white-space: pre-wrap; 100 | word-wrap: break-word; 101 | } 102 | img.centered { 103 | display: block; 104 | margin-left: auto; 105 | margin-right: auto; 106 | } 107 | img.alignright { 108 | padding: 4px; 109 | margin: 0 0 2px 7px; 110 | display: inline; 111 | } 112 | img.alignleft { 113 | padding: 4px; 114 | margin: 0 7px 3px 0; 115 | display: inline; 116 | } 117 | .alignright { 118 | float: left; 119 | } 120 | .alignleft { 121 | float: right; 122 | } 123 | p { 124 | padding: 8px 0; 125 | margin: 0; 126 | } 127 | .a_link { 128 | text-decoration: underline; 129 | transition: opacity .2s; 130 | } 131 | .a_link:hover { 132 | color: #f30; 133 | text-decoration: none; 134 | } 135 | img { 136 | border: 0; 137 | } 138 | .vimg { 139 | margin-bottom: -3px; 140 | } 141 | code { 142 | border-radius: 3px; 143 | padding: 0 4px; 144 | font-family: 'Microsoft yahei'; 145 | } 146 | .m-bg { 147 | background: url(example.jpg) no-repeat calc(100% - 30px * 2 ) bottom, linear-gradient(to top, #333, #999); 148 | } 149 | .m-clac { 150 | margin: 9px 10px calc(4px / 2 + 4px + 9 * 4px) 0; 151 | } 152 | @media all and (max-width:320px) { 153 | .da_inner { 154 | width: calc(100vw - 24px); 155 | } 156 | .top_da { 157 | height: 262px; 158 | } 159 | .top_da_out::before { 160 | display: none 161 | } 162 | } 163 | @supports (max-width: 100px) { 164 | body { 165 | background: red; 166 | } 167 | } -------------------------------------------------------------------------------- /test-node-qcss/dist/test.css: -------------------------------------------------------------------------------- 1 | /* 2 | $blue = #00a050; 3 | $light = #eee; 4 | $font = 'Microsoft yahei'; 5 | */ 6 | .clear { 7 | clear: both 8 | } 9 | .center { 10 | text-align: center; 11 | } 12 | .hidden { 13 | display: none; 14 | } 15 | hr { 16 | display: none; 17 | } 18 | .ml2 { 19 | margin-left: 2px 20 | } 21 | .ml5 { 22 | margin-left: 5px; 23 | } 24 | .ml10 { 25 | margin-left: 10px; 26 | } 27 | .m5 { 28 | margin: 5px; 29 | } 30 | .imgpad { 31 | padding: 3px; 32 | border: #ccc; 33 | } 34 | .f11 { 35 | font-size: 1.1em; 36 | } 37 | .f12 { 38 | font-size: 1.2em; 39 | } 40 | #link { 41 | background: #f5f5f5; 42 | border-left: 5px solid #ccc; 43 | font-size: 13px; 44 | padding: 4px 0 4px 8px; 45 | } 46 | .params_table { 47 | background: #a0b3d6; 48 | font-size: 12px; 49 | } 50 | .params_table th { 51 | background: #f0f3f9; 52 | border: 3px solid #fff; 53 | text-align: center 54 | } 55 | .params_table td { 56 | background-color: #f9f9f9; 57 | padding: 2px 4px; 58 | border: 3px solid #fff; 59 | } 60 | .params_table tr:hover { 61 | opacity: .9; 62 | } 63 | span.s { 64 | font-size: 0.9em; 65 | color: #999; 66 | } 67 | h2.pagetitle { 68 | margin-top: 30px; 69 | text-align: center; 70 | } 71 | h3 { 72 | padding: 0; 73 | margin: 30px 0 0; 74 | font-weight: normal; 75 | font-style: normal 76 | } 77 | .entry h3 { 78 | margin-top: 18px 79 | } 80 | h3 { 81 | font-size: 1.3em; 82 | } 83 | body.category h3 { 84 | font-size: 1.5em; 85 | margin-top: 10px; 86 | } 87 | .zxx_code { 88 | padding: 10px; 89 | margin: 5px 0; 90 | font-size: 12px; 91 | background: #eee; 92 | border: 1px dashed #ccc; 93 | clear: both; 94 | zoom: 1; 95 | } 96 | .zxx_code pre { 97 | margin: 0; 98 | color: #00F; 99 | white-space: pre-wrap; 100 | word-wrap: break-word; 101 | } 102 | img.centered { 103 | display: block; 104 | margin-left: auto; 105 | margin-right: auto; 106 | } 107 | img.alignright { 108 | padding: 4px; 109 | margin: 0 0 2px 7px; 110 | display: inline; 111 | } 112 | img.alignleft { 113 | padding: 4px; 114 | margin: 0 7px 3px 0; 115 | display: inline; 116 | } 117 | .alignright { 118 | float: left; 119 | } 120 | .alignleft { 121 | float: right; 122 | } 123 | p { 124 | padding: 8px 0; 125 | margin: 0; 126 | } 127 | .a_link { 128 | text-decoration: underline; 129 | transition: op .2s; 130 | } 131 | .a_link:hover { 132 | color: #f30; 133 | text-decoration: none; 134 | } 135 | img { 136 | border: 0; 137 | } 138 | .vimg { 139 | margin-bottom: -3px; 140 | } 141 | code { 142 | border-radius: 3px; 143 | padding: 0 4px; 144 | font-family: 'Microsoft yahei'; 145 | } 146 | .m-bg { 147 | background: url(example.jpg) no-repeat calc(100% - 30px * 2 ) bottom, linear-gradient(to top, #333, #999); 148 | } 149 | .m-clac { 150 | margin: 9px 10px calc(4px / 2 + 4px + 9 * 4px) 0; 151 | } 152 | @media all and (max-width:320px) { 153 | .da_inner { 154 | width: calc(100vw - 24px); 155 | } 156 | .top_da { 157 | height: 262px; 158 | } 159 | .top_da_out::before { 160 | display: none 161 | } 162 | } 163 | @supports (max-width: 100px) { 164 | body { 165 | background: red; 166 | } 167 | } -------------------------------------------------------------------------------- /test-postcss-qcss/dest/test.css: -------------------------------------------------------------------------------- 1 | /* 2 | $blue = #00a050; 3 | $light = #eee; 4 | $font = 'Microsoft yahei'; 5 | */ 6 | .clear { 7 | clear: both 8 | } 9 | .center { 10 | text-align: center; 11 | } 12 | .hidden { 13 | display: none; 14 | } 15 | hr { 16 | display: none; 17 | } 18 | .ml2 { 19 | margin-left: 2px 20 | } 21 | .ml5 { 22 | margin-left: 5px; 23 | } 24 | .ml10 { 25 | margin-left: 10px; 26 | } 27 | .m5 { 28 | margin: 5px; 29 | } 30 | .imgpad { 31 | padding: 3px; 32 | border: #ccc; 33 | } 34 | .f11 { 35 | font-size: 1.1em; 36 | } 37 | .f12 { 38 | font-size: 1.2em; 39 | } 40 | #link { 41 | background: #f5f5f5; 42 | border-left: 5px solid #ccc; 43 | font-size: 13px; 44 | padding: 4px 0 4px 8px; 45 | } 46 | .params_table { 47 | background: #a0b3d6; 48 | font-size: 12px; 49 | } 50 | .params_table th { 51 | background: #f0f3f9; 52 | border: 3px solid #fff; 53 | text-align: center 54 | } 55 | .params_table td { 56 | background-color: #f9f9f9; 57 | padding: 2px 4px; 58 | border: 3px solid #fff; 59 | } 60 | .params_table tr:hover { 61 | opacity: .9; 62 | } 63 | span.s { 64 | font-size: 0.9em; 65 | color: #999; 66 | } 67 | h2.pagetitle { 68 | margin-top: 30px; 69 | text-align: center; 70 | } 71 | h3 { 72 | padding: 0; 73 | margin: 30px 0 0; 74 | font-weight: normal; 75 | font-style: normal 76 | } 77 | .entry h3 { 78 | margin-top: 18px 79 | } 80 | h3 { 81 | font-size: 1.3em; 82 | } 83 | body.category h3 { 84 | font-size: 1.5em; 85 | margin-top: 10px; 86 | } 87 | .zxx_code { 88 | padding: 10px; 89 | margin: 5px 0; 90 | font-size: 12px; 91 | background: #eee; 92 | border: 1px dashed #ccc; 93 | clear: both; 94 | zoom: 1; 95 | } 96 | .zxx_code pre { 97 | margin: 0; 98 | color: #00F; 99 | white-space: pre-wrap; 100 | word-wrap: break-word; 101 | } 102 | img.centered { 103 | display: block; 104 | margin-left: auto; 105 | margin-right: auto; 106 | } 107 | img.alignright { 108 | padding: 4px; 109 | margin: 0 0 2px 7px; 110 | display: inline; 111 | } 112 | img.alignleft { 113 | padding: 4px; 114 | margin: 0 7px 3px 0; 115 | display: inline; 116 | } 117 | .alignright { 118 | float: left; 119 | } 120 | .alignleft { 121 | float: right; 122 | } 123 | p { 124 | padding: 8px 0; 125 | margin: 0; 126 | --vv: url(xxx); 127 | background: var(--vv) 128 | } 129 | .a_link { 130 | text-decoration: underline; 131 | transform: op .2s; 132 | } 133 | .a_link:hover { 134 | color: #f30; 135 | text-decoration: none; 136 | } 137 | img { 138 | border: 0; 139 | } 140 | .vimg { 141 | margin-bottom: -3px; 142 | } 143 | code { 144 | border-radius: 3px; 145 | padding: 0 4px; 146 | font-family: 'Microsoft yahei'; 147 | } 148 | .m-bg { 149 | background: url(example.jpg) no-repeat calc(100% - 30px * 2 ) bottom, linear-gradient(to top, #333, #999); 150 | display: flex; 151 | align-items: center; 152 | justify-content: center; 153 | } 154 | .m-clac { 155 | margin: 9px 10px calc(4px / 2 + 4px + 9 * 4px) 0; 156 | } 157 | @media all and (max-width:320px) { 158 | .da_inner { 159 | width: calc(100vw - 24px); 160 | } 161 | .top_da { 162 | height: 262px; 163 | } 164 | .top_da_out::before { 165 | display: none 166 | } 167 | } 168 | @supports (max-width: 100px) { 169 | body { 170 | background: red; 171 | } 172 | } -------------------------------------------------------------------------------- /css2qcss.js: -------------------------------------------------------------------------------- 1 | module.exports = function (data) { 2 | var dataMap = require('./qcss-map'); 3 | const cssmin = require('./mini/cssmin'); 4 | // key转换 5 | var keyMap = dataMap.keyMap; 6 | var valueMap = dataMap.valueMap; 7 | 8 | // 键值位置调换，同时去空格 9 | var objKeyMap = {}, objValueMap = {}; 10 | for (var keyKeyMap in keyMap) { 11 | objKeyMap[keyMap[keyKeyMap].replace(/:\s+/g, ':').replace(/;\s+/g, ';')] = keyKeyMap; 12 | } 13 | for (var keyValueMap in valueMap) { 14 | objValueMap[valueMap[keyValueMap].replace(/:\s+/g, ':').replace(/;\s+/g, ';')] = keyValueMap; 15 | } 16 | 17 | // 先去注释等进行压缩 18 | data = cssmin(data); 19 | 20 | // CSS属性键值分离 21 | var dataReplace = data.replace(/\{([\w\W]*?)\}/g, function (matchs, $1) { 22 | var prefix = '{', suffix = '}'; 23 | 24 | // 查询语句处理 25 | if (/\{/.test($1)) { 26 | suffix = '}'; 27 | prefix = '{' + $1.split('{')[0] + '{'; 28 | $1 = $1.split('{')[1]; 29 | } 30 | // 替换 31 | // 分号是分隔符 32 | return prefix + $1.split(';').map(function (state) { 33 | // state声明例如display:block 34 | if (!state) { 35 | return ''; 36 | } 37 | // 首先，是否完整匹配 38 | if (objKeyMap[state]) { 39 | return objKeyMap[state]; 40 | } 41 | 42 | // 然后键值和属性值分别匹配 43 | var arrKeyValue = state.split(':'); 44 | if (arrKeyValue.length == 1) { 45 | return state; 46 | } 47 | 48 | var key = arrKeyValue[0] + ':', value = state.replace(key, ''); 49 | 50 | // key的处理 51 | if (objKeyMap[key]) { 52 | key = objKeyMap[key]; 53 | 54 | // 有一些属性的值不处理 55 | if (key == 'con' || key == 'a') { 56 | return key + ' ' + value; 57 | } 58 | } 59 | 60 | // value中的关键字替换和px单位缺省 61 | // value复杂场景示意 62 | // url(example.jpg) no-repeat calc(100% - 30px) bottom, linear-gradient(to top, #333, #999); 63 | value = (value || '').split(',').map(function (multiple) { 64 | // multiple可能值举例 65 | // 0 1px 66 | // 1px solid #ddd; 67 | // inset 1px 1px rgba(0,0,0,.04) 68 | // url(http://image.zhangxinxu.com/example.jpg) no-repeat left bottom 69 | // calc不处理 70 | if (/^calc/.test(multiple.trim())) { 71 | return multiple; 72 | } 73 | return (multiple || '').split(/\s+/).map(function (parts) { 74 | // 如果有关键字匹配，直接返回 75 | if (objValueMap[parts]) { 76 | return objValueMap[parts]; 77 | } 78 | 79 | // px单位缺省 80 | if (key == 'tsl') { 81 | // transition过渡可以使用键值替换 82 | return objKeyMap[parts + ':'] || parts; 83 | } 84 | 85 | if (/\d+px$/.test(parts)) { 86 | var num = parts.replace('px', ''); 87 | // line-height 88 | // 小尺寸line-height px不缺省 89 | if (key == 'lh' && num < 5) { 90 | return parts; 91 | } 92 | return num; 93 | } 94 | return parts; 95 | }).join(' '); 96 | }).join(','); 97 | 98 | if (/^[a-z]/.test(value)) { 99 | return key + ' ' + value; 100 | } 101 | return key + value; 102 | }).join(';') + suffix; 103 | }); 104 | 105 | return dataReplace; 106 | }; -------------------------------------------------------------------------------- /qcss-map.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | keyMap: { 3 | dn: 'display: none', 4 | di: 'display: inline', 5 | dib: 'display: inline-block', 6 | db: 'display: block', 7 | dt: 'display: table', 8 | dtc: 'display: table-cell', 9 | df: 'display: flex', 10 | dg: 'display:grid', 11 | m: 'margin: ', 12 | ml: 'margin-left: ', 13 | mt: 'margin-top: ', 14 | mr: 'margin-right: ', 15 | mb: 'margin-bottom: ', 16 | ma: 'margin: auto', 17 | mla: 'margin-left: auto', 18 | mra: 'margin-right: auto', 19 | p: 'padding: ', 20 | pl: 'padding-left: ', 21 | pt: 'padding-top: ', 22 | pr: 'padding-right: ', 23 | pb: 'padding-bottom: ', 24 | l: 'float: left', 25 | r: 'float: right', 26 | bg: 'background: ', 27 | bgc: 'background-color: ', 28 | bgi: 'background-image: ', 29 | bgr: 'background-repeat: ', 30 | bgp: 'background-position: ', 31 | bgs: 'background-size: ', 32 | bgo: 'background-origin: ', 33 | c: 'color: ', 34 | bd: 'border: ', 35 | bdl: 'border-left: ', 36 | bdr: 'border-right: ', 37 | bdt: 'border-top: ', 38 | bdb: 'border-bottom: ', 39 | bds: 'border-style: ', 40 | bdw: 'border-width: ', 41 | bdc: 'border-color: ', 42 | br: 'border-radius: ', 43 | bbb: 'box-sizing: border-box', 44 | o: 'outline: ', 45 | f: 'font-size: ', 46 | ff: 'font-family: ', 47 | fs: 'font-style: ', 48 | fw: 'font-weight: ', 49 | b: 'font-weight: bold', 50 | i: 'font-style: italic', 51 | n: 'font-weight: normal; font-style: normal', 52 | tdl: 'text-decoration: underline', 53 | tdn: 'text-decoration: none', 54 | tc: 'text-align: center', 55 | tl: 'text-align: left', 56 | tr: 'text-align: right', 57 | tj: 'text-align: justify', 58 | ti: 'text-indent: ', 59 | cl: 'clear: both', 60 | abs: 'position: absolute', 61 | rel: 'position: relative', 62 | fix: 'position: fixed', 63 | op: 'opacity: ', 64 | z: 'zoom: ', 65 | zx: 'z-index: ', 66 | h: 'height: ', 67 | w: 'width: ', 68 | minw: 'min-width: ', 69 | maxw: 'max-width: ', 70 | minh: 'min-height: ', 71 | maxh: 'max-height: ', 72 | lh: 'line-height: ', 73 | v: 'vertical-align: ', 74 | vt: 'vertical-align: top', 75 | vm: 'vertical-align: middle', 76 | vb: 'vertical-align: bottom', 77 | poi: 'cursor: pointer', 78 | def: 'cursor: default', 79 | tex: 'cursor: text', 80 | ovh: 'overflow: hidden', 81 | ova: 'overflow: auto', 82 | vh: 'visibility: hidden', 83 | vv: 'visibility: visible', 84 | prew: 'white-space: pre-wrap', 85 | pre: 'white-space: pre', 86 | nowrap: 'white-space: nowrap', 87 | bk: 'word-break: break-all', 88 | bkw: 'word-wrap: break-word', 89 | ws: 'word-spacing: ', 90 | ls: 'letter-spacing: ', 91 | a: 'animation: ', 92 | trm: 'transform: ', 93 | trn: 'transition: ', 94 | bs: 'box-shadow: ', 95 | ts: 'text-shadow: ', 96 | con: 'content: ', 97 | pe: 'pointer-events: ', 98 | table: 'display: table; table-layout: fixed; width: 100%', 99 | center: 'position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto', 100 | ell: 'text-overflow: ellipsis; white-space: nowrap; overflow: hidden', 101 | clip: 'position: absolute; clip: rect(0 0 0 0)', 102 | dgc: 'display: grid; place-items: center', 103 | dfc: 'display: flex; align-items: center; justify-content: center' 104 | }, 105 | valueMap: { 106 | a: 'auto', 107 | s: 'solid', 108 | d: 'dashed', 109 | tt: 'transparent', 110 | cc: 'currentColor', 111 | n: 'normal', 112 | c: 'center', 113 | rx: 'repeat-x', 114 | ry: 'repeat-y', 115 | no: 'no-repeat', 116 | ih: 'inherit', 117 | l: 'left', 118 | t: 'top', 119 | r: 'right', 120 | b: 'bottom' 121 | } 122 | }; -------------------------------------------------------------------------------- /node-qcss.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @description QCSS实时编译加速书写小工具 3 | * 纯node版本测试 4 | * 实际使用需要配置pathSrcQcss和pathDistQcss两个路径 5 | * 因为使用了ES7 async和await，需要Node.js版本不能太老 6 | * @author zhangxinxu(.com) 7 | */ 8 | 9 | const fs = require('fs'); 10 | stat = fs.stat; 11 | 12 | const path = require('path'); 13 | const url = require('url'); 14 | 15 | const https = require('https'); 16 | 17 | // 两个qcss运行需要的模块 18 | const moduleQcssMap = './qcss-map'; 19 | const moduleQcssWeb = './qcss-web'; 20 | 21 | 22 | // pathSrcQcss是qcss文件夹目录 23 | // pathDistQcss是编译出来对应的css文件夹目录 24 | // 这两个是配置项 25 | const pathSrcQcss = './test-node-qcss/src/'; 26 | const pathDistQcss = './test-node-qcss/dist/'; 27 | 28 | /** 29 | * 异步在线获取qcss模块的方法 30 | * @param {[type]} filepath 需要远程获取的文件名 31 | * @return {[type]} [description] 32 | */ 33 | async function getHttpsData (filepath) { 34 | return await new Promise((resolve, reject) => { 35 | var url = 'https://raw.githubusercontent.com/zhangxinxu/gulp-qcss/master/' + filepath; 36 | 37 | console.log('正在获取' + filepath + '数据...'); 38 | 39 | https.get(url, function (res) { 40 | var statusCode = res.statusCode; 41 | 42 | if (statusCode !== 200) { 43 | console.error(filepath + '获取失败，错误码' + statusCode); 44 | // 出错回调 45 | reject(); 46 | // 消耗响应数据以释放内存 47 | res.resume(); 48 | return; 49 | } 50 | 51 | res.setEncoding('utf8'); 52 | var rawData = ''; 53 | res.on('data', function (chunk) { 54 | rawData += chunk; 55 | }); 56 | 57 | // 请求结束 58 | res.on('end', function () { 59 | resolve(rawData); 60 | }).on('error', function (e) { 61 | console.error('发生错误：' + e.message); 62 | // 出错回调 63 | reject(); 64 | }); 65 | }); 66 | }); 67 | }; 68 | 69 | // 判断模块是否存在 70 | async function moduleRequire () { 71 | let filenameQcssMap = path.join('../', moduleQcssMap + '.js'); 72 | let filenameQcssWeb = path.join('../', moduleQcssWeb + '.js'); 73 | 74 | // 如果上级目录没有对应模块（gulp-css中的默认资源路径）， 75 | // 则认为模块在平级目录 76 | if (!fs.existsSync(filenameQcssMap)) { 77 | filenameQcssMap = moduleQcssMap + '.js'; 78 | } 79 | 80 | if (!fs.existsSync(filenameQcssWeb)) { 81 | filenameQcssWeb = moduleQcssWeb + '.js'; 82 | } 83 | 84 | // 这里在线拉取模块的数据 85 | let dataQcssMap = ''; 86 | let dataQcssWeb = ''; 87 | 88 | // 如果本地没有模块，则在线获取 89 | if (!fs.existsSync(filenameQcssMap)) { 90 | dataQcssMap = await getHttpsData(filenameQcssMap); 91 | // 写入 92 | fs.writeFileSync(filenameQcssMap, dataQcssMap, { 93 | encoding: 'utf8' 94 | }); 95 | } 96 | if (!fs.existsSync(filenameQcssWeb)) { 97 | dataQcssWeb = await getHttpsData(filenameQcssWeb); 98 | // 写入 99 | fs.writeFileSync(filenameQcssWeb, dataQcssWeb, { 100 | encoding: 'utf8' 101 | }); 102 | } 103 | 104 | let qcss = require(filenameQcssWeb); 105 | 106 | /* 107 | ** qCss CSS快速书写 108 | ** @params src qcss原始文件所在目录 109 | ** @params dist 生成CSS文件所在目录 110 | */ 111 | 112 | let qcss2css = function (src, dist) { 113 | fs.readdirSync(src).forEach(function (filename) { 114 | if (/\.qcss$/.test(filename)) { 115 | // .qcss文件才处理 116 | // 读文件内容 117 | fs.readFile(path.join(src, filename), { 118 | // 需要指定编码方式，否则返回原生buffer 119 | encoding: 'utf8' 120 | }, function (err, data) { 121 | let dataReplace = qcss(data); 122 | 123 | // 于是生成新的CSS文件 124 | let newFilename = filename.replace('.qcss', '.css'); 125 | fs.writeFile(path.join(dist, newFilename), dataReplace, { 126 | encoding: 'utf8' 127 | }, function () { 128 | console.log(newFilename + '生成成功！'); 129 | }); 130 | }); 131 | } 132 | }); 133 | }; 134 | 135 | // 任务 136 | const task = { 137 | qcss: { 138 | init: function () { 139 | // 资源清理 140 | qcss2css(pathSrcQcss, pathDistQcss); 141 | } 142 | } 143 | }; 144 | 145 | 146 | // 一开始第一次任务 147 | for (var keyTask in task) { 148 | task[keyTask].init(); 149 | } 150 | 151 | let timerCommonCSS; 152 | fs.watch(pathSrcQcss, (eventType, filename) => { 153 | // 定时器让多文件同时变更只会只会执行一次合并 154 | clearTimeout(timerCommonCSS); 155 | timerCommonCSS = setTimeout(() => { 156 | console.log(filename + '发生了' + eventType + '变化，正在编译...'); 157 | task.qcss.init(); 158 | }, 100); 159 | }); 160 | }; 161 | 162 | moduleRequire(); 163 | -------------------------------------------------------------------------------- /qcss-web.js: -------------------------------------------------------------------------------- 1 | module.exports = function (data) { 2 | var dataMap = require('./qcss-map'); 3 | // key转换 4 | var keyMap = dataMap.keyMap; 5 | 6 | var valueMap = dataMap.valueMap; 7 | 8 | // 计算出文件中设置的映射 9 | var valueMapCustom = {}; 10 | 11 | data.replace(/\/\*([\w\W]*?)\*\//, function (matchs, $1) { 12 | $1.split(';').forEach(function (parts) { 13 | var needPart = parts.split('$')[1]; 14 | if (needPart && needPart.split(/=|:/).length == 2) { 15 | var keyValue = needPart.split(/=|:/); 16 | if (keyValue[1].trim() && keyValue[0].trim()) { 17 | valueMapCustom[keyValue[0].trim()] = keyValue[1].trim(); 18 | } 19 | } 20 | }); 21 | }); 22 | 23 | // base64 protect 24 | data = data.replace(/;base64,/g, '%%%%%%'); 25 | // url protect 26 | data = data.replace(/:\/\//g, '#@#@#'); 27 | 28 | var dataReplace = data.replace(/\{([\w\W]*?)\}/g, function (matchs, $1) { 29 | // 删除声明块中的/**/注释 30 | $1 = $1.replace(/\/\*([\w\W]*?)\*\//g, ''); 31 | 32 | // 格式美化需要的变量 33 | var space = ' '; 34 | var prefix = '{\n' + space, suffix = '\n}'; 35 | 36 | // 查询语句处理 37 | if (/\{/.test($1)) { 38 | suffix = '\n' + space + '}'; 39 | space = space + space; 40 | prefix = '{' + $1.split('{')[0] + '{\n' + space; 41 | 42 | $1 = $1.split('{')[1]; 43 | } 44 | // 替换 45 | // 分号是分隔符 46 | return prefix + $1.split(';').map(function (state) { 47 | state = state.trim(); 48 | if (!state) { 49 | return ''; 50 | } 51 | if (state.indexOf(':') != -1) { 52 | return state; 53 | } 54 | // state指一段声明，例如f 20，此时下面的key是f, value是20 55 | return state.replace(/^([a-z]+)(.*)$/g, function (matchs, key, value) { 56 | // 值主要是增加单位，和一些关键字转换 57 | // 1. 逗号 58 | value = (value || '').split(',').map(function (multiple) { 59 | // calc计算里面值不处理 60 | var arrCalc = multiple.match(/calc\([\w\W]*?\)/g) || ['']; 61 | multiple = multiple.replace(/calc\([\w\W]*?\)/g, 'calc()'); 62 | 63 | var arrMultipleCalc = (multiple || '').trim().split(' ').map(function (parts) { 64 | parts = parts.trim(); 65 | if (!parts) { 66 | return ''; 67 | } 68 | 69 | if (key == 'l') { 70 | key = 'left: '; 71 | } else if (key == 't') { 72 | key = 'top: '; 73 | } else if (key == 'r') { 74 | key = 'right: '; 75 | } else if (key == 'b') { 76 | key = 'bottom: '; 77 | } 78 | 79 | if (!isNaN(parts)) { 80 | // 数值自动加px单位 81 | // 不包括行高 82 | if (key == 'lh' && parts < 5) { 83 | return parts; 84 | } else if (/^(?:zx|op|z|fw)$/.test(key) == false && parts != '0') { 85 | parts = parts + 'px'; 86 | } 87 | } else if (key == 'trn') { 88 | // transition过渡 89 | parts = (keyMap[parts] || parts).replace(':', '').trim(); 90 | } else if (key != 'a') { 91 | // CSS动画不对值进行替换 92 | parts = valueMapCustom[parts] || valueMap[parts] || parts; 93 | } 94 | return parts; 95 | }).join(' ').split('calc()'); 96 | // calc还原 97 | return arrMultipleCalc.map(function (parts, index) { 98 | return parts + (arrCalc[index] || ''); 99 | }).join(''); 100 | }).join(', '); 101 | 102 | // 键转换 103 | if (/:/.test(key) == false) { 104 | key = keyMap[key] || key + ': '; 105 | } 106 | value = value.trim(); 107 | // 对齐美化 108 | if (!value) { 109 | key = key.split(';').map(function (beauty) { 110 | return beauty.trim().replace(/:\s+/, ': '); 111 | }).join(';\n' + space); 112 | } 113 | 114 | return key + value; 115 | }); 116 | }).join(';\n' + space).trim() + suffix; 117 | }).replace(/\w\{/g, function (matchs) { 118 | return matchs.replace('{', ' {'); 119 | }).replace(/\}(\.|#|\:|\[|\w)/g, function (matchs) { 120 | return matchs.replace('}', '}\n'); 121 | }); 122 | 123 | // base64 back 124 | dataReplace = dataReplace.replace(/%%%%%%/g, ';base64,') 125 | // url back 126 | .replace(/#@#@#/g, '://'); 127 | 128 | return dataReplace; 129 | }; -------------------------------------------------------------------------------- /example/compress.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 压缩qcss和css 3 | * 以及css和html类名压缩 4 | * 运行：node compress 5 | */ 6 | 7 | const fs = require('fs'); 8 | stat = fs.stat; 9 | 10 | const path = require('path'); 11 | const url = require('url'); 12 | 13 | const cssmin = require('../mini/cssmin'); 14 | 15 | 16 | let urlQcss = './src/taobao.qcss'; 17 | let urlQcssMini = './src/taobao-min.qcss'; 18 | let urlQcssCl = './src/taobao-min-cl.qcss'; 19 | 20 | let urlCss = './dist/css/taobao.css'; 21 | let urlCssMini = './dist/css/taobao-min.css'; 22 | let urlCssCl = './dist/css/taobao-min-cl.css'; 23 | 24 | let urlHtml = './dist/taobao.html'; 25 | let urlHtmlCl = './dist/taobao-cl.html'; 26 | 27 | 28 | ({ 29 | /** 30 | * css, qcss文件压缩 31 | * @return {[type]} [description] 32 | */ 33 | eventCssMini: function (from, to, callback) { 34 | fs.readFile(from, 'utf8', (err, data) => { 35 | let length = data.length; 36 | 37 | //去除注释 38 | data = cssmin(data); 39 | 40 | fs.writeFile(to, data, function () { 41 | console.log(from + '压缩为' + to + '成功，压缩率为：' + Math.round(10000 * (length - data.length) / length) / 100 + '%'); 42 | callback && callback(); 43 | }); 44 | }); 45 | }, 46 | /** 47 | * 类名压缩 48 | * @return {[type]} [description] 49 | */ 50 | eventClassNameMini: function () { 51 | var self = this; 52 | 53 | // 类名压缩的映射数据 54 | self.hashClassName = {}; 55 | // 类名压缩序号 56 | self.indexClassName = 0; 57 | 58 | fs.readFile(urlQcssMini, 'utf-8', (err, data) => { 59 | let length = data.length; 60 | data = self.CSSclassNameReplace(data); 61 | 62 | // 写入CSS压缩数据 63 | fs.writeFile(urlQcssCl, data, function () { 64 | console.log(urlQcssMini + '类名压缩成功，压缩率为：' + Math.round(10000 * (length - data.length) / length) / 100 + '%'); 65 | }); 66 | }); 67 | 68 | fs.readFile(urlCssMini, 'utf-8', (err, data) => { 69 | let length = data.length; 70 | data = self.CSSclassNameReplace(data); 71 | 72 | // 写入CSS压缩数据 73 | fs.writeFile(urlCssCl, data, function () { 74 | console.log(urlCssMini + '类名压缩成功，压缩率为：' + Math.round(10000 * (length - data.length) / length) / 100 + '%'); 75 | }); 76 | 77 | // HTML类名同步更新 78 | fs.readFile(urlHtml, 'utf-8', (err, data) => { 79 | console.log(urlHtml + '类名替换中...'); 80 | data = data.replace(/class\s*=\s*"(.*?)"/g, function(matchs, $1) { 81 | // console.log($1); 82 | return 'class="' + $1.split(' ').map(function(className) { 83 | if (self.hashClassName[className]) { 84 | return self.hashClassName[className]; 85 | } 86 | return className; 87 | }).join(' ') + '"'; 88 | }).replace('/taobao.css"', '/taobao-min-cl.css"'); 89 | // 写入压缩后的HTML 90 | fs.writeFile(urlHtmlCl, data, function () { 91 | console.log(urlHtmlCl + '类名压缩成功'); 92 | }); 93 | }); 94 | 95 | }); 96 | }, 97 | /** 98 | * 类名压缩参与字母 99 | * @type {Array} 100 | */ 101 | seedClassName: ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'], 102 | 103 | // 按照序号返回类名 104 | getClassName: function () { 105 | var self = this; 106 | 107 | var seedClassName = self.seedClassName; 108 | var indexClassName = self.indexClassName; 109 | 110 | var length = seedClassName.length; 111 | 112 | 113 | var left = indexClassName % length, loop = Math.floor(indexClassName / length), repeat = loop % length; 114 | 115 | var className = ''; 116 | 117 | var char1 = seedClassName[repeat].toUpperCase(), char2 = seedClassName[left].toUpperCase(); 118 | 119 | if (loop >= length) { 120 | char1 = char1.toLowerCase(); 121 | 122 | } 123 | if (loop >= length * 2) { 124 | char2 = char1.toLowerCase(); 125 | } 126 | if (loop >= length * 3) { 127 | console.log('超出2027数目限制，增加数字支持'); 128 | char2 = char2 + (indexClassName - 2027); 129 | } 130 | 131 | indexClassName++; 132 | 133 | self.seedClassName = seedClassName; 134 | self.indexClassName = indexClassName; 135 | 136 | return char1 + char2; 137 | }, 138 | 139 | // CSS类名压缩 140 | CSSclassNameReplace: function (data) { 141 | var self = this; 142 | // 不参与压缩的类名 143 | var arrClassNameIgnore = ['png', 'gif', 'jpg']; 144 | 145 | console.log('CSS压缩类名缓存中...'); 146 | return data.replace(/\.[a-z][a-z0-9]*(?:[\-\_]\w+)*/gi, function(matchs) { 147 | matchs = matchs.replace('.', ''); 148 | 149 | if (self.hashClassName[matchs]) { 150 | return '.' + self.hashClassName[matchs]; 151 | } else if (arrClassNameIgnore.indexOf(matchs) === -1) { 152 | var shortName = self.getClassName(); 153 | self.hashClassName[matchs] = shortName; 154 | return '.' + shortName; 155 | } 156 | return '.' + matchs; 157 | }); 158 | }, 159 | /** 160 | * 事件入口 161 | * @return {[type]} [description] 162 | */ 163 | init: function () { 164 | var self = this; 165 | 166 | self.eventCssMini(urlQcss, urlQcssMini, function () { 167 | self.eventCssMini(urlCss, urlCssMini, function () { 168 | self.eventClassNameMini(); 169 | }); 170 | }); 171 | } 172 | }).init(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 虽然本项目名称中出现了gulp，但是，千万不要误导。实际上，gulp只是偏角一隅，本项目不仅支持gulp使用，还支持纯node.js使用，还支持web版使用等。 2 | 3 | # QCSS - CSS快速书写和新式CSS压缩小工具 4 | 5 | 自己弄的一个Node.js小工具，本打算作为私藏水果刀平时随便用用，一番折腾和试用，发现原来是把斩仙刀，可以好好整整推一推。 6 | 7 | ## 关于QCSS 8 | 9 | QCSS是Quick CSS的缩写，寓意是CSS书写快步如飞！ 10 | 11 | 平常我们写CSS是这样： 12 | ```CSS 13 | .class-a { 14 | width: 300px; 15 | height: 150px; 16 | position: absolute; 17 | left: 100px; 18 | top: 100px; 19 | } 20 | ``` 21 | 22 | 如果QCSS书写，则是： 23 | 24 | ```CSS 25 | .class-a { 26 | w300; h150; abs; l100; t100; 27 | } 28 | ``` 29 | 30 | 少写了好多代码，感觉自己又年轻了许多。 31 | 32 | 下面视频为QCSS编译为CSS的录屏，实际上书写的时候是一次保存，全部编译，视频为了演示，每写一句编译了一次。 33 | 34 | 35 | 36 | QCSS本质上也是个预编译工具，和Less，Stylus工具相比，更专注于CSS快速书写能力，嵌套，函数全部都不支持，但支持自定义变量。 37 | 38 | 更专注意味着更简单，更高效，同时在书写这一块更极致。 39 | 40 | 简单高效：基于映射规则的字符替换，无任何依赖，仅几K JS大小，移植到web上几乎无成本；
41 | 书写极致：可以自定义属性缩写，还可以自定义属性值缩写，甚至还可以自定义多个CSS声明片段缩写。仅需要分号分隔，px单位默认可缺省。 42 | 43 | ## 如何使用QCSS？ 44 | 45 | ### 1. 纯node.js使用 46 | 47 | 项目根目录下的node-qcss.js中有两个变量，为pathSrcQcss和pathDistQcss，分别对应QCSS文件目录和编译出来的CSS文件所在目录。 48 | 49 | 50 | 51 | 只要配置这两个路径为你所需要的路径。然后，直接下面这一句就可以使用了： 52 | 53 | ```JavaScript 54 | node node-qcss 55 | ``` 56 | 57 | 直接node-qcss.js这个JS就可以了，可以在任意目录位置，运行后，自动QCSS编译并开启资源监控，非常轻便轻量。 58 | 59 | 默认node-qcss.js会在同目录下寻找qcss-web这个模块，如果没有，就会直接在线拉取最新的qcss-map和qcss-web这两个模块（只会执行一次）。 60 | 61 | 因此，实际开发只需要： 62 | 1. node-qcss.js放在合适位置； 63 | 2. 配置其中pathSrcQcss和pathDistQcss的路径值； 64 | 3. node node-qcss运行； 65 | 66 | 就完成啦，非常简单轻便！ 67 | 68 | ### 2. gulp插件使用 69 | 70 | gulp插件核心代码为根目录下的index.js 71 | 72 | 实际使用，步骤如下： 73 | 1. 按照gulp-qcss插件： 74 | ```JavaScript 75 | npm install gulp-qcss 76 | ``` 77 | 2. 注册任务： 78 | ```JavaScript 79 | var gulp = require('gulp'); 80 | var qcss = require('gulp-qcss'); 81 | // gulp任务 82 | gulp.task('default', function () { 83 | gulp.src('src/test.qcss') 84 |       .pipe(qcss())   // 或者.pipe(qcss('sass')) 如果有需要的话，默认是.css后缀 85 | .pipe(gulp.dest('dist/')); 86 | }); 87 | ``` 88 | 然后就可以啦！具体可以参见/test/目录中的测试兼演示。 89 | 90 | ### 3. web中使用 91 | 92 | 主要是项目根目录下的qcss-web.js。默认为模块化加载： 93 | ```JavaScript 94 | module.exports = function (data) { 95 | 96 | } 97 | ``` 98 | 99 | 如果希望直连，可以改造下： 100 | 101 | ```JavaScript 102 | var qcss2css = function (data) { 103 | 104 | } 105 | ``` 106 | 其中data指QCSS字符内容，返回的是编译后的CSS字符内容。 107 | 108 | 如果直连，则依赖的qcss-map.js也要内联到qcss-web.js中。 109 | 110 | ### 4. postcss使用 111 | 本质上Qcss是个解析器，因此，无法作为postcss插件使用。使用示意： 112 | 113 | ```js 114 | let qcss = require('../qcss-web.js'); 115 | const postcss = require('postcss'); 116 | const fs = require('fs') 117 | 118 | let parse = (css, opts = {}) => { 119 | return postcss.parse(qcss(css), opts); 120 | } 121 | 122 | fs.readFile(__dirname + '/src/test.qcss', 'utf-8', (err, css) => { 123 | postcss([{ 124 | postcssPlugin: 'postcss-qcss' 125 | }]).process(css, { 126 | from: __dirname + '/src/test.qcss', 127 | to: __dirname + '/dest/test.css', 128 | parser: parse 129 | }) 130 | .then(result => { 131 | fs.writeFile(__dirname + '/dest/test.css', result.css, (err) => { 132 | if (!err) { 133 | console.log('dest/test.css编译成功'); 134 | } 135 | }) 136 | }).catch(error => { 137 | console.error(error) 138 | }) 139 | }) 140 | ``` 141 | 142 | 详见 ./test-postcss-qcss/run.js 143 | 144 | 可以执行下面的命令体验： 145 | 146 | ```js 147 | npm install 148 | 149 | node test-postcss-qcss/run 150 | ``` 151 | 152 | ## QCSS实现的原理 153 | 154 | 本质上就是个正则替换。 155 | 156 | 我们对HTML字符进行转义的时候，会这么处理，一个映射对象，一个正则替换，如下： 157 | 158 | ```JavaScript 159 | var keyMap = { 160 | '<': '<', 161 | '>': '>', 162 | '&': '&' 163 | }; 164 | xxx.replace(/<|&|>/g, function(matchs) { 165 | return keyMap[matchs]; 166 | }); 167 | ``` 168 | 169 | QCSS的实现也是如此： 170 | 171 | ```JavaScript 172 | keyMap = { 173 | dn: 'display: none', 174 | db: 'display: block', 175 | m: 'margin: ', 176 | ml: 'margin-left: ', 177 | … 178 | }; 179 | css = qcss.replace(/* 替换细节 */); 180 | ``` 181 | 182 | ## QCSS的映射规则 183 | 184 | · QCSS支持CSS属性缩写替换，例如：width -> w 185 | · QCSS支持CSS声明缩写替换，例如：display: none -> dn 186 | · QCSS支持多个CSS声明替换，例如：text-overflow: ellipsis; white-space: nowrap; overflow: hidden -> ell 187 | 188 | 不仅如此，QCSS还支持属性值关键字的映射，例如：color: currentColor -> c cc，前面的c是color属性的缩写，后面的cc是currentColor关键字的缩写。 189 | 190 | 完整映射规则可参见：/qcss-map.js 191 | 192 | 内置的规则为自己多年缩写习惯，很多命名都是借鉴zxx.lib.css[https://github.com/zhangxinxu/zxx.lib.css] 由于不是粉色的（指人民币），不可能所有人都喜欢这样的命名规则，所以，建议可以根据自己的习惯和喜好进行修改，添加。 193 | 194 | ## QCSS的其他功能 195 | 196 | QCSS还支持自定义属性值变量，变量的声明是在注释中，变量名$开头，可以使用等号或冒号连接变量值，例如： 197 | 198 | ```CSS 199 | /* 200 | $blue = #00a050; 201 | $light = #eee; 202 | $font: 'Microsoft yahei'; 203 | */ 204 | ``` 205 | 206 | 会替换下面这个： 207 | ```CSS 208 | .class { bg light; ff font;} 209 | ``` 210 | 为下面这样： 211 | ```CSS 212 | .class { 213 | background: #eee; 214 | font-family: 'Microsoft yahei' 215 | } 216 | ``` 217 | 218 | ## QCSS衍生出的超高压缩比CSS压缩工具css2qcss 219 | 220 | 根据实际测试，QCSS文件比CSS文件体积可以小30%~50%（试选择器复杂度），很多人会表示，反正最后上线的都是CSS文件，哪怕你QCSS文件小80%也没有意义啊，其实不然。 221 | 222 | 由于Service Worker的存在，我们可以把QCSS直接注册在浏览器中，于是我们可以直接请求.qcss文件，节省流量传输。 223 | 224 | 为此，我特意写了个创新的CSS压缩工具，css2qcss.js，可以把目前的标准的CSS文件全部压缩成QCSS这种缩写形式，配合Service Worker，就可以让网站在CSS资源这块的传输小30%~50%，注意，这是相比压缩的CSS文件的数据，如果是开发版的CSS，则压缩率甚至可以到60%，比JavaScript主流压缩工具还要厉害。 225 | 226 | 该压缩工具核心方法见：/css2qcss.js，依赖映射模块/qcss-map.js和CSS压缩模块/mini/cssmin.js。 227 | 228 | 然后自己想要压缩文件的时候，读写文件即可，具体案例可参见：https://github.com/zhangxinxu/gulp-qcss/blob/master/mini/run.js 229 | 230 | 代码如下： 231 | 232 | ```JavaScript 233 | /** 234 | * 压缩测试的脚本 235 | */ 236 | const fs = require('fs'); 237 | const css2qcss = require('../css2qcss'); 238 | 239 | fs.readFile('./test/extra.css', 'utf8', (err, data) => { 240 | let length = data.length; 241 | //去除注释 242 | data = css2qcss(data); 243 | 244 | fs.writeFile('./test/extra.qcss', data, function () { 245 | console.log('extra.qcss压缩成功，尺寸减小了：' + 246 | Math.round(10000 * (length - data.length) / length) / 100 + 247 | '%'); 248 | }); 249 | }); 250 | ``` 251 | 252 | -------------------------------------------------------------------------------- /example/src/taobao-min-cl.qcss: -------------------------------------------------------------------------------- 1 | @charset "utf-8";body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{m0;p0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,simsun,sans-serif}h1,h2,h3,h4,h5,h6{f100%}address,cite,dfn,em,var{fs n}code,kbd,pre,samp{ff courier new,courier,monospace}small{f12px}ul,ol{list-style:none}a{tdn;c#3e3e3e}a:hover{tdl}sup{v text-top}sub{v text-bottom}legend{c#000}fieldset,img{bd0}button,input,select,textarea{f100%}table{border-collapse:collapse;border-spacing:0}body{bg white}.AA{l}.AB{r}.AC{dn}.AD{w100%;bdt1 s #f9f9f9;bdb1 s #d2d2d2;bg #fbfbfb;abs;l0;r0}.AE{lh4px;bdt2 s #f9f9f9;bg #f5f5f5;bdb4 s #f2f2f2;mt2}.AF{lh4px;bdt3 s #efefef;bg #ebebeb;bdb4 s #e8e8e8}#page{mla;mra}.AG{w950}.AH li,.AH li s,.AI li,.AI .AJ a,.AK .AL,.AM,.AN li,.AN li s,.AN li a:hover,.AN .AO span,.AP li,#product .AQ,#mall .AR h3 s,.AS li,.AT,.AU,.AV .AL,.AV .AQ,.AV .AL b,.AV .AQ b,.AW,.AW s,.AX a,#mall .AY,.AZ i,#category .AR h3 a,#category .AR,.BA li,.BB li,.BC a,.BD li,.BD,.BE .AR h3,#p4p .BF .BG strong,.BH li a{bgi url(../image/taobao.png);bgr no}#header{bg url(../image/taobao/top.jpg) no 0 65px}#nav{h25;lh25;rel}#nav a{c#404040}#nav a:hover{c#f60}.AH li{bgp-166 -320;pr8;pl24;l}.AH .BI{bgp -999em 0}.AH li s{w15;h12;f0;ml-15;abs;t6;poi}.AH .BI s{bgp-149 -352}.AH .BJ s{bgp-149 -326}.AH .BK s{bgp-149 -364}.AH .BL{pl8}.AH .BM s{bgp-149 -339}#logo{h68;pt18;f0}#search{w650;mt-55;pb25}.AI{h27;rel}.AI li{bgp0 -999em;lh26;l}.AI li a{db;c#153679;p1 17 0 18}.AI .AJ{bgp r -590;pr5}.AI .AJ a{bgp0 -590;b;f14}.BN{r;pt7;lh1.3}.BN a{c#153679}.AK{h34;mr56;mt-2;p7 0 0 5;bg white url(../image/taobao.png) rx 0 -549;bd 1 s #9EAAB6}.AK .AL{w5;h4;mt-8;mr-1;bgp-158 -190;f0;r;rel}.BO{db;h27;mr7;bds s;bdw1 0 1 1;bdc#585856 #585856 #B6B7B9;bg white;rel}.BO label{c#999;lh21;abs;l3;t3;tex}.BO input{w440;h15;lh15;p6 3 4;bd0}.AM{w135;h29;f16;b;c white;bgc#FB8502;bgp0 -296;bd0;abs;r0;t-1;poi}.BP{h1;ovh;bg#e5e5e5;m0 57 0 1;cl}#content{cl}.BQ{bdt3 s #E97507;z1}.BR{w100%;l}.BS{mr320}#product{w158;h335;m-2 a 0 -1;l}.BT{w147;h330;pt1;bd1 s #E56A02;rel}.AN{bdt1 s #FCD687}.AN li{h28;bgp0 -354;bgc#FBFCFC}.AN li a{db;lh27;pl37;rel;z1}.AN li a:hover{tdn;c#f60;bgp0 -410}.AN li.BU{h29;bgc#FEF2D8;bgp0 -325}.AN li.BU a{f14px;c#DA4901;lh28}.AN li.BU a:hover{bg none;tdl;c#f60}.AN li strong{fw n}.AN li.BU strong{b}.AN li s{w16;h16;abs;ml-27;t5}.AN li.BU s{w20;h20;ml-29;t4}.AN .AO strong,.AN .AO span{w78;h18;abs}.AN .AO strong{lh16;t5;poi}.AN .AO span{bgp0 -109;l0;t0}.AN .AO s{bgp-147 -113}.AN .BV s{bgp-127 -133}.AN .BW s{bgp-147 -133}.AN .BX s{bgp-119 -185}.AN .BY s{bgp-118 -153}.AN .BZ s{bgp-135 -185}.AN .CA s{bgp-151 -169}.AN .CB s{bgp-151 -153}.AN .CC s{bgp-119 -168}.AN .CD s{bgp-139 -203}.AN .CE s{bgp-135 -153}#product .CF{lh17;p0 10;bgc#F4F9FD;tr}#product .CF a{c#7E93A5}#product .CF a:hover{c#f60}#product .AQ{db;h4;f0;mt-4;bgp-163px -209px;rel}#product .CG{db;h331;w1;ml149;mt-331;bg#f7e5d2;bdl1 s #f5ddc3;bdr1 s #fcf6f0}.CH{ml158;pt6}.CI{bd1 s #B6D1E6;z1}.CI .CJ{bg#EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%}.CK{rel;h150;ovh}.CL{w100%;abs;t0;l0}.CL li{h150;ovh}.CL li img{w100%}.AP{h18;abs;b5;r5;pt2}.AP li{l;w16;h16;bgp-131px -114px;bgc#fcf2cf;bd1 s #f47500;c#d94b01;tc;lh16;ml3;poi;f11px}.AP li.CM{w18;h18;lh18;bgp-113px -114px;bgc#ff9415;mt-2;c#fff;b}#mall .AR{h20;bdl1 s #ccc;bdr1 s #ccc;p14 10 4 8}#mall .AR h3{c#B60F23;lh17;l;rel}#mall .AR h3 s{w131;h17;bgp0 -92px;abs;l0;t0;poi}.AS li{pl8;lh21;bgp-164px -408px}#mall .AS li{l;ml10}#mall .AS li a{c#9a0002}#mall .BF{h121;bd1 s #ccc;bdt0;p5 10 8;rel}#mall .AY{db;h70;mt-70;bgp0 -438px;bgr rx}.AT,.AU{w22;h34;o none;abs;b31}.AT{bgp-68px -185px;l3}.AU{bgp-90px -185px;r3}.AV .AL,.AV .AQ{db;h4;f0;rel}.AV .AL{mb-4;bgp-162px -264px}.AV .AQ{mt-4;bgp-162px -267px}.AV .AL b,.AV .AQ b{r;w4;h4}.AV .AL b{bgp-159px -264px}.AV .AQ b{bgp-159px -267px}.CN{rel;z1}.AW{h30;p1 0;bgr rx;bd1 s #DBDBDB}.AW s{w4;h4;f0;bgp-112px -215px;abs;t14}.CO{l9}.CP{r9}.AX{w408;h30;m0 a;ovh;rel}.AX ol{w1242;abs}.AX li{w414;ml-2;l;ovh}.AX a{pl2;bgp-165px -371px;l}.AX a img{w80;h30}.CQ{w414;h72;m0 a;pt14;rel;ovh}.CQ ol{w1248;abs}.CQ li{w416;l;f0;tc;ovh}.AZ i{dib;w11;h21;bgp-113px -132px}.AZ i.CR{mr4}#category{cl;pt10;z1}#category .AR{h28;lh28;bd1 s #CFDAE4;bgc#F5F9FB;bgp0 -31px;bgr rx;rel}#category .AR h3 a{db;w89;lh26;m1;f14px;c#F60;bgc#E6EFF6;bgp0 -145px;tc}.BA{abs;t0;l98;ovh}.BA li,.BB li{l;ml-1;p0 8;bgp-166px -340px}.BB li a,.BA li a{c#17387D}.BB{b;abs;r2;t0;ovh}#category .BF{bd1 s #CFDAE4;mt-1}.CS,.CT,.CU,.CV{h87}.CW,.CX{h60}.CY{h40}.CZ{h115}.DA{bdb1 d #ccc;ovh}.DA h4{w20;h100%;l;lh20;p0 4;bdr1 s #F4F8FB;f14px;tc;bg#F4F8FB}.CY h4{lh16}.DA h4 a,.DA h4 i{dib;vm;c#1A397C}.DA h4 i{h100%;w0}.DA ul{h100%;pl38;pt4}.DA ul li{w33.3%;h18;lh18;p3 0;m2 0 1;l;ovh}.DA ul h5{di;f14px;pr7}.DA ul span a{bdl1 s #B7D0E4;ml-1;p0 3}.DA ul span a:first-child{bdl0}.DA ul a{c#013DD9}.DA a:hover,.DA ul a.DB{c#f60}.DC{h84;pt12;tc;f0;cl}.DC a{dib;w33%;tc}.DC img{w190;h70;bd1 s #CBCCCE}.BQ .DD{w310;ml-310;pt6;l}#help .BF{h48;p5 0;bg#f4f8fb;bd1 s #CFDAE4}.BC a{w145;h42;m0 2 0 5;pt6;tc;c#DA4901;bgp0 -219px;l}.BC a strong{f14px}.BC a:hover{c#f60;tdn}.BC a s{db;lh15;c#E4A522;tdn}.BE .AL{bgp-162px -202px;ovh;zx1}.BE .AL b{bgp-159px -202px}.BE .AQ{bgp-162px -205px}.BE .AQ b{bgp-159px -205px}#announce{mt10;mb10}.BE .AR{bdl1 s #CFDAE4;bdr1 s #CFDAE4}.BD{h28;bgr rx;bgp0 -507px}.BD li{l;c#17387D;f14px;b;tc;lh26;bdt1 s #CFDAE4;bgr rx;bgp0 -31px}.BD.DE li{w25%}.BD li span{db;h100%;bdl1 s #fff;bdr1 s #B6D1E6;poi}.BD li s{dn}.BD .DF span{bdr0}.BD li a{c#17387D}.BD li.AJ{bgp0 999em;bdt1 s #EEA63A;bdb1 s white;rel}.BD li.AJ span{bdl none;pl1}.BD li.AJ s{db;w1;h24;bgc#E2E9EF;bdl1 s #F5F9FB;bdr1 s #B6D1E6;r;mt-24}.BD li.AJ.DF s{w0;l;border-left-color:#e2e9ef;border-right-color:#f5f9fb}.DD a:hover,.AS li .DB,.DG a:hover{c#f60}#announce .BF{h51;bd1 s #CFDAE4;mt-1}#announce .DH{p5 0 0 10}.DI li{h21;w47.2%;l;ovh}#recom .BF{bd1 s #CFDAE4;mt-1}#recom .DH{h200;p10 0 0}.BD.DJ li{w35%}.BD.DJ .DF{w30%}.DK .DL{h100;w33.2%;l;tc}.DK .DM img{w70;h70;bd1 s #D0DAE4}.DK .DN{h18;lh18;ovh}#info{m10 a}#info .BF{h349;bd1 s #CFDAE4;mt-1}.DO{p7 10 0}.DP{h15;lh15;p5 0;bg#F4F8FB;ovh}.DP li{bdl1 s #ccc;ml-1;p0 6 0 10;l}.DP li a{c#17387D}.DO h4{m7 0;fw n;f14px}.DO h4 strong{b;c#f60}#info .DQ{pl87}.DR{w82;ml-87;abs}.DR .DN{db;lh25;tc;bg#F4F8FB}.DR img{db;w80;h80;bd1 s #ccc}#info .DS{h36;lh18;mt8;ovh}.DO .DS{mb12}#info .DS li{c#cbcbcb;l;w33%;tc}#info .DS li a{dib}#info .DT li{w20%}#info .DI{mt-4}#expressway .BF{h121;bd1 s #CFDAE4;mt-1}.DU{p10 0 0 20;ff simsun}.DU li{p0 0 5}.DU .DV{pl48}.DU .DV a{db;w89;h20;ti-2000;ovh;bg url(../image/taobao/a_btn.png)}.DW{w80%;tr;mt-40}.DW a{c#36C;tdl}.DX{p5;mt10;bg#EBF5FA}.DG{ml1;cl;pt10}#p4p .AR h3{h28;lh28;pl10;bgp0 -31px;bgr rx;bdt1 s #CFDAE4;f14px}#p4p .BF{bd1 s #CFDAE4;p10 0}#p4p .DK{h160;pl5}#p4p .DK li{w12.4%;l}#p4p .BF .DM{f0;tc}#p4p .BF .DM img{w100;h100;bd1 s #ccc}#p4p .BF .DN{w100;h32;lh16;m0 a;ovh}#p4p .BF .BG{w100;m0 a}#p4p .BF .BG strong{pl16;c#F50;f14px;bgp-155px -219px}.DY{h90;p5 11px;m10 0;bg#EBF5FA}.DZ .AL{bgp-162px -195px}.DZ .AL b{bgp-159px -195px}.DZ .AQ{bgp-162px -198px}.DZ .AQ b{bgp-159px -198px}.DZ .BF{h133;bd1 s #FBD686;p5;bgc#FFF8E8}.BH{h122;pt8;bd1 s #FFF3D9;bgc white;l}.EA,.EB,.EC{w20%}.ED{w37.5%;m0 .5%}.EC{ml.5%}.BH h4{mb6;f16;tc;c#17387D;lh22}.BH ul{pl44}.BH li a{db;lh22;pl15;bgp-162 -281;z1}.ED ul{pl67;ovh;z1}.ED li{w49.5%;l}.EE{p35 0;lh20;tc;c#333}.EE a{c#34538b;tdl} -------------------------------------------------------------------------------- /example/src/taobao-min.qcss: -------------------------------------------------------------------------------- 1 | @charset "utf-8";body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{m0;p0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,simsun,sans-serif}h1,h2,h3,h4,h5,h6{f100%}address,cite,dfn,em,var{fs n}code,kbd,pre,samp{ff courier new,courier,monospace}small{f12px}ul,ol{list-style:none}a{tdn;c#3e3e3e}a:hover{tdl}sup{v text-top}sub{v text-bottom}legend{c#000}fieldset,img{bd0}button,input,select,textarea{f100%}table{border-collapse:collapse;border-spacing:0}body{bg white}.l{l}.r{r}.dn{dn}.g1{w100%;bdt1 s #f9f9f9;bdb1 s #d2d2d2;bg #fbfbfb;abs;l0;r0}.g2{lh4px;bdt2 s #f9f9f9;bg #f5f5f5;bdb4 s #f2f2f2;mt2}.g3{lh4px;bdt3 s #efefef;bg #ebebeb;bdb4 s #e8e8e8}#page{mla;mra}.p_w{w950}.quick_link li,.quick_link li s,.search_tablist li,.search_tablist .selected a,.search_panel .rc_tp,.search_btn,.product_list li,.product_list li s,.product_list li a:hover,.product_list .t_mall span,.tb_slide_triggers li,#product .rc_bt,#mall .hd h3 s,.info_list li,.mall_prev,.mall_next,.box .rc_tp,.box .rc_bt,.box .rc_tp b,.box .rc_bt b,.mall_brands_bd,.mall_brands_bd s,.mall_brands_content a,#mall .bt_bg,.ks_switchable_content i,#category .hd h3 a,#category .hd,.category_links li,.category_chn li,.help_guest a,.tab_holder li,.tab_holder,.box_skin_blue .hd h3,#p4p .bd .price strong,.links_panel li a{bgi url(../image/taobao.png);bgr no}#header{bg url(../image/taobao/top.jpg) no 0 65px}#nav{h25;lh25;rel}#nav a{c#404040}#nav a:hover{c#f60}.quick_link li{bgp-166 -320;pr8;pl24;l}.quick_link .mytaobao{bgp -999em 0}.quick_link li s{w15;h12;f0;ml-15;abs;t6;poi}.quick_link .mytaobao s{bgp-149 -352}.quick_link .cart s{bgp-149 -326}.quick_link .favorite s{bgp-149 -364}.quick_link .forum{pl8}.quick_link .help s{bgp-149 -339}#logo{h68;pt18;f0}#search{w650;mt-55;pb25}.search_tablist{h27;rel}.search_tablist li{bgp0 -999em;lh26;l}.search_tablist li a{db;c#153679;p1 17 0 18}.search_tablist .selected{bgp r -590;pr5}.search_tablist .selected a{bgp0 -590;b;f14}.search_options{r;pt7;lh1.3}.search_options a{c#153679}.search_panel{h34;mr56;mt-2;p7 0 0 5;bg white url(../image/taobao.png) rx 0 -549;bd 1 s #9EAAB6}.search_panel .rc_tp{w5;h4;mt-8;mr-1;bgp-158 -190;f0;r;rel}.search_box{db;h27;mr7;bds s;bdw1 0 1 1;bdc#585856 #585856 #B6B7B9;bg white;rel}.search_box label{c#999;lh21;abs;l3;t3;tex}.search_box input{w440;h15;lh15;p6 3 4;bd0}.search_btn{w135;h29;f16;b;c white;bgc#FB8502;bgp0 -296;bd0;abs;r0;t-1;poi}.bt_shadow{h1;ovh;bg#e5e5e5;m0 57 0 1;cl}#content{cl}.grid_ms{bdt3 s #E97507;z1}.col_mail{w100%;l}.main_wrap{mr320}#product{w158;h335;m-2 a 0 -1;l}.mege_menu{w147;h330;pt1;bd1 s #E56A02;rel}.product_list{bdt1 s #FCD687}.product_list li{h28;bgp0 -354;bgc#FBFCFC}.product_list li a{db;lh27;pl37;rel;z1}.product_list li a:hover{tdn;c#f60;bgp0 -410}.product_list li.s{h29;bgc#FEF2D8;bgp0 -325}.product_list li.s a{f14px;c#DA4901;lh28}.product_list li.s a:hover{bg none;tdl;c#f60}.product_list li strong{fw n}.product_list li.s strong{b}.product_list li s{w16;h16;abs;ml-27;t5}.product_list li.s s{w20;h20;ml-29;t4}.product_list .t_mall strong,.product_list .t_mall span{w78;h18;abs}.product_list .t_mall strong{lh16;t5;poi}.product_list .t_mall span{bgp0 -109;l0;t0}.product_list .t_mall s{bgp-147 -113}.product_list .t_3c s{bgp-127 -133}.product_list .t_news s{bgp-147 -133}.product_list .t_digi s{bgp-119 -185}.product_list .t_jipiao s{bgp-118 -153}.product_list .t_caipiao s{bgp-135 -185}.product_list .t_jianghu s{bgp-151 -169}.product_list .t_shiyi s{bgp-151 -153}.product_list .t_garden s{bgp-119 -168}.product_list .t_wangwang s{bgp-139 -203}.product_list .t_wap s{bgp-135 -153}#product .more{lh17;p0 10;bgc#F4F9FD;tr}#product .more a{c#7E93A5}#product .more a:hover{c#f60}#product .rc_bt{db;h4;f0;mt-4;bgp-163px -209px;rel}#product .r_shadow{db;h331;w1;ml149;mt-331;bg#f7e5d2;bdl1 s #f5ddc3;bdr1 s #fcf6f0}.box_animate{ml158;pt6}.box_skin_naked{bd1 s #B6D1E6;z1}.box_skin_naked .loading{bg#EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%}.tb_slide{rel;h150;ovh}.tb_slide_list{w100%;abs;t0;l0}.tb_slide_list li{h150;ovh}.tb_slide_list li img{w100%}.tb_slide_triggers{h18;abs;b5;r5;pt2}.tb_slide_triggers li{l;w16;h16;bgp-131px -114px;bgc#fcf2cf;bd1 s #f47500;c#d94b01;tc;lh16;ml3;poi;f11px}.tb_slide_triggers li.current{w18;h18;lh18;bgp-113px -114px;bgc#ff9415;mt-2;c#fff;b}#mall .hd{h20;bdl1 s #ccc;bdr1 s #ccc;p14 10 4 8}#mall .hd h3{c#B60F23;lh17;l;rel}#mall .hd h3 s{w131;h17;bgp0 -92px;abs;l0;t0;poi}.info_list li{pl8;lh21;bgp-164px -408px}#mall .info_list li{l;ml10}#mall .info_list li a{c#9a0002}#mall .bd{h121;bd1 s #ccc;bdt0;p5 10 8;rel}#mall .bt_bg{db;h70;mt-70;bgp0 -438px;bgr rx}.mall_prev,.mall_next{w22;h34;o none;abs;b31}.mall_prev{bgp-68px -185px;l3}.mall_next{bgp-90px -185px;r3}.box .rc_tp,.box .rc_bt{db;h4;f0;rel}.box .rc_tp{mb-4;bgp-162px -264px}.box .rc_bt{mt-4;bgp-162px -267px}.box .rc_tp b,.box .rc_bt b{r;w4;h4}.box .rc_tp b{bgp-159px -264px}.box .rc_bt b{bgp-159px -267px}.mall_brands{rel;z1}.mall_brands_bd{h30;p1 0;bgr rx;bd1 s #DBDBDB}.mall_brands_bd s{w4;h4;f0;bgp-112px -215px;abs;t14}.mall_brands_prev{l9}.mall_brands_next{r9}.mall_brands_content{w408;h30;m0 a;ovh;rel}.mall_brands_content ol{w1242;abs}.mall_brands_content li{w414;ml-2;l;ovh}.mall_brands_content a{pl2;bgp-165px -371px;l}.mall_brands_content a img{w80;h30}.mall_content{w414;h72;m0 a;pt14;rel;ovh}.mall_content ol{w1248;abs}.mall_content li{w416;l;f0;tc;ovh}.ks_switchable_content i{dib;w11;h21;bgp-113px -132px}.ks_switchable_content i.m{mr4}#category{cl;pt10;z1}#category .hd{h28;lh28;bd1 s #CFDAE4;bgc#F5F9FB;bgp0 -31px;bgr rx;rel}#category .hd h3 a{db;w89;lh26;m1;f14px;c#F60;bgc#E6EFF6;bgp0 -145px;tc}.category_links{abs;t0;l98;ovh}.category_links li,.category_chn li{l;ml-1;p0 8;bgp-166px -340px}.category_chn li a,.category_links li a{c#17387D}.category_chn{b;abs;r2;t0;ovh}#category .bd{bd1 s #CFDAE4;mt-1}.category_item_fashion,.category_item_life,.category_item_sport,.category_item_other{h87}.category_item_decoration,.category_item_virtual{h60}.category_item_single{h40}.category_item_digital{h115}.category_item{bdb1 d #ccc;ovh}.category_item h4{w20;h100%;l;lh20;p0 4;bdr1 s #F4F8FB;f14px;tc;bg#F4F8FB}.category_item_single h4{lh16}.category_item h4 a,.category_item h4 i{dib;vm;c#1A397C}.category_item h4 i{h100%;w0}.category_item ul{h100%;pl38;pt4}.category_item ul li{w33.3%;h18;lh18;p3 0;m2 0 1;l;ovh}.category_item ul h5{di;f14px;pr7}.category_item ul span a{bdl1 s #B7D0E4;ml-1;p0 3}.category_item ul span a:first-child{bdl0}.category_item ul a{c#013DD9}.category_item a:hover,.category_item ul a.h{c#f60}.category_ad{h84;pt12;tc;f0;cl}.category_ad a{dib;w33%;tc}.category_ad img{w190;h70;bd1 s #CBCCCE}.grid_ms .col_sub{w310;ml-310;pt6;l}#help .bd{h48;p5 0;bg#f4f8fb;bd1 s #CFDAE4}.help_guest a{w145;h42;m0 2 0 5;pt6;tc;c#DA4901;bgp0 -219px;l}.help_guest a strong{f14px}.help_guest a:hover{c#f60;tdn}.help_guest a s{db;lh15;c#E4A522;tdn}.box_skin_blue .rc_tp{bgp-162px -202px;ovh;zx1}.box_skin_blue .rc_tp b{bgp-159px -202px}.box_skin_blue .rc_bt{bgp-162px -205px}.box_skin_blue .rc_bt b{bgp-159px -205px}#announce{mt10;mb10}.box_skin_blue .hd{bdl1 s #CFDAE4;bdr1 s #CFDAE4}.tab_holder{h28;bgr rx;bgp0 -507px}.tab_holder li{l;c#17387D;f14px;b;tc;lh26;bdt1 s #CFDAE4;bgr rx;bgp0 -31px}.tab_holder.forth li{w25%}.tab_holder li span{db;h100%;bdl1 s #fff;bdr1 s #B6D1E6;poi}.tab_holder li s{dn}.tab_holder .tab_holder_cw span{bdr0}.tab_holder li a{c#17387D}.tab_holder li.selected{bgp0 999em;bdt1 s #EEA63A;bdb1 s white;rel}.tab_holder li.selected span{bdl none;pl1}.tab_holder li.selected s{db;w1;h24;bgc#E2E9EF;bdl1 s #F5F9FB;bdr1 s #B6D1E6;r;mt-24}.tab_holder li.selected.tab_holder_cw s{w0;l;border-left-color:#e2e9ef;border-right-color:#f5f9fb}.col_sub a:hover,.info_list li .h,.grid_m a:hover{c#f60}#announce .bd{h51;bd1 s #CFDAE4;mt-1}#announce .tab_panel{p5 0 0 10}.info_list_half li{h21;w47.2%;l;ovh}#recom .bd{bd1 s #CFDAE4;mt-1}#recom .tab_panel{h200;p10 0 0}.tab_holder.third li{w35%}.tab_holder.third .tab_holder_cw{w30%}.item_list .item{h100;w33.2%;l;tc}.item_list .pic img{w70;h70;bd1 s #D0DAE4}.item_list .desc{h18;lh18;ovh}#info{m10 a}#info .bd{h349;bd1 s #CFDAE4;mt-1}.tab_panel_news{p7 10 0}.info_chn_list{h15;lh15;p5 0;bg#F4F8FB;ovh}.info_chn_list li{bdl1 s #ccc;ml-1;p0 6 0 10;l}.info_chn_list li a{c#17387D}.tab_panel_news h4{m7 0;fw n;f14px}.tab_panel_news h4 strong{b;c#f60}#info .tab_panel_bd{pl87}.pic_news{w82;ml-87;abs}.pic_news .desc{db;lh25;tc;bg#F4F8FB}.pic_news img{db;w80;h80;bd1 s #ccc}#info .word_list{h36;lh18;mt8;ovh}.tab_panel_news .word_list{mb12}#info .word_list li{c#cbcbcb;l;w33%;tc}#info .word_list li a{dib}#info .word_list_s li{w20%}#info .info_list_half{mt-4}#expressway .bd{h121;bd1 s #CFDAE4;mt-1}.exp_list{p10 0 0 20;ff simsun}.exp_list li{p0 0 5}.exp_list .with_btn{pl48}.exp_list .with_btn a{db;w89;h20;ti-2000;ovh;bg url(../image/taobao/a_btn.png)}.exp_more{w80%;tr;mt-40}.exp_more a{c#36C;tdl}.fpad_sub{p5;mt10;bg#EBF5FA}.grid_m{ml1;cl;pt10}#p4p .hd h3{h28;lh28;pl10;bgp0 -31px;bgr rx;bdt1 s #CFDAE4;f14px}#p4p .bd{bd1 s #CFDAE4;p10 0}#p4p .item_list{h160;pl5}#p4p .item_list li{w12.4%;l}#p4p .bd .pic{f0;tc}#p4p .bd .pic img{w100;h100;bd1 s #ccc}#p4p .bd .desc{w100;h32;lh16;m0 a;ovh}#p4p .bd .price{w100;m0 a}#p4p .bd .price strong{pl16;c#F50;f14px;bgp-155px -219px}.fpad_banner{h90;p5 11px;m10 0;bg#EBF5FA}.box_skin_orange .rc_tp{bgp-162px -195px}.box_skin_orange .rc_tp b{bgp-159px -195px}.box_skin_orange .rc_bt{bgp-162px -198px}.box_skin_orange .rc_bt b{bgp-159px -198px}.box_skin_orange .bd{h133;bd1 s #FBD686;p5;bgc#FFF8E8}.links_panel{h122;pt8;bd1 s #FFF3D9;bgc white;l}.links_panel_safe,.links_panel_payment,.links_panel_service{w20%}.links_panel_guard{w37.5%;m0 .5%}.links_panel_service{ml.5%}.links_panel h4{mb6;f16;tc;c#17387D;lh22}.links_panel ul{pl44}.links_panel li a{db;lh22;pl15;bgp-162 -281;z1}.links_panel_guard ul{pl67;ovh;z1}.links_panel_guard li{w49.5%;l}.zxx_footer{p35 0;lh20;tc;c#333}.zxx_footer a{c#34538b;tdl} -------------------------------------------------------------------------------- /example/dist/css/taobao-min-cl.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,simsun,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new, courier, monospace}small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#3e3e3e}a:hover{text-decoration:underline}sup{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}body{background:white}.AA{float:left}.AB{float:right}.AC{display:none}.AD{width:100%;border-top:1px solid #f9f9f9;border-bottom:1px solid #d2d2d2;background:#fbfbfb;position:absolute;left:0;right:0}.AE{line-height:4px;border-top:2px solid #f9f9f9;background:#f5f5f5;border-bottom:4px solid #f2f2f2;margin-top:2px}.AF{line-height:4px;border-top:3px solid #efefef;background:#ebebeb;border-bottom:4px solid #e8e8e8}#page{margin-left:auto;margin-right:auto}.AG{width:950px}.AH li,.AH li s,.AI li,.AI .AJ a,.AK .AL,.AM,.AN li,.AN li s,.AN li a:hover,.AN .AO span,.AP li,#product .AQ,#mall .AR h3 s,.AS li,.AT,.AU,.AV .AL,.AV .AQ,.AV .AL b,.AV .AQ b,.AW,.AW s,.AX a,#mall .AY,.AZ i,#category .AR h3 a,#category .AR,.BA li,.BB li,.BC a,.BD li,.BD,.BE .AR h3,#p4p .BF .BG strong,.BH li a{background-image:url(../image/taobao.png);background-repeat:no-repeat}#header{background:url(../image/taobao/top.jpg) no-repeat 0 65px}#nav{height:25px;line-height:25px;position:relative}#nav a{color:#404040}#nav a:hover{color:#f60}.AH li{background-position:-166px -320px;padding-right:8px;padding-left:24px;float:left}.AH .BI{background-position:-999em 0}.AH li s{width:15px;height:12px;font-size:0;margin-left:-15px;position:absolute;top:6px;cursor:pointer}.AH .BI s{background-position:-149px -352px}.AH .BJ s{background-position:-149px -326px}.AH .BK s{background-position:-149px -364px}.AH .BL{padding-left:8px}.AH .BM s{background-position:-149px -339px}#logo{height:68px;padding-top:18px;font-size:0}#search{width:650px;margin-top:-55px;padding-bottom:25px}.AI{height:27px;position:relative}.AI li{background-position:0 -999em;line-height:26px;float:left}.AI li a{display:block;color:#153679;padding:1px 17px 0 18px}.AI .AJ{background-position:right -590px;padding-right:5px}.AI .AJ a{background-position:0 -590px;font-weight:bold;font-size:14px}.BN{float:right;padding-top:7px;line-height:1.3}.BN a{color:#153679}.AK{height:34px;margin-right:56px;margin-top:-2px;padding:7px 0 0 5px;background:white url(../image/taobao.png) repeat-x 0 -549px;border:1px solid #9EAAB6}.AK .AL{width:5px;height:4px;margin-top:-8px;margin-right:-1px;background-position:-158px -190px;font-size:0;float:right;position:relative}.BO{display:block;height:27px;margin-right:7px;border-style:solid;border-width:1px 0 1px 1px;border-color:#585856 #585856 #B6B7B9;background:white;position:relative}.BO label{color:#999;line-height:21px;position:absolute;left:3px;top:3px;cursor:text}.BO input{width:440px;height:15px;line-height:15px;padding:6px 3px 4px;border:0}.AM{width:135px;height:29px;font-size:16px;font-weight:bold;color:white;background-color:#FB8502;background-position:0 -296px;border:0;position:absolute;right:0;top:-1px;cursor:pointer}.BP{height:1px;overflow:hidden;background:#e5e5e5;margin:0 57px 0 1px;clear:both}#content{clear:both}.BQ{border-top:3px solid #E97507;zoom:1}.BR{width:100%;float:left}.BS{margin-right:320px}#product{width:158px;height:335px;margin:-2px auto 0 -1px;float:left}.BT{width:147px;height:330px;padding-top:1px;border:1px solid #E56A02;position:relative}.AN{border-top:1px solid #FCD687}.AN li{height:28px;background-position:0 -354px;background-color:#FBFCFC}.AN li a{display:block;line-height:27px;padding-left:37px;position:relative;zoom:1}.AN li a:hover{text-decoration:none;color:#f60;background-position:0 -410px}.AN li.BU{height:29px;background-color:#FEF2D8;background-position:0 -325px}.AN li.BU a{font-size:14px;color:#DA4901;line-height:28px}.AN li.BU a:hover{background:none;text-decoration:underline;color:#f60}.AN li strong{font-weight:normal}.AN li.BU strong{font-weight:bold}.AN li s{width:16px;height:16px;position:absolute;margin-left:-27px;top:5px}.AN li.BU s{width:20px;height:20px;margin-left:-29px;top:4px}.AN .AO strong,.AN .AO span{width:78px;height:18px;position:absolute}.AN .AO strong{line-height:16px;top:5px;cursor:pointer}.AN .AO span{background-position:0 -109px;left:0;top:0}.AN .AO s{background-position:-147px -113px}.AN .BV s{background-position:-127px -133px}.AN .BW s{background-position:-147px -133px}.AN .BX s{background-position:-119px -185px}.AN .BY s{background-position:-118px -153px}.AN .BZ s{background-position:-135px -185px}.AN .CA s{background-position:-151px -169px}.AN .CB s{background-position:-151px -153px}.AN .CC s{background-position:-119px -168px}.AN .CD s{background-position:-139px -203px}.AN .CE s{background-position:-135px -153px}#product .CF{line-height:17px;padding:0 10px;background-color:#F4F9FD;text-align:right}#product .CF a{color:#7E93A5}#product .CF a:hover{color:#f60}#product .AQ{display:block;height:4px;font-size:0;margin-top:-4px;background-position:-163px -209px;position:relative}#product .CG{display:block;height:331px;width:1px;margin-left:149px;margin-top:-331px;background:#f7e5d2;border-left:1px solid #f5ddc3;border-right:1px solid #fcf6f0}.CH{margin-left:158px;padding-top:6px}.CI{border:1px solid #B6D1E6;zoom:1}.CI .CJ{background:#EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%}.CK{position:relative;height:150px;overflow:hidden}.CL{width:100%;position:absolute;top:0;left:0}.CL li{height:150px;overflow:hidden}.CL li img{width:100%}.AP{height:18px;position:absolute;bottom:5px;right:5px;padding-top:2px}.AP li{float:left;width:16px;height:16px;background-position:-131px -114px;background-color:#fcf2cf;border:1px solid #f47500;color:#d94b01;text-align:center;line-height:16px;margin-left:3px;cursor:pointer;font-size:11px}.AP li.CM{width:18px;height:18px;line-height:18px;background-position:-113px -114px;background-color:#ff9415;margin-top:-2px;color:#fff;font-weight:bold}#mall .AR{height:20px;border-left:1px solid #ccc;border-right:1px solid #ccc;padding:14px 10px 4px 8px}#mall .AR h3{color:#B60F23;line-height:17px;float:left;position:relative}#mall .AR h3 s{width:131px;height:17px;background-position:0 -92px;position:absolute;left:0;top:0;cursor:pointer}.AS li{padding-left:8px;line-height:21px;background-position:-164px -408px}#mall .AS li{float:left;margin-left:10px}#mall .AS li a{color:#9a0002}#mall .BF{height:121px;border:1px solid #ccc;border-top:0;padding:5px 10px 8px;position:relative}#mall .AY{display:block;height:70px;margin-top:-70px;background-position:0 -438px;background-repeat:repeat-x}.AT,.AU{width:22px;height:34px;outline:none;position:absolute;bottom:31px}.AT{background-position:-68px -185px;left:3px}.AU{background-position:-90px -185px;right:3px}.AV .AL,.AV .AQ{display:block;height:4px;font-size:0;position:relative}.AV .AL{margin-bottom:-4px;background-position:-162px -264px}.AV .AQ{margin-top:-4px;background-position:-162px -267px}.AV .AL b,.AV .AQ b{float:right;width:4px;height:4px}.AV .AL b{background-position:-159px -264px}.AV .AQ b{background-position:-159px -267px}.CN{position:relative;zoom:1}.AW{height:30px;padding:1px 0;background-repeat:repeat-x;border:1px solid #DBDBDB}.AW s{width:4px;height:4px;font-size:0;background-position:-112px -215px;position:absolute;top:14px}.CO{left:9px}.CP{right:9px}.AX{width:408px;height:30px;margin:0 auto;overflow:hidden;position:relative}.AX ol{width:1242px;position:absolute}.AX li{width:414px;margin-left:-2px;float:left;overflow:hidden}.AX a{padding-left:2px;background-position:-165px -371px;float:left}.AX a img{width:80px;height:30px}.CQ{width:414px;height:72px;margin:0 auto;padding-top:14px;position:relative;overflow:hidden}.CQ ol{width:1248px;position:absolute}.CQ li{width:416px;float:left;font-size:0;text-align:center;overflow:hidden}.AZ i{display:inline-block;width:11px;height:21px;background-position:-113px -132px}.AZ i.CR{margin-right:4px}#category{clear:both;padding-top:10px;zoom:1}#category .AR{height:28px;line-height:28px;border:1px solid #CFDAE4;background-color:#F5F9FB;background-position:0 -31px;background-repeat:repeat-x;position:relative}#category .AR h3 a{display:block;width:89px;line-height:26px;margin:1px;font-size:14px;color:#F60;background-color:#E6EFF6;background-position:0 -145px;text-align:center}.BA{position:absolute;top:0;left:98px;overflow:hidden}.BA li,.BB li{float:left;margin-left:-1px;padding:0 8px;background-position:-166px -340px}.BB li a,.BA li a{color:#17387D}.BB{font-weight:bold;position:absolute;right:2px;top:0;overflow:hidden}#category .BF{border:1px solid #CFDAE4;margin-top:-1px}.CS,.CT,.CU,.CV{height:87px}.CW,.CX{height:60px}.CY{height:40px}.CZ{height:115px}.DA{border-bottom:1px dashed #ccc;overflow:hidden}.DA h4{width:20px;height:100%;float:left;line-height:20px;padding:0 4px;border-right:1px solid #F4F8FB;font-size:14px;text-align:center;background:#F4F8FB}.CY h4{line-height:16px}.DA h4 a,.DA h4 i{display:inline-block;vertical-align:middle;color:#1A397C}.DA h4 i{height:100%;width:0}.DA ul{height:100%;padding-left:38px;padding-top:4px}.DA ul li{width:33.3%;height:18px;line-height:18px;padding:3px 0;margin:2px 0 1px;float:left;overflow:hidden}.DA ul h5{display:inline;font-size:14px;padding-right:7px}.DA ul span a{border-left:1px solid #B7D0E4;margin-left:-1px;padding:0 3px}.DA ul span a:first-child{border-left:0}.DA ul a{color:#013DD9}.DA a:hover,.DA ul a.DB{color:#f60}.DC{height:84px;padding-top:12px;text-align:center;font-size:0;clear:both}.DC a{display:inline-block;width:33%;text-align:center}.DC img{width:190px;height:70px;border:1px solid #CBCCCE}.BQ .DD{width:310px;margin-left:-310px;padding-top:6px;float:left}#help .BF{height:48px;padding:5px 0;background:#f4f8fb;border:1px solid #CFDAE4}.BC a{width:145px;height:42px;margin:0 2px 0 5px;padding-top:6px;text-align:center;color:#DA4901;background-position:0 -219px;float:left}.BC a strong{font-size:14px}.BC a:hover{color:#f60;text-decoration:none}.BC a s{display:block;line-height:15px;color:#E4A522;text-decoration:none}.BE .AL{background-position:-162px -202px;overflow:hidden;z-index:1}.BE .AL b{background-position:-159px -202px}.BE .AQ{background-position:-162px -205px}.BE .AQ b{background-position:-159px -205px}#announce{margin-top:10px;margin-bottom:10px}.BE .AR{border-left:1px solid #CFDAE4;border-right:1px solid #CFDAE4}.BD{height:28px;background-repeat:repeat-x;background-position:0 -507px}.BD li{float:left;color:#17387D;font-size:14px;font-weight:bold;text-align:center;line-height:26px;border-top:1px solid #CFDAE4;background-repeat:repeat-x;background-position:0 -31px}.BD.DE li{width:25%}.BD li span{display:block;height:100%;border-left:1px solid #fff;border-right:1px solid #B6D1E6;cursor:pointer}.BD li s{display:none}.BD .DF span{border-right:0}.BD li a{color:#17387D}.BD li.AJ{background-position:0 999em;border-top:1px solid #EEA63A;border-bottom:1px solid white;position:relative}.BD li.AJ span{border-left:none;padding-left:1px}.BD li.AJ s{display:block;width:1px;height:24px;background-color:#E2E9EF;border-left:1px solid #F5F9FB;border-right:1px solid #B6D1E6;float:right;margin-top:-24px}.BD li.AJ.DF s{width:0;float:left;border-left-color:#e2e9ef;border-right-color:#f5f9fb}.DD a:hover,.AS li .DB,.DG a:hover{color:#f60}#announce .BF{height:51px;border:1px solid #CFDAE4;margin-top:-1px}#announce .DH{padding:5px 0 0 10px}.DI li{height:21px;width:47.2%;float:left;overflow:hidden}#recom .BF{border:1px solid #CFDAE4;margin-top:-1px}#recom .DH{height:200px;padding:10px 0 0}.BD.DJ li{width:35%}.BD.DJ .DF{width:30%}.DK .DL{height:100px;width:33.2%;float:left;text-align:center}.DK .DM img{width:70px;height:70px;border:1px solid #D0DAE4}.DK .DN{height:18px;line-height:18px;overflow:hidden}#info{margin:10px auto}#info .BF{height:349px;border:1px solid #CFDAE4;margin-top:-1px}.DO{padding:7px 10px 0}.DP{height:15px;line-height:15px;padding:5px 0;background:#F4F8FB;overflow:hidden}.DP li{border-left:1px solid #ccc;margin-left:-1px;padding:0 6px 0 10px;float:left}.DP li a{color:#17387D}.DO h4{margin:7px 0;font-weight:normal;font-size:14px}.DO h4 strong{font-weight:bold;color:#f60}#info .DQ{padding-left:87px}.DR{width:82px;margin-left:-87px;position:absolute}.DR .DN{display:block;line-height:25px;text-align:center;background:#F4F8FB}.DR img{display:block;width:80px;height:80px;border:1px solid #ccc}#info .DS{height:36px;line-height:18px;margin-top:8px;overflow:hidden}.DO .DS{margin-bottom:12px}#info .DS li{color:#cbcbcb;float:left;width:33%;text-align:center}#info .DS li a{display:inline-block}#info .DT li{width:20%}#info .DI{margin-top:-4px}#expressway .BF{height:121px;border:1px solid #CFDAE4;margin-top:-1px}.DU{padding:10px 0 0 20px;font-family:simsun}.DU li{padding:0 0 5px}.DU .DV{padding-left:48px}.DU .DV a{display:block;width:89px;height:20px;text-indent:-2000px;overflow:hidden;background:url(../image/taobao/a_btn.png)}.DW{width:80%;text-align:right;margin-top:-40px}.DW a{color:#36C;text-decoration:underline}.DX{padding:5px;margin-top:10px;background:#EBF5FA}.DG{margin-left:1px;clear:both;padding-top:10px}#p4p .AR h3{height:28px;line-height:28px;padding-left:10px;background-position:0 -31px;background-repeat:repeat-x;border-top:1px solid #CFDAE4;font-size:14px}#p4p .BF{border:1px solid #CFDAE4;padding:10px 0}#p4p .DK{height:160px;padding-left:5px}#p4p .DK li{width:12.4%;float:left}#p4p .BF .DM{font-size:0;text-align:center}#p4p .BF .DM img{width:100px;height:100px;border:1px solid #ccc}#p4p .BF .DN{width:100px;height:32px;line-height:16px;margin:0 auto;overflow:hidden}#p4p .BF .BG{width:100px;margin:0 auto}#p4p .BF .BG strong{padding-left:16px;color:#F50;font-size:14px;background-position:-155px -219px}.DY{height:90px;padding:5px 11px;margin:10px 0;background:#EBF5FA}.DZ .AL{background-position:-162px -195px}.DZ .AL b{background-position:-159px -195px}.DZ .AQ{background-position:-162px -198px}.DZ .AQ b{background-position:-159px -198px}.DZ .BF{height:133px;border:1px solid #FBD686;padding:5px;background-color:#FFF8E8}.BH{height:122px;padding-top:8px;border:1px solid #FFF3D9;background-color:white;float:left}.EA,.EB,.EC{width:20%}.ED{width:37.5%;margin:0 .5%}.EC{margin-left:.5%}.BH h4{margin-bottom:6px;font-size:16px;text-align:center;color:#17387D;line-height:22px}.BH ul{padding-left:44px}.BH li a{display:block;line-height:22px;padding-left:15px;background-position:-162px -281px;zoom:1}.ED ul{padding-left:67px;overflow:hidden;zoom:1}.ED li{width:49.5%;float:left}.EE{padding:35px 0;line-height:20px;text-align:center;color:#333}.EE a{color:#34538b;text-decoration:underline} -------------------------------------------------------------------------------- /example/dist/css/taobao-min.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8";body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,simsun,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new, courier, monospace}small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#3e3e3e}a:hover{text-decoration:underline}sup{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}body{background:white}.l{float:left}.r{float:right}.dn{display:none}.g1{width:100%;border-top:1px solid #f9f9f9;border-bottom:1px solid #d2d2d2;background:#fbfbfb;position:absolute;left:0;right:0}.g2{line-height:4px;border-top:2px solid #f9f9f9;background:#f5f5f5;border-bottom:4px solid #f2f2f2;margin-top:2px}.g3{line-height:4px;border-top:3px solid #efefef;background:#ebebeb;border-bottom:4px solid #e8e8e8}#page{margin-left:auto;margin-right:auto}.p_w{width:950px}.quick_link li,.quick_link li s,.search_tablist li,.search_tablist .selected a,.search_panel .rc_tp,.search_btn,.product_list li,.product_list li s,.product_list li a:hover,.product_list .t_mall span,.tb_slide_triggers li,#product .rc_bt,#mall .hd h3 s,.info_list li,.mall_prev,.mall_next,.box .rc_tp,.box .rc_bt,.box .rc_tp b,.box .rc_bt b,.mall_brands_bd,.mall_brands_bd s,.mall_brands_content a,#mall .bt_bg,.ks_switchable_content i,#category .hd h3 a,#category .hd,.category_links li,.category_chn li,.help_guest a,.tab_holder li,.tab_holder,.box_skin_blue .hd h3,#p4p .bd .price strong,.links_panel li a{background-image:url(../image/taobao.png);background-repeat:no-repeat}#header{background:url(../image/taobao/top.jpg) no-repeat 0 65px}#nav{height:25px;line-height:25px;position:relative}#nav a{color:#404040}#nav a:hover{color:#f60}.quick_link li{background-position:-166px -320px;padding-right:8px;padding-left:24px;float:left}.quick_link .mytaobao{background-position:-999em 0}.quick_link li s{width:15px;height:12px;font-size:0;margin-left:-15px;position:absolute;top:6px;cursor:pointer}.quick_link .mytaobao s{background-position:-149px -352px}.quick_link .cart s{background-position:-149px -326px}.quick_link .favorite s{background-position:-149px -364px}.quick_link .forum{padding-left:8px}.quick_link .help s{background-position:-149px -339px}#logo{height:68px;padding-top:18px;font-size:0}#search{width:650px;margin-top:-55px;padding-bottom:25px}.search_tablist{height:27px;position:relative}.search_tablist li{background-position:0 -999em;line-height:26px;float:left}.search_tablist li a{display:block;color:#153679;padding:1px 17px 0 18px}.search_tablist .selected{background-position:right -590px;padding-right:5px}.search_tablist .selected a{background-position:0 -590px;font-weight:bold;font-size:14px}.search_options{float:right;padding-top:7px;line-height:1.3}.search_options a{color:#153679}.search_panel{height:34px;margin-right:56px;margin-top:-2px;padding:7px 0 0 5px;background:white url(../image/taobao.png) repeat-x 0 -549px;border:1px solid #9EAAB6}.search_panel .rc_tp{width:5px;height:4px;margin-top:-8px;margin-right:-1px;background-position:-158px -190px;font-size:0;float:right;position:relative}.search_box{display:block;height:27px;margin-right:7px;border-style:solid;border-width:1px 0 1px 1px;border-color:#585856 #585856 #B6B7B9;background:white;position:relative}.search_box label{color:#999;line-height:21px;position:absolute;left:3px;top:3px;cursor:text}.search_box input{width:440px;height:15px;line-height:15px;padding:6px 3px 4px;border:0}.search_btn{width:135px;height:29px;font-size:16px;font-weight:bold;color:white;background-color:#FB8502;background-position:0 -296px;border:0;position:absolute;right:0;top:-1px;cursor:pointer}.bt_shadow{height:1px;overflow:hidden;background:#e5e5e5;margin:0 57px 0 1px;clear:both}#content{clear:both}.grid_ms{border-top:3px solid #E97507;zoom:1}.col_mail{width:100%;float:left}.main_wrap{margin-right:320px}#product{width:158px;height:335px;margin:-2px auto 0 -1px;float:left}.mege_menu{width:147px;height:330px;padding-top:1px;border:1px solid #E56A02;position:relative}.product_list{border-top:1px solid #FCD687}.product_list li{height:28px;background-position:0 -354px;background-color:#FBFCFC}.product_list li a{display:block;line-height:27px;padding-left:37px;position:relative;zoom:1}.product_list li a:hover{text-decoration:none;color:#f60;background-position:0 -410px}.product_list li.s{height:29px;background-color:#FEF2D8;background-position:0 -325px}.product_list li.s a{font-size:14px;color:#DA4901;line-height:28px}.product_list li.s a:hover{background:none;text-decoration:underline;color:#f60}.product_list li strong{font-weight:normal}.product_list li.s strong{font-weight:bold}.product_list li s{width:16px;height:16px;position:absolute;margin-left:-27px;top:5px}.product_list li.s s{width:20px;height:20px;margin-left:-29px;top:4px}.product_list .t_mall strong,.product_list .t_mall span{width:78px;height:18px;position:absolute}.product_list .t_mall strong{line-height:16px;top:5px;cursor:pointer}.product_list .t_mall span{background-position:0 -109px;left:0;top:0}.product_list .t_mall s{background-position:-147px -113px}.product_list .t_3c s{background-position:-127px -133px}.product_list .t_news s{background-position:-147px -133px}.product_list .t_digi s{background-position:-119px -185px}.product_list .t_jipiao s{background-position:-118px -153px}.product_list .t_caipiao s{background-position:-135px -185px}.product_list .t_jianghu s{background-position:-151px -169px}.product_list .t_shiyi s{background-position:-151px -153px}.product_list .t_garden s{background-position:-119px -168px}.product_list .t_wangwang s{background-position:-139px -203px}.product_list .t_wap s{background-position:-135px -153px}#product .more{line-height:17px;padding:0 10px;background-color:#F4F9FD;text-align:right}#product .more a{color:#7E93A5}#product .more a:hover{color:#f60}#product .rc_bt{display:block;height:4px;font-size:0;margin-top:-4px;background-position:-163px -209px;position:relative}#product .r_shadow{display:block;height:331px;width:1px;margin-left:149px;margin-top:-331px;background:#f7e5d2;border-left:1px solid #f5ddc3;border-right:1px solid #fcf6f0}.box_animate{margin-left:158px;padding-top:6px}.box_skin_naked{border:1px solid #B6D1E6;zoom:1}.box_skin_naked .loading{background:#EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%}.tb_slide{position:relative;height:150px;overflow:hidden}.tb_slide_list{width:100%;position:absolute;top:0;left:0}.tb_slide_list li{height:150px;overflow:hidden}.tb_slide_list li img{width:100%}.tb_slide_triggers{height:18px;position:absolute;bottom:5px;right:5px;padding-top:2px}.tb_slide_triggers li{float:left;width:16px;height:16px;background-position:-131px -114px;background-color:#fcf2cf;border:1px solid #f47500;color:#d94b01;text-align:center;line-height:16px;margin-left:3px;cursor:pointer;font-size:11px}.tb_slide_triggers li.current{width:18px;height:18px;line-height:18px;background-position:-113px -114px;background-color:#ff9415;margin-top:-2px;color:#fff;font-weight:bold}#mall .hd{height:20px;border-left:1px solid #ccc;border-right:1px solid #ccc;padding:14px 10px 4px 8px}#mall .hd h3{color:#B60F23;line-height:17px;float:left;position:relative}#mall .hd h3 s{width:131px;height:17px;background-position:0 -92px;position:absolute;left:0;top:0;cursor:pointer}.info_list li{padding-left:8px;line-height:21px;background-position:-164px -408px}#mall .info_list li{float:left;margin-left:10px}#mall .info_list li a{color:#9a0002}#mall .bd{height:121px;border:1px solid #ccc;border-top:0;padding:5px 10px 8px;position:relative}#mall .bt_bg{display:block;height:70px;margin-top:-70px;background-position:0 -438px;background-repeat:repeat-x}.mall_prev,.mall_next{width:22px;height:34px;outline:none;position:absolute;bottom:31px}.mall_prev{background-position:-68px -185px;left:3px}.mall_next{background-position:-90px -185px;right:3px}.box .rc_tp,.box .rc_bt{display:block;height:4px;font-size:0;position:relative}.box .rc_tp{margin-bottom:-4px;background-position:-162px -264px}.box .rc_bt{margin-top:-4px;background-position:-162px -267px}.box .rc_tp b,.box .rc_bt b{float:right;width:4px;height:4px}.box .rc_tp b{background-position:-159px -264px}.box .rc_bt b{background-position:-159px -267px}.mall_brands{position:relative;zoom:1}.mall_brands_bd{height:30px;padding:1px 0;background-repeat:repeat-x;border:1px solid #DBDBDB}.mall_brands_bd s{width:4px;height:4px;font-size:0;background-position:-112px -215px;position:absolute;top:14px}.mall_brands_prev{left:9px}.mall_brands_next{right:9px}.mall_brands_content{width:408px;height:30px;margin:0 auto;overflow:hidden;position:relative}.mall_brands_content ol{width:1242px;position:absolute}.mall_brands_content li{width:414px;margin-left:-2px;float:left;overflow:hidden}.mall_brands_content a{padding-left:2px;background-position:-165px -371px;float:left}.mall_brands_content a img{width:80px;height:30px}.mall_content{width:414px;height:72px;margin:0 auto;padding-top:14px;position:relative;overflow:hidden}.mall_content ol{width:1248px;position:absolute}.mall_content li{width:416px;float:left;font-size:0;text-align:center;overflow:hidden}.ks_switchable_content i{display:inline-block;width:11px;height:21px;background-position:-113px -132px}.ks_switchable_content i.m{margin-right:4px}#category{clear:both;padding-top:10px;zoom:1}#category .hd{height:28px;line-height:28px;border:1px solid #CFDAE4;background-color:#F5F9FB;background-position:0 -31px;background-repeat:repeat-x;position:relative}#category .hd h3 a{display:block;width:89px;line-height:26px;margin:1px;font-size:14px;color:#F60;background-color:#E6EFF6;background-position:0 -145px;text-align:center}.category_links{position:absolute;top:0;left:98px;overflow:hidden}.category_links li,.category_chn li{float:left;margin-left:-1px;padding:0 8px;background-position:-166px -340px}.category_chn li a,.category_links li a{color:#17387D}.category_chn{font-weight:bold;position:absolute;right:2px;top:0;overflow:hidden}#category .bd{border:1px solid #CFDAE4;margin-top:-1px}.category_item_fashion,.category_item_life,.category_item_sport,.category_item_other{height:87px}.category_item_decoration,.category_item_virtual{height:60px}.category_item_single{height:40px}.category_item_digital{height:115px}.category_item{border-bottom:1px dashed #ccc;overflow:hidden}.category_item h4{width:20px;height:100%;float:left;line-height:20px;padding:0 4px;border-right:1px solid #F4F8FB;font-size:14px;text-align:center;background:#F4F8FB}.category_item_single h4{line-height:16px}.category_item h4 a,.category_item h4 i{display:inline-block;vertical-align:middle;color:#1A397C}.category_item h4 i{height:100%;width:0}.category_item ul{height:100%;padding-left:38px;padding-top:4px}.category_item ul li{width:33.3%;height:18px;line-height:18px;padding:3px 0;margin:2px 0 1px;float:left;overflow:hidden}.category_item ul h5{display:inline;font-size:14px;padding-right:7px}.category_item ul span a{border-left:1px solid #B7D0E4;margin-left:-1px;padding:0 3px}.category_item ul span a:first-child{border-left:0}.category_item ul a{color:#013DD9}.category_item a:hover,.category_item ul a.h{color:#f60}.category_ad{height:84px;padding-top:12px;text-align:center;font-size:0;clear:both}.category_ad a{display:inline-block;width:33%;text-align:center}.category_ad img{width:190px;height:70px;border:1px solid #CBCCCE}.grid_ms .col_sub{width:310px;margin-left:-310px;padding-top:6px;float:left}#help .bd{height:48px;padding:5px 0;background:#f4f8fb;border:1px solid #CFDAE4}.help_guest a{width:145px;height:42px;margin:0 2px 0 5px;padding-top:6px;text-align:center;color:#DA4901;background-position:0 -219px;float:left}.help_guest a strong{font-size:14px}.help_guest a:hover{color:#f60;text-decoration:none}.help_guest a s{display:block;line-height:15px;color:#E4A522;text-decoration:none}.box_skin_blue .rc_tp{background-position:-162px -202px;overflow:hidden;z-index:1}.box_skin_blue .rc_tp b{background-position:-159px -202px}.box_skin_blue .rc_bt{background-position:-162px -205px}.box_skin_blue .rc_bt b{background-position:-159px -205px}#announce{margin-top:10px;margin-bottom:10px}.box_skin_blue .hd{border-left:1px solid #CFDAE4;border-right:1px solid #CFDAE4}.tab_holder{height:28px;background-repeat:repeat-x;background-position:0 -507px}.tab_holder li{float:left;color:#17387D;font-size:14px;font-weight:bold;text-align:center;line-height:26px;border-top:1px solid #CFDAE4;background-repeat:repeat-x;background-position:0 -31px}.tab_holder.forth li{width:25%}.tab_holder li span{display:block;height:100%;border-left:1px solid #fff;border-right:1px solid #B6D1E6;cursor:pointer}.tab_holder li s{display:none}.tab_holder .tab_holder_cw span{border-right:0}.tab_holder li a{color:#17387D}.tab_holder li.selected{background-position:0 999em;border-top:1px solid #EEA63A;border-bottom:1px solid white;position:relative}.tab_holder li.selected span{border-left:none;padding-left:1px}.tab_holder li.selected s{display:block;width:1px;height:24px;background-color:#E2E9EF;border-left:1px solid #F5F9FB;border-right:1px solid #B6D1E6;float:right;margin-top:-24px}.tab_holder li.selected.tab_holder_cw s{width:0;float:left;border-left-color:#e2e9ef;border-right-color:#f5f9fb}.col_sub a:hover,.info_list li .h,.grid_m a:hover{color:#f60}#announce .bd{height:51px;border:1px solid #CFDAE4;margin-top:-1px}#announce .tab_panel{padding:5px 0 0 10px}.info_list_half li{height:21px;width:47.2%;float:left;overflow:hidden}#recom .bd{border:1px solid #CFDAE4;margin-top:-1px}#recom .tab_panel{height:200px;padding:10px 0 0}.tab_holder.third li{width:35%}.tab_holder.third .tab_holder_cw{width:30%}.item_list .item{height:100px;width:33.2%;float:left;text-align:center}.item_list .pic img{width:70px;height:70px;border:1px solid #D0DAE4}.item_list .desc{height:18px;line-height:18px;overflow:hidden}#info{margin:10px auto}#info .bd{height:349px;border:1px solid #CFDAE4;margin-top:-1px}.tab_panel_news{padding:7px 10px 0}.info_chn_list{height:15px;line-height:15px;padding:5px 0;background:#F4F8FB;overflow:hidden}.info_chn_list li{border-left:1px solid #ccc;margin-left:-1px;padding:0 6px 0 10px;float:left}.info_chn_list li a{color:#17387D}.tab_panel_news h4{margin:7px 0;font-weight:normal;font-size:14px}.tab_panel_news h4 strong{font-weight:bold;color:#f60}#info .tab_panel_bd{padding-left:87px}.pic_news{width:82px;margin-left:-87px;position:absolute}.pic_news .desc{display:block;line-height:25px;text-align:center;background:#F4F8FB}.pic_news img{display:block;width:80px;height:80px;border:1px solid #ccc}#info .word_list{height:36px;line-height:18px;margin-top:8px;overflow:hidden}.tab_panel_news .word_list{margin-bottom:12px}#info .word_list li{color:#cbcbcb;float:left;width:33%;text-align:center}#info .word_list li a{display:inline-block}#info .word_list_s li{width:20%}#info .info_list_half{margin-top:-4px}#expressway .bd{height:121px;border:1px solid #CFDAE4;margin-top:-1px}.exp_list{padding:10px 0 0 20px;font-family:simsun}.exp_list li{padding:0 0 5px}.exp_list .with_btn{padding-left:48px}.exp_list .with_btn a{display:block;width:89px;height:20px;text-indent:-2000px;overflow:hidden;background:url(../image/taobao/a_btn.png)}.exp_more{width:80%;text-align:right;margin-top:-40px}.exp_more a{color:#36C;text-decoration:underline}.fpad_sub{padding:5px;margin-top:10px;background:#EBF5FA}.grid_m{margin-left:1px;clear:both;padding-top:10px}#p4p .hd h3{height:28px;line-height:28px;padding-left:10px;background-position:0 -31px;background-repeat:repeat-x;border-top:1px solid #CFDAE4;font-size:14px}#p4p .bd{border:1px solid #CFDAE4;padding:10px 0}#p4p .item_list{height:160px;padding-left:5px}#p4p .item_list li{width:12.4%;float:left}#p4p .bd .pic{font-size:0;text-align:center}#p4p .bd .pic img{width:100px;height:100px;border:1px solid #ccc}#p4p .bd .desc{width:100px;height:32px;line-height:16px;margin:0 auto;overflow:hidden}#p4p .bd .price{width:100px;margin:0 auto}#p4p .bd .price strong{padding-left:16px;color:#F50;font-size:14px;background-position:-155px -219px}.fpad_banner{height:90px;padding:5px 11px;margin:10px 0;background:#EBF5FA}.box_skin_orange .rc_tp{background-position:-162px -195px}.box_skin_orange .rc_tp b{background-position:-159px -195px}.box_skin_orange .rc_bt{background-position:-162px -198px}.box_skin_orange .rc_bt b{background-position:-159px -198px}.box_skin_orange .bd{height:133px;border:1px solid #FBD686;padding:5px;background-color:#FFF8E8}.links_panel{height:122px;padding-top:8px;border:1px solid #FFF3D9;background-color:white;float:left}.links_panel_safe,.links_panel_payment,.links_panel_service{width:20%}.links_panel_guard{width:37.5%;margin:0 .5%}.links_panel_service{margin-left:.5%}.links_panel h4{margin-bottom:6px;font-size:16px;text-align:center;color:#17387D;line-height:22px}.links_panel ul{padding-left:44px}.links_panel li a{display:block;line-height:22px;padding-left:15px;background-position:-162px -281px;zoom:1}.links_panel_guard ul{padding-left:67px;overflow:hidden;zoom:1}.links_panel_guard li{width:49.5%;float:left}.zxx_footer{padding:35px 0;line-height:20px;text-align:center;color:#333}.zxx_footer a{color:#34538b;text-decoration:underline} -------------------------------------------------------------------------------- /example/src/taobao.qcss: -------------------------------------------------------------------------------- 1 | /*copyright c by zhangxinxu 2010-01-28 v1.0*/ 2 | /*http://www.zhangxinxu*/ 3 | /*无hack 自适应优化版本，一些CSS reset取自原淘宝首页，其余均自己编写*/ 4 | /*仅供学习交流参考*/ 5 | @charset "utf-8"; 6 | 7 | body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { 8 | m0; 9 | p0; 10 | } 11 | 12 | body,button,input,select,textarea { 13 | font: 12px/1.5 tahoma,arial,simsun,sans-serif; 14 | } 15 | 16 | h1,h2,h3,h4,h5,h6 { 17 | f100%; 18 | } 19 | 20 | address,cite,dfn,em,var { 21 | fs n; 22 | } 23 | 24 | code,kbd,pre,samp { 25 | ff courier new,courier,monospace; 26 | } 27 | 28 | small { 29 | f12px; 30 | } 31 | 32 | ul,ol { 33 | list-style: none; 34 | } 35 | 36 | a { 37 | tdn; 38 | c#3e3e3e; 39 | } 40 | 41 | a:hover { 42 | tdl; 43 | } 44 | 45 | sup { 46 | v text-top; 47 | } 48 | 49 | sub { 50 | v text-bottom; 51 | } 52 | 53 | legend { 54 | c#000; 55 | } 56 | 57 | fieldset,img { 58 | bd0; 59 | } 60 | 61 | button,input,select,textarea { 62 | f100%; 63 | } 64 | 65 | table { 66 | border-collapse: collapse; 67 | border-spacing: 0; 68 | } 69 | 70 | body { 71 | bg white; 72 | } 73 | 74 | .l { 75 | l; 76 | } 77 | 78 | .r { 79 | r; 80 | } 81 | 82 | .dn { 83 | dn; 84 | } 85 | 86 | .g1 { 87 | w100%; 88 | bdt1 s #f9f9f9; 89 | bdb1 s #d2d2d2; 90 | bg #fbfbfb; 91 | abs; 92 | l0; 93 | r0; 94 | } 95 | 96 | .g2 { 97 | lh4px; 98 | bdt2 s #f9f9f9; 99 | bg #f5f5f5; 100 | bdb4 s #f2f2f2; 101 | mt2; 102 | } 103 | 104 | .g3 { 105 | lh4px; 106 | bdt3 s #efefef; 107 | bg #ebebeb; 108 | bdb4 s #e8e8e8; 109 | } 110 | 111 | #page { 112 | mla; 113 | mra; 114 | } 115 | 116 | .p_w { 117 | w950; 118 | } 119 | 120 | .quick_link li,.quick_link li s,.search_tablist li,.search_tablist .selected a,.search_panel .rc_tp,.search_btn,.product_list li,.product_list li s,.product_list li a:hover,.product_list .t_mall span,.tb_slide_triggers li,#product .rc_bt,#mall .hd h3 s,.info_list li,.mall_prev,.mall_next,.box .rc_tp,.box .rc_bt,.box .rc_tp b,.box .rc_bt b,.mall_brands_bd,.mall_brands_bd s,.mall_brands_content a,#mall .bt_bg,.ks_switchable_content i,#category .hd h3 a,#category .hd,.category_links li,.category_chn li,.help_guest a,.tab_holder li,.tab_holder,.box_skin_blue .hd h3,#p4p .bd .price strong,.links_panel li a { 121 | bgi url(../image/taobao.png); 122 | bgr no; 123 | } 124 | 125 | #header { 126 | bg url(../image/taobao/top.jpg) no 0 65px; 127 | } 128 | 129 | #nav { 130 | h25; 131 | lh25; 132 | rel; 133 | } 134 | 135 | #nav a { 136 | c#404040; 137 | } 138 | 139 | #nav a:hover { 140 | c#f60; 141 | } 142 | 143 | .quick_link li { 144 | bgp-166 -320; 145 | pr8; 146 | pl24; 147 | l; 148 | } 149 | 150 | .quick_link .mytaobao { 151 | bgp -999em 0; 152 | } 153 | 154 | .quick_link li s { 155 | w15; 156 | h12; 157 | f0; 158 | ml-15; 159 | abs; 160 | t6; 161 | poi; 162 | } 163 | 164 | .quick_link .mytaobao s { 165 | bgp-149 -352; 166 | } 167 | 168 | .quick_link .cart s { 169 | bgp-149 -326; 170 | } 171 | 172 | .quick_link .favorite s { 173 | bgp-149 -364; 174 | } 175 | 176 | .quick_link .forum { 177 | pl8; 178 | } 179 | 180 | .quick_link .help s { 181 | bgp-149 -339; 182 | } 183 | 184 | #logo { 185 | h68; 186 | pt18; 187 | f0; 188 | } 189 | 190 | #search { 191 | w650; 192 | mt-55; 193 | pb25; 194 | } 195 | 196 | .search_tablist { 197 | h27; 198 | rel; 199 | } 200 | 201 | .search_tablist li { 202 | bgp0 -999em; 203 | lh26; 204 | l; 205 | } 206 | 207 | .search_tablist li a { 208 | db; 209 | c#153679; 210 | p1 17 0 18; 211 | } 212 | 213 | .search_tablist .selected { 214 | bgp r -590; 215 | pr5; 216 | } 217 | 218 | .search_tablist .selected a { 219 | bgp0 -590; 220 | b; 221 | f14; 222 | } 223 | 224 | .search_options { 225 | r; 226 | pt7; 227 | lh1.3; 228 | } 229 | 230 | .search_options a { 231 | c#153679; 232 | } 233 | 234 | .search_panel { 235 | h34; 236 | mr56; 237 | mt-2; 238 | p7 0 0 5; 239 | bg white url(../image/taobao.png) rx 0 -549; 240 | bd 1 s #9EAAB6; 241 | } 242 | 243 | .search_panel .rc_tp { 244 | w5; 245 | h4; 246 | mt-8; 247 | mr-1; 248 | bgp-158 -190; 249 | f0; 250 | r; 251 | rel; 252 | } 253 | 254 | .search_box { 255 | db; 256 | h27; 257 | mr7; 258 | bds s; 259 | bdw1 0 1 1; 260 | bdc#585856 #585856 #B6B7B9; 261 | bg white; 262 | rel; 263 | } 264 | 265 | .search_box label { 266 | c#999; 267 | lh21; 268 | abs; 269 | l3; 270 | t3; 271 | tex; 272 | } 273 | 274 | .search_box input { 275 | w440; 276 | h15; 277 | lh15; 278 | p6 3 4; 279 | bd0; 280 | } 281 | 282 | .search_btn { 283 | w135; 284 | h29; 285 | f16; 286 | b; 287 | c white; 288 | bgc#FB8502; 289 | bgp0 -296; 290 | bd0; 291 | abs; 292 | r0; 293 | t-1; 294 | poi; 295 | } 296 | 297 | .bt_shadow { 298 | h1; 299 | ovh; 300 | bg#e5e5e5; 301 | m0 57 0 1; 302 | cl; 303 | } 304 | 305 | #content { 306 | cl; 307 | } 308 | 309 | .grid_ms { 310 | bdt3 s #E97507; 311 | z1; 312 | } 313 | 314 | .col_mail { 315 | w100%; 316 | l; 317 | } 318 | 319 | .main_wrap { 320 | mr320; 321 | } 322 | 323 | #product { 324 | w158; 325 | h335; 326 | m-2 a 0 -1; 327 | l; 328 | } 329 | 330 | .mege_menu { 331 | w147; 332 | h330; 333 | pt1; 334 | bd1 s #E56A02; 335 | rel; 336 | } 337 | 338 | .product_list { 339 | bdt1 s #FCD687; 340 | } 341 | 342 | .product_list li { 343 | h28; 344 | bgp0 -354; 345 | bgc#FBFCFC; 346 | } 347 | 348 | .product_list li a { 349 | db; 350 | lh27; 351 | pl37; 352 | rel; 353 | z1; 354 | } 355 | 356 | .product_list li a:hover { 357 | tdn; 358 | c#f60; 359 | bgp0 -410; 360 | } 361 | 362 | .product_list li.s { 363 | h29; 364 | bgc#FEF2D8; 365 | bgp0 -325; 366 | } 367 | 368 | .product_list li.s a { 369 | f14px; 370 | c#DA4901; 371 | lh28; 372 | } 373 | 374 | .product_list li.s a:hover { 375 | bg none; 376 | tdl; 377 | c#f60; 378 | } 379 | 380 | .product_list li strong { 381 | fw n; 382 | } 383 | 384 | .product_list li.s strong { 385 | b; 386 | } 387 | 388 | .product_list li s { 389 | w16; 390 | h16; 391 | abs; 392 | ml-27; 393 | t5; 394 | } 395 | 396 | .product_list li.s s { 397 | w20; 398 | h20; 399 | ml-29; 400 | t4; 401 | } 402 | 403 | .product_list .t_mall strong,.product_list .t_mall span { 404 | w78; 405 | h18; 406 | abs; 407 | } 408 | 409 | .product_list .t_mall strong { 410 | lh16; 411 | t5; 412 | poi; 413 | } 414 | 415 | .product_list .t_mall span { 416 | bgp0 -109; 417 | l0; 418 | t0; 419 | } 420 | 421 | .product_list .t_mall s { 422 | bgp-147 -113; 423 | } 424 | 425 | .product_list .t_3c s { 426 | bgp-127 -133; 427 | } 428 | 429 | .product_list .t_news s { 430 | bgp-147 -133; 431 | } 432 | 433 | .product_list .t_digi s { 434 | bgp-119 -185; 435 | } 436 | 437 | .product_list .t_jipiao s { 438 | bgp-118 -153; 439 | } 440 | 441 | .product_list .t_caipiao s { 442 | bgp-135 -185; 443 | } 444 | 445 | .product_list .t_jianghu s { 446 | bgp-151 -169; 447 | } 448 | 449 | .product_list .t_shiyi s { 450 | bgp-151 -153; 451 | } 452 | 453 | .product_list .t_garden s { 454 | bgp-119 -168; 455 | } 456 | 457 | .product_list .t_wangwang s { 458 | bgp-139 -203; 459 | } 460 | 461 | .product_list .t_wap s { 462 | bgp-135 -153; 463 | } 464 | 465 | #product .more { 466 | lh17; 467 | p0 10; 468 | bgc#F4F9FD; 469 | tr; 470 | } 471 | 472 | #product .more a { 473 | c#7E93A5; 474 | } 475 | 476 | #product .more a:hover { 477 | c#f60; 478 | } 479 | 480 | #product .rc_bt { 481 | db; 482 | h4; 483 | f0; 484 | mt-4; 485 | bgp-163px -209px; 486 | rel; 487 | } 488 | 489 | #product .r_shadow { 490 | db; 491 | h331; 492 | w1; 493 | ml149; 494 | mt-331; 495 | bg#f7e5d2; 496 | bdl1 s #f5ddc3; 497 | bdr1 s #fcf6f0; 498 | } 499 | 500 | .box_animate { 501 | ml158; 502 | pt6; 503 | } 504 | 505 | .box_skin_naked { 506 | bd1 s #B6D1E6; 507 | z1; 508 | } 509 | 510 | .box_skin_naked .loading { 511 | bg#EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%; 512 | } 513 | 514 | .tb_slide { 515 | rel; 516 | h150; 517 | ovh; 518 | } 519 | 520 | .tb_slide_list { 521 | w100%; 522 | abs; 523 | t0; 524 | l0; 525 | } 526 | 527 | .tb_slide_list li { 528 | h150; 529 | ovh; 530 | } 531 | 532 | .tb_slide_list li img { 533 | w100%; 534 | } 535 | 536 | .tb_slide_triggers { 537 | h18; 538 | abs; 539 | b5; 540 | r5; 541 | pt2; 542 | } 543 | 544 | .tb_slide_triggers li { 545 | l; 546 | w16; 547 | h16; 548 | bgp-131px -114px; 549 | bgc#fcf2cf; 550 | bd1 s #f47500; 551 | c#d94b01; 552 | tc; 553 | lh16; 554 | ml3; 555 | poi; 556 | f11px; 557 | } 558 | 559 | .tb_slide_triggers li.current { 560 | w18; 561 | h18; 562 | lh18; 563 | bgp-113px -114px; 564 | bgc#ff9415; 565 | mt-2; 566 | c#fff; 567 | b; 568 | } 569 | 570 | #mall .hd { 571 | h20; 572 | bdl1 s #ccc; 573 | bdr1 s #ccc; 574 | p14 10 4 8; 575 | } 576 | 577 | #mall .hd h3 { 578 | c#B60F23; 579 | lh17; 580 | l; 581 | rel; 582 | } 583 | 584 | #mall .hd h3 s { 585 | w131; 586 | h17; 587 | bgp0 -92px; 588 | abs; 589 | l0; 590 | t0; 591 | poi; 592 | } 593 | 594 | .info_list li { 595 | pl8; 596 | lh21; 597 | bgp-164px -408px; 598 | } 599 | 600 | #mall .info_list li { 601 | l; 602 | ml10; 603 | } 604 | 605 | #mall .info_list li a { 606 | c#9a0002; 607 | } 608 | 609 | #mall .bd { 610 | h121; 611 | bd1 s #ccc; 612 | bdt0; 613 | p5 10 8; 614 | rel; 615 | } 616 | 617 | #mall .bt_bg { 618 | db; 619 | h70; 620 | mt-70; 621 | bgp0 -438px; 622 | bgr rx; 623 | } 624 | 625 | .mall_prev,.mall_next { 626 | w22; 627 | h34; 628 | o none; 629 | abs; 630 | b31; 631 | } 632 | 633 | .mall_prev { 634 | bgp-68px -185px; 635 | l3; 636 | } 637 | 638 | .mall_next { 639 | bgp-90px -185px; 640 | r3; 641 | } 642 | 643 | .box .rc_tp,.box .rc_bt { 644 | db; 645 | h4; 646 | f0; 647 | rel; 648 | } 649 | 650 | .box .rc_tp { 651 | mb-4; 652 | bgp-162px -264px; 653 | } 654 | 655 | .box .rc_bt { 656 | mt-4; 657 | bgp-162px -267px; 658 | } 659 | 660 | .box .rc_tp b,.box .rc_bt b { 661 | r; 662 | w4; 663 | h4; 664 | } 665 | 666 | .box .rc_tp b { 667 | bgp-159px -264px; 668 | } 669 | 670 | .box .rc_bt b { 671 | bgp-159px -267px; 672 | } 673 | 674 | .mall_brands { 675 | rel; 676 | z1; 677 | } 678 | 679 | .mall_brands_bd { 680 | h30; 681 | p1 0; 682 | bgr rx; 683 | bd1 s #DBDBDB; 684 | } 685 | 686 | .mall_brands_bd s { 687 | w4; 688 | h4; 689 | f0; 690 | bgp-112px -215px; 691 | abs; 692 | t14; 693 | } 694 | 695 | .mall_brands_prev { 696 | l9; 697 | } 698 | 699 | .mall_brands_next { 700 | r9; 701 | } 702 | 703 | .mall_brands_content { 704 | w408; 705 | h30; 706 | m0 a; 707 | ovh; 708 | rel; 709 | } 710 | 711 | .mall_brands_content ol { 712 | w1242; 713 | abs; 714 | } 715 | 716 | .mall_brands_content li { 717 | w414; 718 | ml-2; 719 | l; 720 | ovh; 721 | } 722 | 723 | .mall_brands_content a { 724 | pl2; 725 | bgp-165px -371px; 726 | l; 727 | } 728 | 729 | .mall_brands_content a img { 730 | w80; 731 | h30; 732 | } 733 | 734 | .mall_content { 735 | w414; 736 | h72; 737 | m0 a; 738 | pt14; 739 | rel; 740 | ovh; 741 | } 742 | 743 | .mall_content ol { 744 | w1248; 745 | abs; 746 | } 747 | 748 | .mall_content li { 749 | w416; 750 | l; 751 | f0; 752 | tc; 753 | ovh; 754 | } 755 | 756 | .ks_switchable_content i { 757 | dib; 758 | w11; 759 | h21; 760 | bgp-113px -132px; 761 | } 762 | 763 | .ks_switchable_content i.m { 764 | mr4; 765 | } 766 | 767 | #category { 768 | cl; 769 | pt10; 770 | z1; 771 | } 772 | 773 | #category .hd { 774 | h28; 775 | lh28; 776 | bd1 s #CFDAE4; 777 | bgc#F5F9FB; 778 | bgp0 -31px; 779 | bgr rx; 780 | rel; 781 | } 782 | 783 | #category .hd h3 a { 784 | db; 785 | w89; 786 | lh26; 787 | m1; 788 | f14px; 789 | c#F60; 790 | bgc#E6EFF6; 791 | bgp0 -145px; 792 | tc; 793 | } 794 | 795 | .category_links { 796 | abs; 797 | t0; 798 | l98; 799 | ovh; 800 | } 801 | 802 | .category_links li,.category_chn li { 803 | l; 804 | ml-1; 805 | p0 8; 806 | bgp-166px -340px; 807 | } 808 | 809 | .category_chn li a,.category_links li a { 810 | c#17387D; 811 | } 812 | 813 | .category_chn { 814 | b; 815 | abs; 816 | r2; 817 | t0; 818 | ovh; 819 | } 820 | 821 | #category .bd { 822 | bd1 s #CFDAE4; 823 | mt-1; 824 | } 825 | 826 | .category_item_fashion,.category_item_life,.category_item_sport,.category_item_other { 827 | h87; 828 | } 829 | 830 | .category_item_decoration,.category_item_virtual { 831 | h60; 832 | } 833 | 834 | .category_item_single { 835 | h40; 836 | } 837 | 838 | .category_item_digital { 839 | h115; 840 | } 841 | 842 | .category_item { 843 | bdb1 d #ccc; 844 | ovh; 845 | } 846 | 847 | .category_item h4 { 848 | w20; 849 | h100%; 850 | l; 851 | lh20; 852 | p0 4; 853 | bdr1 s #F4F8FB; 854 | f14px; 855 | tc; 856 | bg#F4F8FB; 857 | } 858 | 859 | .category_item_single h4 { 860 | lh16; 861 | } 862 | 863 | .category_item h4 a,.category_item h4 i { 864 | dib; 865 | vm; 866 | c#1A397C; 867 | } 868 | 869 | .category_item h4 i { 870 | h100%; 871 | w0; 872 | } 873 | 874 | .category_item ul { 875 | h100%; 876 | pl38; 877 | pt4; 878 | } 879 | 880 | .category_item ul li { 881 | w33.3%; 882 | h18; 883 | lh18; 884 | p3 0; 885 | m2 0 1; 886 | l; 887 | ovh; 888 | } 889 | 890 | .category_item ul h5 { 891 | di; 892 | f14px; 893 | pr7; 894 | } 895 | 896 | .category_item ul span a { 897 | bdl1 s #B7D0E4; 898 | ml-1; 899 | p0 3; 900 | } 901 | 902 | .category_item ul span a:first-child { 903 | bdl0; 904 | } 905 | 906 | .category_item ul a { 907 | c#013DD9; 908 | } 909 | 910 | .category_item a:hover,.category_item ul a.h { 911 | c#f60; 912 | } 913 | 914 | .category_ad { 915 | h84; 916 | pt12; 917 | tc; 918 | f0; 919 | cl; 920 | } 921 | 922 | .category_ad a { 923 | dib; 924 | w33%; 925 | tc; 926 | } 927 | 928 | .category_ad img { 929 | w190; 930 | h70; 931 | bd1 s #CBCCCE; 932 | } 933 | 934 | .grid_ms .col_sub { 935 | w310; 936 | ml-310; 937 | pt6; 938 | l; 939 | } 940 | 941 | #help .bd { 942 | h48; 943 | p5 0; 944 | bg#f4f8fb; 945 | bd1 s #CFDAE4; 946 | } 947 | 948 | .help_guest a { 949 | w145; 950 | h42; 951 | m0 2 0 5; 952 | pt6; 953 | tc; 954 | c#DA4901; 955 | bgp0 -219px; 956 | l; 957 | } 958 | 959 | .help_guest a strong { 960 | f14px; 961 | } 962 | 963 | .help_guest a:hover { 964 | c#f60; 965 | tdn; 966 | } 967 | 968 | .help_guest a s { 969 | db; 970 | lh15; 971 | c#E4A522; 972 | tdn; 973 | } 974 | 975 | .box_skin_blue .rc_tp { 976 | bgp-162px -202px; 977 | ovh; 978 | zx1; 979 | } 980 | 981 | .box_skin_blue .rc_tp b { 982 | bgp-159px -202px; 983 | } 984 | 985 | .box_skin_blue .rc_bt { 986 | bgp-162px -205px; 987 | } 988 | 989 | .box_skin_blue .rc_bt b { 990 | bgp-159px -205px; 991 | } 992 | 993 | #announce { 994 | mt10; 995 | mb10; 996 | } 997 | 998 | .box_skin_blue .hd { 999 | bdl1 s #CFDAE4; 1000 | bdr1 s #CFDAE4; 1001 | } 1002 | 1003 | .tab_holder { 1004 | h28; 1005 | bgr rx; 1006 | bgp0 -507px; 1007 | } 1008 | 1009 | .tab_holder li { 1010 | l; 1011 | c#17387D; 1012 | f14px; 1013 | b; 1014 | tc; 1015 | lh26; 1016 | bdt1 s #CFDAE4; 1017 | bgr rx; 1018 | bgp0 -31px; 1019 | } 1020 | 1021 | .tab_holder.forth li { 1022 | w25%; 1023 | } 1024 | 1025 | .tab_holder li span { 1026 | db; 1027 | h100%; 1028 | bdl1 s #fff; 1029 | bdr1 s #B6D1E6; 1030 | poi; 1031 | } 1032 | 1033 | .tab_holder li s { 1034 | dn; 1035 | } 1036 | 1037 | .tab_holder .tab_holder_cw span { 1038 | bdr0; 1039 | } 1040 | 1041 | .tab_holder li a { 1042 | c#17387D; 1043 | } 1044 | 1045 | .tab_holder li.selected { 1046 | bgp0 999em; 1047 | bdt1 s #EEA63A; 1048 | bdb1 s white; 1049 | rel; 1050 | } 1051 | 1052 | .tab_holder li.selected span { 1053 | bdl none; 1054 | pl1; 1055 | } 1056 | 1057 | .tab_holder li.selected s { 1058 | db; 1059 | w1; 1060 | h24; 1061 | bgc#E2E9EF; 1062 | bdl1 s #F5F9FB; 1063 | bdr1 s #B6D1E6; 1064 | r; 1065 | mt-24; 1066 | } 1067 | 1068 | .tab_holder li.selected.tab_holder_cw s { 1069 | w0; 1070 | l; 1071 | border-left-color: #e2e9ef; 1072 | border-right-color: #f5f9fb; 1073 | } 1074 | 1075 | .col_sub a:hover,.info_list li .h,.grid_m a:hover { 1076 | c#f60; 1077 | } 1078 | 1079 | #announce .bd { 1080 | h51; 1081 | bd1 s #CFDAE4; 1082 | mt-1; 1083 | } 1084 | 1085 | #announce .tab_panel { 1086 | p5 0 0 10; 1087 | } 1088 | 1089 | .info_list_half li { 1090 | h21; 1091 | w47.2%; 1092 | l; 1093 | ovh; 1094 | } 1095 | 1096 | #recom .bd { 1097 | bd1 s #CFDAE4; 1098 | mt-1; 1099 | } 1100 | 1101 | #recom .tab_panel { 1102 | h200; 1103 | p10 0 0; 1104 | } 1105 | 1106 | .tab_holder.third li { 1107 | w35%; 1108 | } 1109 | 1110 | .tab_holder.third .tab_holder_cw { 1111 | w30%; 1112 | } 1113 | 1114 | .item_list .item { 1115 | h100; 1116 | w33.2%; 1117 | l; 1118 | tc; 1119 | } 1120 | 1121 | .item_list .pic img { 1122 | w70; 1123 | h70; 1124 | bd1 s #D0DAE4; 1125 | } 1126 | 1127 | .item_list .desc { 1128 | h18; 1129 | lh18; 1130 | ovh; 1131 | } 1132 | 1133 | #info { 1134 | m10 a; 1135 | } 1136 | 1137 | #info .bd { 1138 | h349; 1139 | bd1 s #CFDAE4; 1140 | mt-1; 1141 | } 1142 | 1143 | .tab_panel_news { 1144 | p7 10 0; 1145 | } 1146 | 1147 | .info_chn_list { 1148 | h15; 1149 | lh15; 1150 | p5 0; 1151 | bg#F4F8FB; 1152 | ovh; 1153 | } 1154 | 1155 | .info_chn_list li { 1156 | bdl1 s #ccc; 1157 | ml-1; 1158 | p0 6 0 10; 1159 | l; 1160 | } 1161 | 1162 | .info_chn_list li a { 1163 | c#17387D; 1164 | } 1165 | 1166 | .tab_panel_news h4 { 1167 | m7 0; 1168 | fw n; 1169 | f14px; 1170 | } 1171 | 1172 | .tab_panel_news h4 strong { 1173 | b; 1174 | c#f60; 1175 | } 1176 | 1177 | #info .tab_panel_bd { 1178 | pl87; 1179 | } 1180 | 1181 | .pic_news { 1182 | w82; 1183 | ml-87; 1184 | abs; 1185 | } 1186 | 1187 | .pic_news .desc { 1188 | db; 1189 | lh25; 1190 | tc; 1191 | bg#F4F8FB; 1192 | } 1193 | 1194 | .pic_news img { 1195 | db; 1196 | w80; 1197 | h80; 1198 | bd1 s #ccc; 1199 | } 1200 | 1201 | #info .word_list { 1202 | h36; 1203 | lh18; 1204 | mt8; 1205 | ovh; 1206 | } 1207 | 1208 | .tab_panel_news .word_list { 1209 | mb12; 1210 | } 1211 | 1212 | #info .word_list li { 1213 | c#cbcbcb; 1214 | l; 1215 | w33%; 1216 | tc; 1217 | } 1218 | 1219 | #info .word_list li a { 1220 | dib; 1221 | } 1222 | 1223 | #info .word_list_s li { 1224 | w20%; 1225 | } 1226 | 1227 | #info .info_list_half { 1228 | mt-4; 1229 | } 1230 | 1231 | #expressway .bd { 1232 | h121; 1233 | bd1 s #CFDAE4; 1234 | mt-1; 1235 | } 1236 | 1237 | .exp_list { 1238 | p10 0 0 20; 1239 | ff simsun; 1240 | } 1241 | 1242 | .exp_list li { 1243 | p0 0 5; 1244 | } 1245 | 1246 | .exp_list .with_btn { 1247 | pl48; 1248 | } 1249 | 1250 | .exp_list .with_btn a { 1251 | db; 1252 | w89; 1253 | h20; 1254 | ti-2000; 1255 | ovh; 1256 | bg url(../image/taobao/a_btn.png); 1257 | } 1258 | 1259 | .exp_more { 1260 | w80%; 1261 | tr; 1262 | mt-40; 1263 | } 1264 | 1265 | .exp_more a { 1266 | c#36C; 1267 | tdl; 1268 | } 1269 | 1270 | .fpad_sub { 1271 | p5; 1272 | mt10; 1273 | bg#EBF5FA; 1274 | } 1275 | 1276 | .grid_m { 1277 | ml1; 1278 | cl; 1279 | pt10; 1280 | } 1281 | 1282 | #p4p .hd h3 { 1283 | h28; 1284 | lh28; 1285 | pl10; 1286 | bgp0 -31px; 1287 | bgr rx; 1288 | bdt1 s #CFDAE4; 1289 | f14px; 1290 | } 1291 | 1292 | #p4p .bd { 1293 | bd1 s #CFDAE4; 1294 | p10 0; 1295 | } 1296 | 1297 | #p4p .item_list { 1298 | h160; 1299 | pl5; 1300 | } 1301 | 1302 | #p4p .item_list li { 1303 | w12.4%; 1304 | l; 1305 | } 1306 | 1307 | #p4p .bd .pic { 1308 | f0; 1309 | tc; 1310 | } 1311 | 1312 | #p4p .bd .pic img { 1313 | w100; 1314 | h100; 1315 | bd1 s #ccc; 1316 | } 1317 | 1318 | #p4p .bd .desc { 1319 | w100; 1320 | h32; 1321 | lh16; 1322 | m0 a; 1323 | ovh; 1324 | } 1325 | 1326 | #p4p .bd .price { 1327 | w100; 1328 | m0 a; 1329 | } 1330 | 1331 | #p4p .bd .price strong { 1332 | pl16; 1333 | c#F50; 1334 | f14px; 1335 | bgp-155px -219px; 1336 | } 1337 | 1338 | .fpad_banner { 1339 | h90; 1340 | p5 11px; 1341 | m10 0; 1342 | bg#EBF5FA; 1343 | } 1344 | 1345 | .box_skin_orange .rc_tp { 1346 | bgp-162px -195px; 1347 | } 1348 | 1349 | .box_skin_orange .rc_tp b { 1350 | bgp-159px -195px; 1351 | } 1352 | 1353 | .box_skin_orange .rc_bt { 1354 | bgp-162px -198px; 1355 | } 1356 | 1357 | .box_skin_orange .rc_bt b { 1358 | bgp-159px -198px; 1359 | } 1360 | 1361 | .box_skin_orange .bd { 1362 | h133; 1363 | bd1 s #FBD686; 1364 | p5; 1365 | bgc#FFF8E8; 1366 | } 1367 | 1368 | .links_panel { 1369 | h122; 1370 | pt8; 1371 | bd1 s #FFF3D9; 1372 | bgc white; 1373 | l; 1374 | } 1375 | 1376 | .links_panel_safe,.links_panel_payment,.links_panel_service { 1377 | w20%; 1378 | } 1379 | 1380 | .links_panel_guard { 1381 | w37.5%; 1382 | m0 .5%; 1383 | } 1384 | 1385 | .links_panel_service { 1386 | ml.5%; 1387 | } 1388 | 1389 | .links_panel h4 { 1390 | mb6; 1391 | f16; 1392 | tc; 1393 | c#17387D; 1394 | lh22; 1395 | } 1396 | 1397 | .links_panel ul { 1398 | pl44; 1399 | } 1400 | 1401 | .links_panel li a { 1402 | db; 1403 | lh22; 1404 | pl15; 1405 | bgp-162 -281; 1406 | z1; 1407 | } 1408 | 1409 | .links_panel_guard ul { 1410 | pl67; 1411 | ovh; 1412 | z1; 1413 | } 1414 | 1415 | .links_panel_guard li { 1416 | w49.5%; 1417 | l; 1418 | } 1419 | 1420 | .zxx_footer { 1421 | p35 0; 1422 | lh20; 1423 | tc; 1424 | c#333; 1425 | } 1426 | 1427 | .zxx_footer a { 1428 | c#34538b; 1429 | tdl; 1430 | } -------------------------------------------------------------------------------- /example/dist/css/taobao-origin.css: -------------------------------------------------------------------------------- 1 | /*copyright c by zhangxinxu 2010-01-28 v1.0*/ 2 | /*http://www.zhangxinxu*/ 3 | /*无hack 自适应优化版本，一些CSS reset取自原淘宝首页，其余均自己编写*/ 4 | /*仅供学习交流参考*/ 5 | @charset "utf-8"; 6 | 7 | body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body,button,input,select,textarea { 13 | font: 12px/1.5 tahoma,arial,simsun,sans-serif; 14 | } 15 | 16 | h1,h2,h3,h4,h5,h6 { 17 | font-size: 100%; 18 | } 19 | 20 | address,cite,dfn,em,var { 21 | font-style: normal; 22 | } 23 | 24 | code,kbd,pre,samp { 25 | font-family: courier new,courier,monospace; 26 | } 27 | 28 | small { 29 | font-size: 12px; 30 | } 31 | 32 | ul,ol { 33 | list-style: none; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: #3e3e3e; 39 | } 40 | 41 | a:hover { 42 | text-decoration: underline; 43 | } 44 | 45 | sup { 46 | vertical-align: text-top; 47 | } 48 | 49 | sub { 50 | vertical-align: text-bottom; 51 | } 52 | 53 | legend { 54 | color: #000; 55 | } 56 | 57 | fieldset,img { 58 | border: 0; 59 | } 60 | 61 | button,input,select,textarea { 62 | font-size: 100%; 63 | } 64 | 65 | table { 66 | border-collapse: collapse; 67 | border-spacing: 0; 68 | } 69 | 70 | body { 71 | background: white; 72 | } 73 | 74 | .l { 75 | float: left; 76 | } 77 | 78 | .r { 79 | float: right; 80 | } 81 | 82 | .dn { 83 | display: none; 84 | } 85 | 86 | .g1 { 87 | width: 100%; 88 | border-top: 1px solid #f9f9f9; 89 | border-bottom: 1px solid #d2d2d2; 90 | background: #fbfbfb; 91 | position: absolute; 92 | left: 0; 93 | top: 0; 94 | } 95 | 96 | .g2 { 97 | line-height: 4px; 98 | border-top: 2px solid #f9f9f9; 99 | background: #f5f5f5; 100 | border-bottom: 4px solid #f2f2f2; 101 | margin-top: 2px; 102 | } 103 | 104 | .g3 { 105 | line-height: 4px; 106 | border-top: 3px solid #efefef; 107 | background: #ebebeb; 108 | border-bottom: 4px solid #e8e8e8; 109 | } 110 | 111 | #page { 112 | margin-left: auto; 113 | margin-right: auto; 114 | } 115 | 116 | .p_w { 117 | width: 950px; 118 | } 119 | 120 | .quick_link li,.quick_link li s,.search_tablist li,.search_tablist .selected a,.search_panel .rc_tp,.search_btn,.product_list li,.product_list li s,.product_list li a:hover,.product_list .t_mall span,.tb_slide_triggers li,#product .rc_bt,#mall .hd h3 s,.info_list li,.mall_prev,.mall_next,.box .rc_tp,.box .rc_bt,.box .rc_tp b,.box .rc_bt b,.mall_brands_bd,.mall_brands_bd s,.mall_brands_content a,#mall .bt_bg,.ks_switchable_content i,#category .hd h3 a,#category .hd,.category_links li,.category_chn li,.help_guest a,.tab_holder li,.tab_holder,.box_skin_blue .hd h3,#p4p .bd .price strong,.links_panel li a { 121 | background-image: url(../image/taobao.png); 122 | background-repeat: no-repeat; 123 | } 124 | 125 | #header { 126 | background: url(../image/taobao/top.jpg) no-repeat 0 65px; 127 | } 128 | 129 | #nav { 130 | height: 25px; 131 | line-height: 25px; 132 | position: relative; 133 | } 134 | 135 | #nav a { 136 | color: #404040; 137 | } 138 | 139 | #nav a:hover { 140 | color: #f60; 141 | } 142 | 143 | .quick_link li { 144 | background-position: -166px -320px; 145 | padding-right: 8px; 146 | padding-left: 24px; 147 | float: left; 148 | } 149 | 150 | .quick_link .mytaobao { 151 | background-position: -999em 0; 152 | } 153 | 154 | .quick_link li s { 155 | width: 15px; 156 | height: 12px; 157 | font-size: 0; 158 | margin-left: -15px; 159 | position: absolute; 160 | top: 6px; 161 | cursor: pointer; 162 | } 163 | 164 | .quick_link .mytaobao s { 165 | background-position: -149px -352px; 166 | } 167 | 168 | .quick_link .cart s { 169 | background-position: -149px -326px; 170 | } 171 | 172 | .quick_link .favorite s { 173 | background-position: -149px -364px; 174 | } 175 | 176 | .quick_link .forum { 177 | padding-left: 8px; 178 | } 179 | 180 | .quick_link .help s { 181 | background-position: -149px -339px; 182 | } 183 | 184 | #logo { 185 | height: 68px; 186 | padding-top: 18px; 187 | font-size: 0; 188 | } 189 | 190 | #search { 191 | width: 650px; 192 | margin-top: -55px; 193 | padding-bottom: 25px; 194 | } 195 | 196 | .search_tablist { 197 | height: 27px; 198 | position: relative; 199 | } 200 | 201 | .search_tablist li { 202 | background-position: 0 -999em; 203 | line-height: 26px; 204 | float: left; 205 | } 206 | 207 | .search_tablist li a { 208 | display: block; 209 | color: #153679; 210 | padding: 1px 17px 0 18px; 211 | } 212 | 213 | .search_tablist .selected { 214 | background-position: right -590px; 215 | padding-right: 5px; 216 | } 217 | 218 | .search_tablist .selected a { 219 | background-position: 0 -590px; 220 | font-weight: bold; 221 | font-size: 14px; 222 | } 223 | 224 | .search_options { 225 | float: right; 226 | padding-top: 7px; 227 | line-height: 1.3; 228 | } 229 | 230 | .search_options a { 231 | color: #153679; 232 | } 233 | 234 | .search_panel { 235 | height: 34px; 236 | margin-right: 56px; 237 | margin-top: -2px; 238 | padding: 7px 0 0 5px; 239 | background: white url(../image/taobao.png) repeat-x 0 -549px; 240 | border: 1px solid #9EAAB6; 241 | } 242 | 243 | .search_panel .rc_tp { 244 | width: 5px; 245 | height: 4px; 246 | margin-top: -8px; 247 | margin-right: -1px; 248 | background-position: -158px -190px; 249 | font-size: 0; 250 | float: right; 251 | position: relative; 252 | } 253 | 254 | .search_box { 255 | display: block; 256 | height: 27px; 257 | margin-right: 7px; 258 | border-style: solid; 259 | border-width: 1px 0 1px 1px; 260 | border-color: #585856 #585856 #B6B7B9; 261 | background: white; 262 | position: relative; 263 | } 264 | 265 | .search_box label { 266 | color: #999; 267 | line-height: 21px; 268 | position: absolute; 269 | left: 3px; 270 | top: 3px; 271 | cursor: text; 272 | } 273 | 274 | .search_box input { 275 | width: 440px; 276 | height: 15px; 277 | line-height: 15px; 278 | padding: 6px 3px 4px; 279 | border: 0; 280 | } 281 | 282 | .search_btn { 283 | width: 135px; 284 | height: 29px; 285 | font-size: 16px; 286 | font-weight: bold; 287 | color: white; 288 | background-color: #FB8502; 289 | background-position: 0 -296px; 290 | border: 0; 291 | position: absolute; 292 | right: 0; 293 | top: -1px; 294 | cursor: pointer; 295 | } 296 | 297 | .bt_shadow { 298 | height: 1px; 299 | overflow: hidden; 300 | background: #e5e5e5; 301 | margin: 0 57px 0 1px; 302 | clear: both; 303 | } 304 | 305 | #content { 306 | clear: both; 307 | } 308 | 309 | .grid_ms { 310 | border-top: 3px solid #E97507; 311 | zoom: 1; 312 | } 313 | 314 | .col_mail { 315 | width: 100%; 316 | float: left; 317 | } 318 | 319 | .main_wrap { 320 | margin-right: 320px; 321 | } 322 | 323 | #product { 324 | width: 158px; 325 | height: 335px; 326 | margin: -2px auto 0 -1px; 327 | float: left; 328 | } 329 | 330 | .mege_menu { 331 | width: 147px; 332 | height: 330px; 333 | padding-top: 1px; 334 | border: 1px solid #E56A02; 335 | position: relative; 336 | } 337 | 338 | .product_list { 339 | border-top: 1px solid #FCD687; 340 | } 341 | 342 | .product_list li { 343 | height: 28px; 344 | background-position: 0 -354px; 345 | background-color: #FBFCFC; 346 | } 347 | 348 | .product_list li a { 349 | display: block; 350 | line-height: 27px; 351 | padding-left: 37px; 352 | position: relative; 353 | zoom: 1; 354 | } 355 | 356 | .product_list li a:hover { 357 | text-decoration: none; 358 | color: #f60; 359 | background-position: 0 -410px; 360 | } 361 | 362 | .product_list li.s { 363 | height: 29px; 364 | background-color: #FEF2D8; 365 | background-position: 0 -325px; 366 | } 367 | 368 | .product_list li.s a { 369 | font-size: 14px; 370 | color: #DA4901; 371 | line-height: 28px; 372 | } 373 | 374 | .product_list li.s a:hover { 375 | background: none; 376 | text-decoration: underline; 377 | color: #f60; 378 | } 379 | 380 | .product_list li strong { 381 | font-weight: normal; 382 | } 383 | 384 | .product_list li.s strong { 385 | font-weight: bold; 386 | } 387 | 388 | .product_list li s { 389 | width: 16px; 390 | height: 16px; 391 | position: absolute; 392 | margin-left: -27px; 393 | top: 5px; 394 | } 395 | 396 | .product_list li.s s { 397 | width: 20px; 398 | height: 20px; 399 | margin-left: -29px; 400 | top: 4px; 401 | } 402 | 403 | .product_list .t_mall strong,.product_list .t_mall span { 404 | width: 78px; 405 | height: 18px; 406 | position: absolute; 407 | } 408 | 409 | .product_list .t_mall strong { 410 | line-height: 16px; 411 | top: 5px; 412 | cursor: pointer; 413 | } 414 | 415 | .product_list .t_mall span { 416 | background-position: 0 -109px; 417 | left: 0; 418 | top: 0; 419 | } 420 | 421 | .product_list .t_mall s { 422 | background-position: -147px -113px; 423 | } 424 | 425 | .product_list .t_3c s { 426 | background-position: -127px -133px; 427 | } 428 | 429 | .product_list .t_news s { 430 | background-position: -147px -133px; 431 | } 432 | 433 | .product_list .t_digi s { 434 | background-position: -119px -185px; 435 | } 436 | 437 | .product_list .t_jipiao s { 438 | background-position: -118px -153px; 439 | } 440 | 441 | .product_list .t_caipiao s { 442 | background-position: -135px -185px; 443 | } 444 | 445 | .product_list .t_jianghu s { 446 | background-position: -151px -169px; 447 | } 448 | 449 | .product_list .t_shiyi s { 450 | background-position: -151px -153px; 451 | } 452 | 453 | .product_list .t_garden s { 454 | background-position: -119px -168px; 455 | } 456 | 457 | .product_list .t_wangwang s { 458 | background-position: -139px -203px; 459 | } 460 | 461 | .product_list .t_wap s { 462 | background-position: -135px -153px; 463 | } 464 | 465 | #product .more { 466 | line-height: 17px; 467 | padding: 0 10px; 468 | background-color: #F4F9FD; 469 | text-align: right; 470 | } 471 | 472 | #product .more a { 473 | color: #7E93A5; 474 | } 475 | 476 | #product .more a:hover { 477 | color: #f60; 478 | } 479 | 480 | #product .rc_bt { 481 | display: block; 482 | height: 4px; 483 | font-size: 0; 484 | margin-top: -4px; 485 | background-position: -163px -209px; 486 | position: relative; 487 | } 488 | 489 | #product .r_shadow { 490 | display: block; 491 | height: 331px; 492 | width: 1px; 493 | margin-left: 149px; 494 | margin-top: -331px; 495 | background: #f7e5d2; 496 | border-left: 1px solid #f5ddc3; 497 | border-right: 1px solid #fcf6f0; 498 | } 499 | 500 | .box_animate { 501 | margin-left: 158px; 502 | padding-top: 6px; 503 | } 504 | 505 | .box_skin_naked { 506 | border: 1px solid #B6D1E6; 507 | zoom: 1; 508 | } 509 | 510 | .box_skin_naked .loading { 511 | background: #EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%; 512 | } 513 | 514 | .tb_slide { 515 | position: relative; 516 | height: 150px; 517 | overflow: hidden; 518 | } 519 | 520 | .tb_slide_list { 521 | width: 100%; 522 | position: absolute; 523 | top: 0; 524 | left: 0; 525 | } 526 | 527 | .tb_slide_list li { 528 | height: 150px; 529 | overflow: hidden; 530 | } 531 | 532 | .tb_slide_list li img { 533 | width: 100%; 534 | } 535 | 536 | .tb_slide_triggers { 537 | height: 18px; 538 | position: absolute; 539 | bottom: 5px; 540 | right: 5px; 541 | padding-top: 2px; 542 | } 543 | 544 | .tb_slide_triggers li { 545 | float: left; 546 | width: 16px; 547 | height: 16px; 548 | background-position: -131px -114px; 549 | background-color: #fcf2cf; 550 | border: 1px solid #f47500; 551 | color: #d94b01; 552 | text-align: center; 553 | line-height: 16px; 554 | margin-left: 3px; 555 | cursor: pointer; 556 | font-size: 11px; 557 | } 558 | 559 | .tb_slide_triggers li.current { 560 | width: 18px; 561 | height: 18px; 562 | line-height: 18px; 563 | background-position: -113px -114px; 564 | background-color: #ff9415; 565 | margin-top: -2px; 566 | color: #fff; 567 | font-weight: bold; 568 | } 569 | 570 | #mall .hd { 571 | height: 20px; 572 | border-left: 1px solid #ccc; 573 | border-right: 1px solid #ccc; 574 | padding: 14px 10px 4px 8px; 575 | } 576 | 577 | #mall .hd h3 { 578 | color: #B60F23; 579 | line-height: 17px; 580 | float: left; 581 | position: relative; 582 | } 583 | 584 | #mall .hd h3 s { 585 | width: 131px; 586 | height: 17px; 587 | background-position: 0 -92px; 588 | position: absolute; 589 | left: 0; 590 | top: 0; 591 | cursor: pointer; 592 | } 593 | 594 | .info_list li { 595 | padding-left: 8px; 596 | line-height: 21px; 597 | background-position: -164px -408px; 598 | } 599 | 600 | #mall .info_list li { 601 | float: left; 602 | margin-left: 10px; 603 | } 604 | 605 | #mall .info_list li a { 606 | color: #9a0002; 607 | } 608 | 609 | #mall .bd { 610 | height: 121px; 611 | border: 1px solid #ccc; 612 | border-top: 0; 613 | padding: 5px 10px 8px; 614 | position: relative; 615 | } 616 | 617 | #mall .bt_bg { 618 | display: block; 619 | height: 70px; 620 | margin-top: -70px; 621 | background-position: 0 -438px; 622 | background-repeat: repeat-x; 623 | } 624 | 625 | .mall_prev,.mall_next { 626 | width: 22px; 627 | height: 34px; 628 | outline: none; 629 | position: absolute; 630 | bottom: 31px; 631 | } 632 | 633 | .mall_prev { 634 | background-position: -68px -185px; 635 | left: 3px; 636 | } 637 | 638 | .mall_next { 639 | background-position: -90px -185px; 640 | right: 3px; 641 | } 642 | 643 | .box .rc_tp,.box .rc_bt { 644 | display: block; 645 | height: 4px; 646 | font-size: 0; 647 | position: relative; 648 | } 649 | 650 | .box .rc_tp { 651 | margin-bottom: -4px; 652 | background-position: -162px -264px; 653 | } 654 | 655 | .box .rc_bt { 656 | margin-top: -4px; 657 | background-position: -162px -267px; 658 | } 659 | 660 | .box .rc_tp b,.box .rc_bt b { 661 | float: right; 662 | width: 4px; 663 | height: 4px; 664 | } 665 | 666 | .box .rc_tp b { 667 | background-position: -159px -264px; 668 | } 669 | 670 | .box .rc_bt b { 671 | background-position: -159px -267px; 672 | } 673 | 674 | .mall_brands { 675 | position: relative; 676 | zoom: 1; 677 | } 678 | 679 | .mall_brands_bd { 680 | height: 30px; 681 | padding: 1px 0; 682 | background-repeat: repeat-x; 683 | border: 1px solid #DBDBDB; 684 | } 685 | 686 | .mall_brands_bd s { 687 | width: 4px; 688 | height: 4px; 689 | font-size: 0; 690 | background-position: -112px -215px; 691 | position: absolute; 692 | top: 14px; 693 | } 694 | 695 | .mall_brands_prev { 696 | left: 9px; 697 | } 698 | 699 | .mall_brands_next { 700 | right: 9px; 701 | } 702 | 703 | .mall_brands_content { 704 | width: 408px; 705 | height: 30px; 706 | margin: 0 auto; 707 | overflow: hidden; 708 | position: relative; 709 | } 710 | 711 | .mall_brands_content ol { 712 | width: 1242px; 713 | position: absolute; 714 | } 715 | 716 | .mall_brands_content li { 717 | width: 414px; 718 | margin-left: -2px; 719 | float: left; 720 | overflow: hidden; 721 | } 722 | 723 | .mall_brands_content a { 724 | padding-left: 2px; 725 | background-position: -165px -371px; 726 | float: left; 727 | } 728 | 729 | .mall_brands_content a img { 730 | width: 80px; 731 | height: 30px; 732 | } 733 | 734 | .mall_content { 735 | width: 414px; 736 | height: 72px; 737 | margin: 0 auto; 738 | padding-top: 14px; 739 | position: relative; 740 | overflow: hidden; 741 | } 742 | 743 | .mall_content ol { 744 | width: 1248px; 745 | position: absolute; 746 | } 747 | 748 | .mall_content li { 749 | width: 416px; 750 | float: left; 751 | font-size: 0; 752 | text-align: center; 753 | overflow: hidden; 754 | } 755 | 756 | .ks_switchable_content i { 757 | display: inline-block; 758 | width: 11px; 759 | height: 21px; 760 | background-position: -113px -132px; 761 | } 762 | 763 | .ks_switchable_content i.m { 764 | margin-right: 4px; 765 | } 766 | 767 | #category { 768 | clear: left; 769 | padding-top: 10px; 770 | zoom: 1; 771 | } 772 | 773 | #category .hd { 774 | height: 28px; 775 | line-height: 28px; 776 | border: 1px solid #CFDAE4; 777 | background-color: #F5F9FB; 778 | background-position: 0 -31px; 779 | background-repeat: repeat-x; 780 | position: relative; 781 | } 782 | 783 | #category .hd h3 a { 784 | display: block; 785 | width: 89px; 786 | line-height: 26px; 787 | margin: 1px; 788 | font-size: 14px; 789 | color: #F60; 790 | background-color: #E6EFF6; 791 | background-position: 0 -145px; 792 | text-align: center; 793 | } 794 | 795 | .category_links { 796 | position: absolute; 797 | top: 0; 798 | left: 98px; 799 | overflow: hidden; 800 | } 801 | 802 | .category_links li,.category_chn li { 803 | float: left; 804 | margin-left: -1px; 805 | padding: 0 8px; 806 | background-position: -166px -340px; 807 | } 808 | 809 | .category_chn li a,.category_links li a { 810 | color: #17387D; 811 | } 812 | 813 | .category_chn { 814 | font-weight: bold; 815 | position: absolute; 816 | right: 2px; 817 | top: 0; 818 | overflow: hidden; 819 | } 820 | 821 | #category .bd { 822 | border: 1px solid #CFDAE4; 823 | margin-top: -1px; 824 | } 825 | 826 | .category_item_fashion,.category_item_life,.category_item_sport,.category_item_other { 827 | height: 87px; 828 | } 829 | 830 | .category_item_decoration,.category_item_virtual { 831 | height: 60px; 832 | } 833 | 834 | .category_item_single { 835 | height: 40px; 836 | } 837 | 838 | .category_item_digital { 839 | height: 115px; 840 | } 841 | 842 | .category_item { 843 | border-bottom: 1px dashed #ccc; 844 | overflow: hidden; 845 | } 846 | 847 | .category_item h4 { 848 | width: 20px; 849 | height: 100%; 850 | float: left; 851 | line-height: 20px; 852 | padding: 0 4px; 853 | border-right: 1px solid #F4F8FB; 854 | font-size: 14px; 855 | text-align: center; 856 | background: #F4F8FB; 857 | } 858 | 859 | .category_item_single h4 { 860 | line-height: 16px; 861 | } 862 | 863 | .category_item h4 a,.category_item h4 i { 864 | display: inline-block; 865 | vertical-align: middle; 866 | color: #1A397C; 867 | } 868 | 869 | .category_item h4 i { 870 | height: 100%; 871 | width: 0; 872 | } 873 | 874 | .category_item ul { 875 | height: 100%; 876 | margin-left: 38px; 877 | padding-top: 4px; 878 | } 879 | 880 | .category_item ul li { 881 | width: 33.3%; 882 | height: 18px; 883 | line-height: 18px; 884 | padding: 3px 0; 885 | margin: 2px 0 1px; 886 | float: left; 887 | overflow: hidden; 888 | } 889 | 890 | .category_item ul h5 { 891 | display: inline; 892 | font-size: 14px; 893 | padding-right: 7px; 894 | } 895 | 896 | .category_item ul span a { 897 | border-left: 1px solid #B7D0E4; 898 | margin-left: -1px; 899 | padding: 0 3px; 900 | } 901 | 902 | .category_item ul span a:first-child { 903 | border-left: 0; 904 | } 905 | 906 | .category_item ul a { 907 | color: #013DD9; 908 | } 909 | 910 | .category_item a:hover,.category_item ul a.h { 911 | color: #f60; 912 | } 913 | 914 | .category_ad { 915 | height: 84px; 916 | padding-top: 12px; 917 | text-align: center; 918 | font-size: 0; 919 | clear: left; 920 | } 921 | 922 | .category_ad a { 923 | display: inline-block; 924 | width: 33%; 925 | text-align: center; 926 | } 927 | 928 | .category_ad img { 929 | width: 190px; 930 | height: 70px; 931 | border: 1px solid #CBCCCE; 932 | } 933 | 934 | .grid_ms .col_sub { 935 | width: 310px; 936 | margin-left: -310px; 937 | padding-top: 6px; 938 | float: left; 939 | } 940 | 941 | #help .bd { 942 | height: 48px; 943 | padding: 5px 0; 944 | background: #f4f8fb; 945 | border: 1px solid #CFDAE4; 946 | } 947 | 948 | .help_guest a { 949 | width: 145px; 950 | height: 42px; 951 | margin: 0 2px 0 5px; 952 | padding-top: 6px; 953 | text-align: center; 954 | color: #DA4901; 955 | background-position: 0 -219px; 956 | float: left; 957 | } 958 | 959 | .help_guest a strong { 960 | font-size: 14px; 961 | } 962 | 963 | .help_guest a:hover { 964 | color: #f60; 965 | text-decoration: none; 966 | } 967 | 968 | .help_guest a s { 969 | display: block; 970 | line-height: 15px; 971 | color: #E4A522; 972 | text-decoration: none; 973 | } 974 | 975 | .box_skin_blue .rc_tp { 976 | background-position: -162px -202px; 977 | overflow: hidden; 978 | z-index: 1; 979 | } 980 | 981 | .box_skin_blue .rc_tp b { 982 | background-position: -159px -202px; 983 | } 984 | 985 | .box_skin_blue .rc_bt { 986 | background-position: -162px -205px; 987 | } 988 | 989 | .box_skin_blue .rc_bt b { 990 | background-position: -159px -205px; 991 | } 992 | 993 | #announce { 994 | margin-top: 10px; 995 | margin-bottom: 10px; 996 | } 997 | 998 | .box_skin_blue .hd { 999 | border-left: 1px solid #CFDAE4; 1000 | border-right: 1px solid #CFDAE4; 1001 | } 1002 | 1003 | .tab_holder { 1004 | height: 28px; 1005 | background-repeat: repeat-x; 1006 | background-position: 0 -507px; 1007 | } 1008 | 1009 | .tab_holder li { 1010 | float: left; 1011 | color: #17387D; 1012 | font-size: 14px; 1013 | font-weight: bold; 1014 | text-align: center; 1015 | line-height: 26px; 1016 | border-top: 1px solid #CFDAE4; 1017 | background-repeat: repeat-x; 1018 | background-position: 0 -31px; 1019 | } 1020 | 1021 | .tab_holder.forth li { 1022 | width: 25%; 1023 | } 1024 | 1025 | .tab_holder li span { 1026 | display: block; 1027 | height: 100%; 1028 | border-left: 1px solid #fff; 1029 | border-right: 1px solid #B6D1E6; 1030 | cursor: pointer; 1031 | } 1032 | 1033 | .tab_holder li s { 1034 | display: none; 1035 | } 1036 | 1037 | .tab_holder .tab_holder_cw span { 1038 | border-right: 0; 1039 | } 1040 | 1041 | .tab_holder li a { 1042 | color: #17387D; 1043 | } 1044 | 1045 | .tab_holder li.selected { 1046 | background-position: 0 999em; 1047 | border-top: 1px solid #EEA63A; 1048 | border-bottom: 1px solid white; 1049 | position: relative; 1050 | } 1051 | 1052 | .tab_holder li.selected span { 1053 | border-left: none; 1054 | padding-left: 1px; 1055 | } 1056 | 1057 | .tab_holder li.selected s { 1058 | display: block; 1059 | width: 1px; 1060 | height: 24px; 1061 | background-color: #E2E9EF; 1062 | border-left: 1px solid #F5F9FB; 1063 | border-right: 1px solid #B6D1E6; 1064 | float: right; 1065 | margin-top: -24px; 1066 | } 1067 | 1068 | .tab_holder li.selected.tab_holder_cw s { 1069 | width: 0; 1070 | float: left; 1071 | border-left-color: #e2e9ef; 1072 | border-right-color: #f5f9fb; 1073 | } 1074 | 1075 | .col_sub a:hover,.info_list li .h,.grid_m a:hover { 1076 | color: #f60; 1077 | } 1078 | 1079 | #announce .bd { 1080 | height: 51px; 1081 | border: 1px solid #CFDAE4; 1082 | margin-top: -1px; 1083 | } 1084 | 1085 | #announce .tab_panel { 1086 | padding: 5px 0 0 10px; 1087 | } 1088 | 1089 | .info_list_half li { 1090 | height: 21px; 1091 | width: 47.2%; 1092 | float: left; 1093 | overflow: hidden; 1094 | } 1095 | 1096 | #recom .bd { 1097 | border: 1px solid #CFDAE4; 1098 | margin-top: -1px; 1099 | } 1100 | 1101 | #recom .tab_panel { 1102 | height: 200px; 1103 | padding: 10px 0 0; 1104 | } 1105 | 1106 | .tab_holder.third li { 1107 | width: 35%; 1108 | } 1109 | 1110 | .tab_holder.third .tab_holder_cw { 1111 | width: 30%; 1112 | } 1113 | 1114 | .item_list .item { 1115 | height: 100px; 1116 | width: 33.2%; 1117 | float: left; 1118 | text-align: center; 1119 | } 1120 | 1121 | .item_list .pic img { 1122 | width: 70px; 1123 | height: 70px; 1124 | border: 1px solid #D0DAE4; 1125 | } 1126 | 1127 | .item_list .desc { 1128 | height: 18px; 1129 | line-height: 18px; 1130 | overflow: hidden; 1131 | } 1132 | 1133 | #info { 1134 | margin: 10px auto; 1135 | } 1136 | 1137 | #info .bd { 1138 | height: 349px; 1139 | border: 1px solid #CFDAE4; 1140 | margin-top: -1px; 1141 | } 1142 | 1143 | .tab_panel_news { 1144 | padding: 7px 10px 0; 1145 | } 1146 | 1147 | .info_chn_list { 1148 | height: 15px; 1149 | line-height: 15px; 1150 | padding: 5px 0; 1151 | background: #F4F8FB; 1152 | overflow: hidden; 1153 | } 1154 | 1155 | .info_chn_list li { 1156 | border-left: 1px solid #ccc; 1157 | margin-left: -1px; 1158 | padding: 0 6px 0 10px; 1159 | float: left; 1160 | } 1161 | 1162 | .info_chn_list li a { 1163 | color: #17387D; 1164 | } 1165 | 1166 | .tab_panel_news h4 { 1167 | margin: 7px 0; 1168 | font-weight: normal; 1169 | font-size: 14px; 1170 | } 1171 | 1172 | .tab_panel_news h4 strong { 1173 | font-weight: bold; 1174 | color: #f60; 1175 | } 1176 | 1177 | #info .tab_panel_bd { 1178 | padding-left: 87px; 1179 | } 1180 | 1181 | .pic_news { 1182 | width: 82px; 1183 | margin-left: -87px; 1184 | position: absolute; 1185 | } 1186 | 1187 | .pic_news .desc { 1188 | display: block; 1189 | line-height: 25px; 1190 | text-align: center; 1191 | background: #F4F8FB; 1192 | } 1193 | 1194 | .pic_news img { 1195 | display: block; 1196 | width: 80px; 1197 | height: 80px; 1198 | border: 1px solid #ccc; 1199 | } 1200 | 1201 | #info .word_list { 1202 | height: 36px; 1203 | line-height: 18px; 1204 | margin-top: 8px; 1205 | overflow: hidden; 1206 | } 1207 | 1208 | .tab_panel_news .word_list { 1209 | margin-bottom: 12px; 1210 | } 1211 | 1212 | #info .word_list li { 1213 | color: #cbcbcb; 1214 | float: left; 1215 | width: 33%; 1216 | text-align: center; 1217 | } 1218 | 1219 | #info .word_list li a { 1220 | display: inline-block; 1221 | } 1222 | 1223 | #info .word_list_s li { 1224 | width: 20%; 1225 | } 1226 | 1227 | #info .info_list_half { 1228 | margin-top: -4px; 1229 | } 1230 | 1231 | #expressway .bd { 1232 | height: 121px; 1233 | border: 1px solid #CFDAE4; 1234 | margin-top: -1px; 1235 | } 1236 | 1237 | .exp_list { 1238 | padding: 10px 0 0 20px; 1239 | font-family: "宋体"; 1240 | } 1241 | 1242 | .exp_list li { 1243 | padding: 0 0 5px; 1244 | } 1245 | 1246 | .exp_list .with_btn { 1247 | padding-left: 48px; 1248 | } 1249 | 1250 | .exp_list .with_btn a { 1251 | display: block; 1252 | width: 89px; 1253 | height: 20px; 1254 | text-indent: -2000px; 1255 | overflow: hidden; 1256 | background: url(../image/taobao/a_btn.png); 1257 | } 1258 | 1259 | .exp_more { 1260 | width: 80%; 1261 | text-align: right; 1262 | margin-top: -40px; 1263 | } 1264 | 1265 | .exp_more a { 1266 | color: #36C; 1267 | text-decoration: underline; 1268 | } 1269 | 1270 | .fpad_sub { 1271 | padding: 5px; 1272 | margin-top: 10px; 1273 | background: #EBF5FA; 1274 | } 1275 | 1276 | .grid_m { 1277 | margin-left: 1px; 1278 | clear: both; 1279 | padding-top: 10px; 1280 | } 1281 | 1282 | #p4p .hd h3 { 1283 | height: 28px; 1284 | line-height: 28px; 1285 | padding-left: 10px; 1286 | background-position: 0 -31px; 1287 | background-repeat: repeat-x; 1288 | border-top: 1px solid #CFDAE4; 1289 | font-size: 14px; 1290 | } 1291 | 1292 | #p4p .bd { 1293 | border: 1px solid #CFDAE4; 1294 | padding: 10px 0; 1295 | } 1296 | 1297 | #p4p .item_list { 1298 | height: 160px; 1299 | padding-left: 5px; 1300 | } 1301 | 1302 | #p4p .item_list li { 1303 | width: 12.4%; 1304 | float: left; 1305 | } 1306 | 1307 | #p4p .bd .pic { 1308 | font-size: 0; 1309 | text-align: center; 1310 | } 1311 | 1312 | #p4p .bd .pic img { 1313 | width: 100px; 1314 | height: 100px; 1315 | border: 1px solid #ccc; 1316 | } 1317 | 1318 | #p4p .bd .desc { 1319 | width: 100px; 1320 | height: 32px; 1321 | line-height: 16px; 1322 | margin: 0 auto; 1323 | overflow: hidden; 1324 | } 1325 | 1326 | #p4p .bd .price { 1327 | width: 100px; 1328 | margin: 0 auto; 1329 | } 1330 | 1331 | #p4p .bd .price strong { 1332 | padding-left: 16px; 1333 | color: #F50; 1334 | font-size: 14px; 1335 | background-position: -155px -219px; 1336 | } 1337 | 1338 | .fpad_banner { 1339 | height: 90px; 1340 | padding: 5px 11px; 1341 | margin: 10px 0; 1342 | background: #EBF5FA; 1343 | } 1344 | 1345 | .box_skin_orange .rc_tp { 1346 | background-position: -162px -195px; 1347 | } 1348 | 1349 | .box_skin_orange .rc_tp b { 1350 | background-position: -159px -195px; 1351 | } 1352 | 1353 | .box_skin_orange .rc_bt { 1354 | background-position: -162px -198px; 1355 | } 1356 | 1357 | .box_skin_orange .rc_bt b { 1358 | background-position: -159px -198px; 1359 | } 1360 | 1361 | .box_skin_orange .bd { 1362 | height: 133px; 1363 | border: 1px solid #FBD686; 1364 | padding: 5px; 1365 | background-color: #FFF8E8; 1366 | } 1367 | 1368 | .links_panel { 1369 | height: 122px; 1370 | padding-top: 8px; 1371 | border: 1px solid #FFF3D9; 1372 | background-color: white; 1373 | float: left; 1374 | } 1375 | 1376 | .links_panel_safe,.links_panel_payment,.links_panel_service { 1377 | width: 20%; 1378 | } 1379 | 1380 | .links_panel_guard { 1381 | width: 37.5%; 1382 | margin: 0 .5%; 1383 | } 1384 | 1385 | .links_panel_service { 1386 | margin-left: .5%; 1387 | } 1388 | 1389 | .links_panel h4 { 1390 | margin-bottom: 6px; 1391 | font-size: 16px; 1392 | text-align: center; 1393 | color: #17387D; 1394 | line-height: 22px; 1395 | } 1396 | 1397 | .links_panel ul { 1398 | padding-left: 44px; 1399 | } 1400 | 1401 | .links_panel li a { 1402 | display: block; 1403 | line-height: 22px; 1404 | padding-left: 15px; 1405 | background-position: -162px -281px; 1406 | zoom: 1; 1407 | } 1408 | 1409 | .links_panel_guard ul { 1410 | padding-left: 67px; 1411 | overflow: hidden; 1412 | zoom: 1; 1413 | } 1414 | 1415 | .links_panel_guard li { 1416 | width: 49.5%; 1417 | float: left; 1418 | } 1419 | 1420 | .zxx_footer { 1421 | padding: 35px 0; 1422 | line-height: 20px; 1423 | text-align: center; 1424 | color: #333; 1425 | } 1426 | 1427 | .zxx_footer a { 1428 | color: #34538b; 1429 | text-decoration: underline; 1430 | } -------------------------------------------------------------------------------- /example/dist/css/taobao.css: -------------------------------------------------------------------------------- 1 | /*copyright c by zhangxinxu 2010-01-28 v1.0*/ 2 | /*http://www.zhangxinxu*/ 3 | /*无hack 自适应优化版本，一些CSS reset取自原淘宝首页，其余均自己编写*/ 4 | /*仅供学习交流参考*/ 5 | @charset "utf-8"; 6 | 7 | body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body,button,input,select,textarea { 13 | font: 12px/1.5 tahoma,arial,simsun,sans-serif; 14 | } 15 | 16 | h1,h2,h3,h4,h5,h6 { 17 | font-size: 100%; 18 | } 19 | 20 | address,cite,dfn,em,var { 21 | font-style: normal; 22 | } 23 | 24 | code,kbd,pre,samp { 25 | font-family: courier new, courier, monospace; 26 | } 27 | 28 | small { 29 | font-size: 12px; 30 | } 31 | 32 | ul,ol { 33 | list-style: none; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: #3e3e3e; 39 | } 40 | 41 | a:hover { 42 | text-decoration: underline; 43 | } 44 | 45 | sup { 46 | vertical-align: text-top; 47 | } 48 | 49 | sub { 50 | vertical-align: text-bottom; 51 | } 52 | 53 | legend { 54 | color: #000; 55 | } 56 | 57 | fieldset,img { 58 | border: 0; 59 | } 60 | 61 | button,input,select,textarea { 62 | font-size: 100%; 63 | } 64 | 65 | table { 66 | border-collapse: collapse; 67 | border-spacing: 0; 68 | } 69 | 70 | body { 71 | background: white; 72 | } 73 | 74 | .l { 75 | float: left; 76 | } 77 | 78 | .r { 79 | float: right; 80 | } 81 | 82 | .dn { 83 | display: none; 84 | } 85 | 86 | .g1 { 87 | width: 100%; 88 | border-top: 1px solid #f9f9f9; 89 | border-bottom: 1px solid #d2d2d2; 90 | background: #fbfbfb; 91 | position: absolute; 92 | left: 0; 93 | right: 0; 94 | } 95 | 96 | .g2 { 97 | line-height: 4px; 98 | border-top: 2px solid #f9f9f9; 99 | background: #f5f5f5; 100 | border-bottom: 4px solid #f2f2f2; 101 | margin-top: 2px; 102 | } 103 | 104 | .g3 { 105 | line-height: 4px; 106 | border-top: 3px solid #efefef; 107 | background: #ebebeb; 108 | border-bottom: 4px solid #e8e8e8; 109 | } 110 | 111 | #page { 112 | margin-left: auto; 113 | margin-right: auto; 114 | } 115 | 116 | .p_w { 117 | width: 950px; 118 | } 119 | 120 | .quick_link li,.quick_link li s,.search_tablist li,.search_tablist .selected a,.search_panel .rc_tp,.search_btn,.product_list li,.product_list li s,.product_list li a:hover,.product_list .t_mall span,.tb_slide_triggers li,#product .rc_bt,#mall .hd h3 s,.info_list li,.mall_prev,.mall_next,.box .rc_tp,.box .rc_bt,.box .rc_tp b,.box .rc_bt b,.mall_brands_bd,.mall_brands_bd s,.mall_brands_content a,#mall .bt_bg,.ks_switchable_content i,#category .hd h3 a,#category .hd,.category_links li,.category_chn li,.help_guest a,.tab_holder li,.tab_holder,.box_skin_blue .hd h3,#p4p .bd .price strong,.links_panel li a { 121 | background-image: url(../image/taobao.png); 122 | background-repeat: no-repeat; 123 | } 124 | 125 | #header { 126 | background: url(../image/taobao/top.jpg) no-repeat 0 65px; 127 | } 128 | 129 | #nav { 130 | height: 25px; 131 | line-height: 25px; 132 | position: relative; 133 | } 134 | 135 | #nav a { 136 | color: #404040; 137 | } 138 | 139 | #nav a:hover { 140 | color: #f60; 141 | } 142 | 143 | .quick_link li { 144 | background-position: -166px -320px; 145 | padding-right: 8px; 146 | padding-left: 24px; 147 | float: left; 148 | } 149 | 150 | .quick_link .mytaobao { 151 | background-position: -999em 0; 152 | } 153 | 154 | .quick_link li s { 155 | width: 15px; 156 | height: 12px; 157 | font-size: 0; 158 | margin-left: -15px; 159 | position: absolute; 160 | top: 6px; 161 | cursor: pointer; 162 | } 163 | 164 | .quick_link .mytaobao s { 165 | background-position: -149px -352px; 166 | } 167 | 168 | .quick_link .cart s { 169 | background-position: -149px -326px; 170 | } 171 | 172 | .quick_link .favorite s { 173 | background-position: -149px -364px; 174 | } 175 | 176 | .quick_link .forum { 177 | padding-left: 8px; 178 | } 179 | 180 | .quick_link .help s { 181 | background-position: -149px -339px; 182 | } 183 | 184 | #logo { 185 | height: 68px; 186 | padding-top: 18px; 187 | font-size: 0; 188 | } 189 | 190 | #search { 191 | width: 650px; 192 | margin-top: -55px; 193 | padding-bottom: 25px; 194 | } 195 | 196 | .search_tablist { 197 | height: 27px; 198 | position: relative; 199 | } 200 | 201 | .search_tablist li { 202 | background-position: 0 -999em; 203 | line-height: 26px; 204 | float: left; 205 | } 206 | 207 | .search_tablist li a { 208 | display: block; 209 | color: #153679; 210 | padding: 1px 17px 0 18px; 211 | } 212 | 213 | .search_tablist .selected { 214 | background-position: right -590px; 215 | padding-right: 5px; 216 | } 217 | 218 | .search_tablist .selected a { 219 | background-position: 0 -590px; 220 | font-weight: bold; 221 | font-size: 14px; 222 | } 223 | 224 | .search_options { 225 | float: right; 226 | padding-top: 7px; 227 | line-height: 1.3; 228 | } 229 | 230 | .search_options a { 231 | color: #153679; 232 | } 233 | 234 | .search_panel { 235 | height: 34px; 236 | margin-right: 56px; 237 | margin-top: -2px; 238 | padding: 7px 0 0 5px; 239 | background: white url(../image/taobao.png) repeat-x 0 -549px; 240 | border: 1px solid #9EAAB6; 241 | } 242 | 243 | .search_panel .rc_tp { 244 | width: 5px; 245 | height: 4px; 246 | margin-top: -8px; 247 | margin-right: -1px; 248 | background-position: -158px -190px; 249 | font-size: 0; 250 | float: right; 251 | position: relative; 252 | } 253 | 254 | .search_box { 255 | display: block; 256 | height: 27px; 257 | margin-right: 7px; 258 | border-style: solid; 259 | border-width: 1px 0 1px 1px; 260 | border-color: #585856 #585856 #B6B7B9; 261 | background: white; 262 | position: relative; 263 | } 264 | 265 | .search_box label { 266 | color: #999; 267 | line-height: 21px; 268 | position: absolute; 269 | left: 3px; 270 | top: 3px; 271 | cursor: text; 272 | } 273 | 274 | .search_box input { 275 | width: 440px; 276 | height: 15px; 277 | line-height: 15px; 278 | padding: 6px 3px 4px; 279 | border: 0; 280 | } 281 | 282 | .search_btn { 283 | width: 135px; 284 | height: 29px; 285 | font-size: 16px; 286 | font-weight: bold; 287 | color: white; 288 | background-color: #FB8502; 289 | background-position: 0 -296px; 290 | border: 0; 291 | position: absolute; 292 | right: 0; 293 | top: -1px; 294 | cursor: pointer; 295 | } 296 | 297 | .bt_shadow { 298 | height: 1px; 299 | overflow: hidden; 300 | background: #e5e5e5; 301 | margin: 0 57px 0 1px; 302 | clear: both; 303 | } 304 | 305 | #content { 306 | clear: both; 307 | } 308 | 309 | .grid_ms { 310 | border-top: 3px solid #E97507; 311 | zoom: 1; 312 | } 313 | 314 | .col_mail { 315 | width: 100%; 316 | float: left; 317 | } 318 | 319 | .main_wrap { 320 | margin-right: 320px; 321 | } 322 | 323 | #product { 324 | width: 158px; 325 | height: 335px; 326 | margin: -2px auto 0 -1px; 327 | float: left; 328 | } 329 | 330 | .mege_menu { 331 | width: 147px; 332 | height: 330px; 333 | padding-top: 1px; 334 | border: 1px solid #E56A02; 335 | position: relative; 336 | } 337 | 338 | .product_list { 339 | border-top: 1px solid #FCD687; 340 | } 341 | 342 | .product_list li { 343 | height: 28px; 344 | background-position: 0 -354px; 345 | background-color: #FBFCFC; 346 | } 347 | 348 | .product_list li a { 349 | display: block; 350 | line-height: 27px; 351 | padding-left: 37px; 352 | position: relative; 353 | zoom: 1; 354 | } 355 | 356 | .product_list li a:hover { 357 | text-decoration: none; 358 | color: #f60; 359 | background-position: 0 -410px; 360 | } 361 | 362 | .product_list li.s { 363 | height: 29px; 364 | background-color: #FEF2D8; 365 | background-position: 0 -325px; 366 | } 367 | 368 | .product_list li.s a { 369 | font-size: 14px; 370 | color: #DA4901; 371 | line-height: 28px; 372 | } 373 | 374 | .product_list li.s a:hover { 375 | background: none; 376 | text-decoration: underline; 377 | color: #f60; 378 | } 379 | 380 | .product_list li strong { 381 | font-weight: normal; 382 | } 383 | 384 | .product_list li.s strong { 385 | font-weight: bold; 386 | } 387 | 388 | .product_list li s { 389 | width: 16px; 390 | height: 16px; 391 | position: absolute; 392 | margin-left: -27px; 393 | top: 5px; 394 | } 395 | 396 | .product_list li.s s { 397 | width: 20px; 398 | height: 20px; 399 | margin-left: -29px; 400 | top: 4px; 401 | } 402 | 403 | .product_list .t_mall strong,.product_list .t_mall span { 404 | width: 78px; 405 | height: 18px; 406 | position: absolute; 407 | } 408 | 409 | .product_list .t_mall strong { 410 | line-height: 16px; 411 | top: 5px; 412 | cursor: pointer; 413 | } 414 | 415 | .product_list .t_mall span { 416 | background-position: 0 -109px; 417 | left: 0; 418 | top: 0; 419 | } 420 | 421 | .product_list .t_mall s { 422 | background-position: -147px -113px; 423 | } 424 | 425 | .product_list .t_3c s { 426 | background-position: -127px -133px; 427 | } 428 | 429 | .product_list .t_news s { 430 | background-position: -147px -133px; 431 | } 432 | 433 | .product_list .t_digi s { 434 | background-position: -119px -185px; 435 | } 436 | 437 | .product_list .t_jipiao s { 438 | background-position: -118px -153px; 439 | } 440 | 441 | .product_list .t_caipiao s { 442 | background-position: -135px -185px; 443 | } 444 | 445 | .product_list .t_jianghu s { 446 | background-position: -151px -169px; 447 | } 448 | 449 | .product_list .t_shiyi s { 450 | background-position: -151px -153px; 451 | } 452 | 453 | .product_list .t_garden s { 454 | background-position: -119px -168px; 455 | } 456 | 457 | .product_list .t_wangwang s { 458 | background-position: -139px -203px; 459 | } 460 | 461 | .product_list .t_wap s { 462 | background-position: -135px -153px; 463 | } 464 | 465 | #product .more { 466 | line-height: 17px; 467 | padding: 0 10px; 468 | background-color: #F4F9FD; 469 | text-align: right; 470 | } 471 | 472 | #product .more a { 473 | color: #7E93A5; 474 | } 475 | 476 | #product .more a:hover { 477 | color: #f60; 478 | } 479 | 480 | #product .rc_bt { 481 | display: block; 482 | height: 4px; 483 | font-size: 0; 484 | margin-top: -4px; 485 | background-position: -163px -209px; 486 | position: relative; 487 | } 488 | 489 | #product .r_shadow { 490 | display: block; 491 | height: 331px; 492 | width: 1px; 493 | margin-left: 149px; 494 | margin-top: -331px; 495 | background: #f7e5d2; 496 | border-left: 1px solid #f5ddc3; 497 | border-right: 1px solid #fcf6f0; 498 | } 499 | 500 | .box_animate { 501 | margin-left: 158px; 502 | padding-top: 6px; 503 | } 504 | 505 | .box_skin_naked { 506 | border: 1px solid #B6D1E6; 507 | zoom: 1; 508 | } 509 | 510 | .box_skin_naked .loading { 511 | background: #EBF5FA url(../image/taobao/loading.gif) no-repeat 50% 50%; 512 | } 513 | 514 | .tb_slide { 515 | position: relative; 516 | height: 150px; 517 | overflow: hidden; 518 | } 519 | 520 | .tb_slide_list { 521 | width: 100%; 522 | position: absolute; 523 | top: 0; 524 | left: 0; 525 | } 526 | 527 | .tb_slide_list li { 528 | height: 150px; 529 | overflow: hidden; 530 | } 531 | 532 | .tb_slide_list li img { 533 | width: 100%; 534 | } 535 | 536 | .tb_slide_triggers { 537 | height: 18px; 538 | position: absolute; 539 | bottom: 5px; 540 | right: 5px; 541 | padding-top: 2px; 542 | } 543 | 544 | .tb_slide_triggers li { 545 | float: left; 546 | width: 16px; 547 | height: 16px; 548 | background-position: -131px -114px; 549 | background-color: #fcf2cf; 550 | border: 1px solid #f47500; 551 | color: #d94b01; 552 | text-align: center; 553 | line-height: 16px; 554 | margin-left: 3px; 555 | cursor: pointer; 556 | font-size: 11px; 557 | } 558 | 559 | .tb_slide_triggers li.current { 560 | width: 18px; 561 | height: 18px; 562 | line-height: 18px; 563 | background-position: -113px -114px; 564 | background-color: #ff9415; 565 | margin-top: -2px; 566 | color: #fff; 567 | font-weight: bold; 568 | } 569 | 570 | #mall .hd { 571 | height: 20px; 572 | border-left: 1px solid #ccc; 573 | border-right: 1px solid #ccc; 574 | padding: 14px 10px 4px 8px; 575 | } 576 | 577 | #mall .hd h3 { 578 | color: #B60F23; 579 | line-height: 17px; 580 | float: left; 581 | position: relative; 582 | } 583 | 584 | #mall .hd h3 s { 585 | width: 131px; 586 | height: 17px; 587 | background-position: 0 -92px; 588 | position: absolute; 589 | left: 0; 590 | top: 0; 591 | cursor: pointer; 592 | } 593 | 594 | .info_list li { 595 | padding-left: 8px; 596 | line-height: 21px; 597 | background-position: -164px -408px; 598 | } 599 | 600 | #mall .info_list li { 601 | float: left; 602 | margin-left: 10px; 603 | } 604 | 605 | #mall .info_list li a { 606 | color: #9a0002; 607 | } 608 | 609 | #mall .bd { 610 | height: 121px; 611 | border: 1px solid #ccc; 612 | border-top: 0; 613 | padding: 5px 10px 8px; 614 | position: relative; 615 | } 616 | 617 | #mall .bt_bg { 618 | display: block; 619 | height: 70px; 620 | margin-top: -70px; 621 | background-position: 0 -438px; 622 | background-repeat: repeat-x; 623 | } 624 | 625 | .mall_prev,.mall_next { 626 | width: 22px; 627 | height: 34px; 628 | outline: none; 629 | position: absolute; 630 | bottom: 31px; 631 | } 632 | 633 | .mall_prev { 634 | background-position: -68px -185px; 635 | left: 3px; 636 | } 637 | 638 | .mall_next { 639 | background-position: -90px -185px; 640 | right: 3px; 641 | } 642 | 643 | .box .rc_tp,.box .rc_bt { 644 | display: block; 645 | height: 4px; 646 | font-size: 0; 647 | position: relative; 648 | } 649 | 650 | .box .rc_tp { 651 | margin-bottom: -4px; 652 | background-position: -162px -264px; 653 | } 654 | 655 | .box .rc_bt { 656 | margin-top: -4px; 657 | background-position: -162px -267px; 658 | } 659 | 660 | .box .rc_tp b,.box .rc_bt b { 661 | float: right; 662 | width: 4px; 663 | height: 4px; 664 | } 665 | 666 | .box .rc_tp b { 667 | background-position: -159px -264px; 668 | } 669 | 670 | .box .rc_bt b { 671 | background-position: -159px -267px; 672 | } 673 | 674 | .mall_brands { 675 | position: relative; 676 | zoom: 1; 677 | } 678 | 679 | .mall_brands_bd { 680 | height: 30px; 681 | padding: 1px 0; 682 | background-repeat: repeat-x; 683 | border: 1px solid #DBDBDB; 684 | } 685 | 686 | .mall_brands_bd s { 687 | width: 4px; 688 | height: 4px; 689 | font-size: 0; 690 | background-position: -112px -215px; 691 | position: absolute; 692 | top: 14px; 693 | } 694 | 695 | .mall_brands_prev { 696 | left: 9px; 697 | } 698 | 699 | .mall_brands_next { 700 | right: 9px; 701 | } 702 | 703 | .mall_brands_content { 704 | width: 408px; 705 | height: 30px; 706 | margin: 0 auto; 707 | overflow: hidden; 708 | position: relative; 709 | } 710 | 711 | .mall_brands_content ol { 712 | width: 1242px; 713 | position: absolute; 714 | } 715 | 716 | .mall_brands_content li { 717 | width: 414px; 718 | margin-left: -2px; 719 | float: left; 720 | overflow: hidden; 721 | } 722 | 723 | .mall_brands_content a { 724 | padding-left: 2px; 725 | background-position: -165px -371px; 726 | float: left; 727 | } 728 | 729 | .mall_brands_content a img { 730 | width: 80px; 731 | height: 30px; 732 | } 733 | 734 | .mall_content { 735 | width: 414px; 736 | height: 72px; 737 | margin: 0 auto; 738 | padding-top: 14px; 739 | position: relative; 740 | overflow: hidden; 741 | } 742 | 743 | .mall_content ol { 744 | width: 1248px; 745 | position: absolute; 746 | } 747 | 748 | .mall_content li { 749 | width: 416px; 750 | float: left; 751 | font-size: 0; 752 | text-align: center; 753 | overflow: hidden; 754 | } 755 | 756 | .ks_switchable_content i { 757 | display: inline-block; 758 | width: 11px; 759 | height: 21px; 760 | background-position: -113px -132px; 761 | } 762 | 763 | .ks_switchable_content i.m { 764 | margin-right: 4px; 765 | } 766 | 767 | #category { 768 | clear: both; 769 | padding-top: 10px; 770 | zoom: 1; 771 | } 772 | 773 | #category .hd { 774 | height: 28px; 775 | line-height: 28px; 776 | border: 1px solid #CFDAE4; 777 | background-color: #F5F9FB; 778 | background-position: 0 -31px; 779 | background-repeat: repeat-x; 780 | position: relative; 781 | } 782 | 783 | #category .hd h3 a { 784 | display: block; 785 | width: 89px; 786 | line-height: 26px; 787 | margin: 1px; 788 | font-size: 14px; 789 | color: #F60; 790 | background-color: #E6EFF6; 791 | background-position: 0 -145px; 792 | text-align: center; 793 | } 794 | 795 | .category_links { 796 | position: absolute; 797 | top: 0; 798 | left: 98px; 799 | overflow: hidden; 800 | } 801 | 802 | .category_links li,.category_chn li { 803 | float: left; 804 | margin-left: -1px; 805 | padding: 0 8px; 806 | background-position: -166px -340px; 807 | } 808 | 809 | .category_chn li a,.category_links li a { 810 | color: #17387D; 811 | } 812 | 813 | .category_chn { 814 | font-weight: bold; 815 | position: absolute; 816 | right: 2px; 817 | top: 0; 818 | overflow: hidden; 819 | } 820 | 821 | #category .bd { 822 | border: 1px solid #CFDAE4; 823 | margin-top: -1px; 824 | } 825 | 826 | .category_item_fashion,.category_item_life,.category_item_sport,.category_item_other { 827 | height: 87px; 828 | } 829 | 830 | .category_item_decoration,.category_item_virtual { 831 | height: 60px; 832 | } 833 | 834 | .category_item_single { 835 | height: 40px; 836 | } 837 | 838 | .category_item_digital { 839 | height: 115px; 840 | } 841 | 842 | .category_item { 843 | border-bottom: 1px dashed #ccc; 844 | overflow: hidden; 845 | } 846 | 847 | .category_item h4 { 848 | width: 20px; 849 | height: 100%; 850 | float: left; 851 | line-height: 20px; 852 | padding: 0 4px; 853 | border-right: 1px solid #F4F8FB; 854 | font-size: 14px; 855 | text-align: center; 856 | background: #F4F8FB; 857 | } 858 | 859 | .category_item_single h4 { 860 | line-height: 16px; 861 | } 862 | 863 | .category_item h4 a,.category_item h4 i { 864 | display: inline-block; 865 | vertical-align: middle; 866 | color: #1A397C; 867 | } 868 | 869 | .category_item h4 i { 870 | height: 100%; 871 | width: 0; 872 | } 873 | 874 | .category_item ul { 875 | height: 100%; 876 | padding-left: 38px; 877 | padding-top: 4px; 878 | } 879 | 880 | .category_item ul li { 881 | width: 33.3%; 882 | height: 18px; 883 | line-height: 18px; 884 | padding: 3px 0; 885 | margin: 2px 0 1px; 886 | float: left; 887 | overflow: hidden; 888 | } 889 | 890 | .category_item ul h5 { 891 | display: inline; 892 | font-size: 14px; 893 | padding-right: 7px; 894 | } 895 | 896 | .category_item ul span a { 897 | border-left: 1px solid #B7D0E4; 898 | margin-left: -1px; 899 | padding: 0 3px; 900 | } 901 | 902 | .category_item ul span a:first-child { 903 | border-left: 0; 904 | } 905 | 906 | .category_item ul a { 907 | color: #013DD9; 908 | } 909 | 910 | .category_item a:hover,.category_item ul a.h { 911 | color: #f60; 912 | } 913 | 914 | .category_ad { 915 | height: 84px; 916 | padding-top: 12px; 917 | text-align: center; 918 | font-size: 0; 919 | clear: both; 920 | } 921 | 922 | .category_ad a { 923 | display: inline-block; 924 | width: 33%; 925 | text-align: center; 926 | } 927 | 928 | .category_ad img { 929 | width: 190px; 930 | height: 70px; 931 | border: 1px solid #CBCCCE; 932 | } 933 | 934 | .grid_ms .col_sub { 935 | width: 310px; 936 | margin-left: -310px; 937 | padding-top: 6px; 938 | float: left; 939 | } 940 | 941 | #help .bd { 942 | height: 48px; 943 | padding: 5px 0; 944 | background: #f4f8fb; 945 | border: 1px solid #CFDAE4; 946 | } 947 | 948 | .help_guest a { 949 | width: 145px; 950 | height: 42px; 951 | margin: 0 2px 0 5px; 952 | padding-top: 6px; 953 | text-align: center; 954 | color: #DA4901; 955 | background-position: 0 -219px; 956 | float: left; 957 | } 958 | 959 | .help_guest a strong { 960 | font-size: 14px; 961 | } 962 | 963 | .help_guest a:hover { 964 | color: #f60; 965 | text-decoration: none; 966 | } 967 | 968 | .help_guest a s { 969 | display: block; 970 | line-height: 15px; 971 | color: #E4A522; 972 | text-decoration: none; 973 | } 974 | 975 | .box_skin_blue .rc_tp { 976 | background-position: -162px -202px; 977 | overflow: hidden; 978 | z-index: 1; 979 | } 980 | 981 | .box_skin_blue .rc_tp b { 982 | background-position: -159px -202px; 983 | } 984 | 985 | .box_skin_blue .rc_bt { 986 | background-position: -162px -205px; 987 | } 988 | 989 | .box_skin_blue .rc_bt b { 990 | background-position: -159px -205px; 991 | } 992 | 993 | #announce { 994 | margin-top: 10px; 995 | margin-bottom: 10px; 996 | } 997 | 998 | .box_skin_blue .hd { 999 | border-left: 1px solid #CFDAE4; 1000 | border-right: 1px solid #CFDAE4; 1001 | } 1002 | 1003 | .tab_holder { 1004 | height: 28px; 1005 | background-repeat: repeat-x; 1006 | background-position: 0 -507px; 1007 | } 1008 | 1009 | .tab_holder li { 1010 | float: left; 1011 | color: #17387D; 1012 | font-size: 14px; 1013 | font-weight: bold; 1014 | text-align: center; 1015 | line-height: 26px; 1016 | border-top: 1px solid #CFDAE4; 1017 | background-repeat: repeat-x; 1018 | background-position: 0 -31px; 1019 | } 1020 | 1021 | .tab_holder.forth li { 1022 | width: 25%; 1023 | } 1024 | 1025 | .tab_holder li span { 1026 | display: block; 1027 | height: 100%; 1028 | border-left: 1px solid #fff; 1029 | border-right: 1px solid #B6D1E6; 1030 | cursor: pointer; 1031 | } 1032 | 1033 | .tab_holder li s { 1034 | display: none; 1035 | } 1036 | 1037 | .tab_holder .tab_holder_cw span { 1038 | border-right: 0; 1039 | } 1040 | 1041 | .tab_holder li a { 1042 | color: #17387D; 1043 | } 1044 | 1045 | .tab_holder li.selected { 1046 | background-position: 0 999em; 1047 | border-top: 1px solid #EEA63A; 1048 | border-bottom: 1px solid white; 1049 | position: relative; 1050 | } 1051 | 1052 | .tab_holder li.selected span { 1053 | border-left: none; 1054 | padding-left: 1px; 1055 | } 1056 | 1057 | .tab_holder li.selected s { 1058 | display: block; 1059 | width: 1px; 1060 | height: 24px; 1061 | background-color: #E2E9EF; 1062 | border-left: 1px solid #F5F9FB; 1063 | border-right: 1px solid #B6D1E6; 1064 | float: right; 1065 | margin-top: -24px; 1066 | } 1067 | 1068 | .tab_holder li.selected.tab_holder_cw s { 1069 | width: 0; 1070 | float: left; 1071 | border-left-color: #e2e9ef; 1072 | border-right-color: #f5f9fb; 1073 | } 1074 | 1075 | .col_sub a:hover,.info_list li .h,.grid_m a:hover { 1076 | color: #f60; 1077 | } 1078 | 1079 | #announce .bd { 1080 | height: 51px; 1081 | border: 1px solid #CFDAE4; 1082 | margin-top: -1px; 1083 | } 1084 | 1085 | #announce .tab_panel { 1086 | padding: 5px 0 0 10px; 1087 | } 1088 | 1089 | .info_list_half li { 1090 | height: 21px; 1091 | width: 47.2%; 1092 | float: left; 1093 | overflow: hidden; 1094 | } 1095 | 1096 | #recom .bd { 1097 | border: 1px solid #CFDAE4; 1098 | margin-top: -1px; 1099 | } 1100 | 1101 | #recom .tab_panel { 1102 | height: 200px; 1103 | padding: 10px 0 0; 1104 | } 1105 | 1106 | .tab_holder.third li { 1107 | width: 35%; 1108 | } 1109 | 1110 | .tab_holder.third .tab_holder_cw { 1111 | width: 30%; 1112 | } 1113 | 1114 | .item_list .item { 1115 | height: 100px; 1116 | width: 33.2%; 1117 | float: left; 1118 | text-align: center; 1119 | } 1120 | 1121 | .item_list .pic img { 1122 | width: 70px; 1123 | height: 70px; 1124 | border: 1px solid #D0DAE4; 1125 | } 1126 | 1127 | .item_list .desc { 1128 | height: 18px; 1129 | line-height: 18px; 1130 | overflow: hidden; 1131 | } 1132 | 1133 | #info { 1134 | margin: 10px auto; 1135 | } 1136 | 1137 | #info .bd { 1138 | height: 349px; 1139 | border: 1px solid #CFDAE4; 1140 | margin-top: -1px; 1141 | } 1142 | 1143 | .tab_panel_news { 1144 | padding: 7px 10px 0; 1145 | } 1146 | 1147 | .info_chn_list { 1148 | height: 15px; 1149 | line-height: 15px; 1150 | padding: 5px 0; 1151 | background: #F4F8FB; 1152 | overflow: hidden; 1153 | } 1154 | 1155 | .info_chn_list li { 1156 | border-left: 1px solid #ccc; 1157 | margin-left: -1px; 1158 | padding: 0 6px 0 10px; 1159 | float: left; 1160 | } 1161 | 1162 | .info_chn_list li a { 1163 | color: #17387D; 1164 | } 1165 | 1166 | .tab_panel_news h4 { 1167 | margin: 7px 0; 1168 | font-weight: normal; 1169 | font-size: 14px; 1170 | } 1171 | 1172 | .tab_panel_news h4 strong { 1173 | font-weight: bold; 1174 | color: #f60; 1175 | } 1176 | 1177 | #info .tab_panel_bd { 1178 | padding-left: 87px; 1179 | } 1180 | 1181 | .pic_news { 1182 | width: 82px; 1183 | margin-left: -87px; 1184 | position: absolute; 1185 | } 1186 | 1187 | .pic_news .desc { 1188 | display: block; 1189 | line-height: 25px; 1190 | text-align: center; 1191 | background: #F4F8FB; 1192 | } 1193 | 1194 | .pic_news img { 1195 | display: block; 1196 | width: 80px; 1197 | height: 80px; 1198 | border: 1px solid #ccc; 1199 | } 1200 | 1201 | #info .word_list { 1202 | height: 36px; 1203 | line-height: 18px; 1204 | margin-top: 8px; 1205 | overflow: hidden; 1206 | } 1207 | 1208 | .tab_panel_news .word_list { 1209 | margin-bottom: 12px; 1210 | } 1211 | 1212 | #info .word_list li { 1213 | color: #cbcbcb; 1214 | float: left; 1215 | width: 33%; 1216 | text-align: center; 1217 | } 1218 | 1219 | #info .word_list li a { 1220 | display: inline-block; 1221 | } 1222 | 1223 | #info .word_list_s li { 1224 | width: 20%; 1225 | } 1226 | 1227 | #info .info_list_half { 1228 | margin-top: -4px; 1229 | } 1230 | 1231 | #expressway .bd { 1232 | height: 121px; 1233 | border: 1px solid #CFDAE4; 1234 | margin-top: -1px; 1235 | } 1236 | 1237 | .exp_list { 1238 | padding: 10px 0 0 20px; 1239 | font-family: simsun; 1240 | } 1241 | 1242 | .exp_list li { 1243 | padding: 0 0 5px; 1244 | } 1245 | 1246 | .exp_list .with_btn { 1247 | padding-left: 48px; 1248 | } 1249 | 1250 | .exp_list .with_btn a { 1251 | display: block; 1252 | width: 89px; 1253 | height: 20px; 1254 | text-indent: -2000px; 1255 | overflow: hidden; 1256 | background: url(../image/taobao/a_btn.png); 1257 | } 1258 | 1259 | .exp_more { 1260 | width: 80%; 1261 | text-align: right; 1262 | margin-top: -40px; 1263 | } 1264 | 1265 | .exp_more a { 1266 | color: #36C; 1267 | text-decoration: underline; 1268 | } 1269 | 1270 | .fpad_sub { 1271 | padding: 5px; 1272 | margin-top: 10px; 1273 | background: #EBF5FA; 1274 | } 1275 | 1276 | .grid_m { 1277 | margin-left: 1px; 1278 | clear: both; 1279 | padding-top: 10px; 1280 | } 1281 | 1282 | #p4p .hd h3 { 1283 | height: 28px; 1284 | line-height: 28px; 1285 | padding-left: 10px; 1286 | background-position: 0 -31px; 1287 | background-repeat: repeat-x; 1288 | border-top: 1px solid #CFDAE4; 1289 | font-size: 14px; 1290 | } 1291 | 1292 | #p4p .bd { 1293 | border: 1px solid #CFDAE4; 1294 | padding: 10px 0; 1295 | } 1296 | 1297 | #p4p .item_list { 1298 | height: 160px; 1299 | padding-left: 5px; 1300 | } 1301 | 1302 | #p4p .item_list li { 1303 | width: 12.4%; 1304 | float: left; 1305 | } 1306 | 1307 | #p4p .bd .pic { 1308 | font-size: 0; 1309 | text-align: center; 1310 | } 1311 | 1312 | #p4p .bd .pic img { 1313 | width: 100px; 1314 | height: 100px; 1315 | border: 1px solid #ccc; 1316 | } 1317 | 1318 | #p4p .bd .desc { 1319 | width: 100px; 1320 | height: 32px; 1321 | line-height: 16px; 1322 | margin: 0 auto; 1323 | overflow: hidden; 1324 | } 1325 | 1326 | #p4p .bd .price { 1327 | width: 100px; 1328 | margin: 0 auto; 1329 | } 1330 | 1331 | #p4p .bd .price strong { 1332 | padding-left: 16px; 1333 | color: #F50; 1334 | font-size: 14px; 1335 | background-position: -155px -219px; 1336 | } 1337 | 1338 | .fpad_banner { 1339 | height: 90px; 1340 | padding: 5px 11px; 1341 | margin: 10px 0; 1342 | background: #EBF5FA; 1343 | } 1344 | 1345 | .box_skin_orange .rc_tp { 1346 | background-position: -162px -195px; 1347 | } 1348 | 1349 | .box_skin_orange .rc_tp b { 1350 | background-position: -159px -195px; 1351 | } 1352 | 1353 | .box_skin_orange .rc_bt { 1354 | background-position: -162px -198px; 1355 | } 1356 | 1357 | .box_skin_orange .rc_bt b { 1358 | background-position: -159px -198px; 1359 | } 1360 | 1361 | .box_skin_orange .bd { 1362 | height: 133px; 1363 | border: 1px solid #FBD686; 1364 | padding: 5px; 1365 | background-color: #FFF8E8; 1366 | } 1367 | 1368 | .links_panel { 1369 | height: 122px; 1370 | padding-top: 8px; 1371 | border: 1px solid #FFF3D9; 1372 | background-color: white; 1373 | float: left; 1374 | } 1375 | 1376 | .links_panel_safe,.links_panel_payment,.links_panel_service { 1377 | width: 20%; 1378 | } 1379 | 1380 | .links_panel_guard { 1381 | width: 37.5%; 1382 | margin: 0 .5%; 1383 | } 1384 | 1385 | .links_panel_service { 1386 | margin-left: .5%; 1387 | } 1388 | 1389 | .links_panel h4 { 1390 | margin-bottom: 6px; 1391 | font-size: 16px; 1392 | text-align: center; 1393 | color: #17387D; 1394 | line-height: 22px; 1395 | } 1396 | 1397 | .links_panel ul { 1398 | padding-left: 44px; 1399 | } 1400 | 1401 | .links_panel li a { 1402 | display: block; 1403 | line-height: 22px; 1404 | padding-left: 15px; 1405 | background-position: -162px -281px; 1406 | zoom: 1; 1407 | } 1408 | 1409 | .links_panel_guard ul { 1410 | padding-left: 67px; 1411 | overflow: hidden; 1412 | zoom: 1; 1413 | } 1414 | 1415 | .links_panel_guard li { 1416 | width: 49.5%; 1417 | float: left; 1418 | } 1419 | 1420 | .zxx_footer { 1421 | padding: 35px 0; 1422 | line-height: 20px; 1423 | text-align: center; 1424 | color: #333; 1425 | } 1426 | 1427 | .zxx_footer a { 1428 | color: #34538b; 1429 | text-decoration: underline; 1430 | } --------------------------------------------------------------------------------