├── css3 ├── img │ ├── 1.jpg │ └── 2.jpg ├── demo │ ├── font │ │ ├── DIN Next W02 Medium.eot │ │ ├── DIN Next W02 Medium.woff │ │ ├── madameklara-webfont.eot │ │ ├── madameklara-webfont.ttf │ │ └── madameklara-webfont.woff │ └── font-face.html ├── rgba.html ├── demo-accordion.html ├── linear-gradient.html ├── border-radius.html ├── demo-android.html ├── box-shadow.html ├── demo-3d-rotate.html ├── transition.html ├── text-shadow.html └── demo-clock.html ├── css ├── images │ ├── 1.png │ └── blank.gif ├── demo │ └── layout │ │ ├── fixed1.html │ │ ├── fixed2.html │ │ ├── fluid1.html │ │ ├── fluid2.html │ │ ├── fixed3.html │ │ └── fluid3.html └── three-col-layout.html ├── .gitignore ├── jquery ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── select.png └── myTabs.html ├── static ├── img │ ├── fork.png │ ├── open.gif │ ├── close.gif │ ├── header-bg.png │ ├── line_conn.gif │ ├── header-bg-2.png │ ├── zTreeStandard.gif │ └── zTreeStandard.png ├── sass │ ├── top-bar.scss │ ├── index.scss │ ├── page.scss │ ├── page │ │ ├── bootstrap │ │ │ ├── mixins │ │ │ │ ├── _center-block.scss │ │ │ │ ├── _opacity.scss │ │ │ │ ├── _size.scss │ │ │ │ ├── _text-overflow.scss │ │ │ │ ├── _tab-focus.scss │ │ │ │ ├── _resize.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _text-emphasis.scss │ │ │ │ ├── _progress-bar.scss │ │ │ │ ├── _background-variant.scss │ │ │ │ ├── _reset-filter.scss │ │ │ │ ├── _nav-divider.scss │ │ │ │ ├── _alerts.scss │ │ │ │ ├── _nav-vertical-align.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _border-radius.scss │ │ │ │ ├── _responsive-visibility.scss │ │ │ │ ├── _panels.scss │ │ │ │ ├── _hide-text.scss │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _table-row.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _image.scss │ │ │ │ ├── _grid-framework.scss │ │ │ │ ├── _forms.scss │ │ │ │ ├── _grid.scss │ │ │ │ └── _gradients.scss │ │ │ ├── _wells.scss │ │ │ ├── _breadcrumbs.scss │ │ │ ├── _responsive-embed.scss │ │ │ ├── _close.scss │ │ │ ├── _component-animations.scss │ │ │ ├── _thumbnails.scss │ │ │ ├── _media.scss │ │ │ ├── _pager.scss │ │ │ ├── _utilities.scss │ │ │ ├── _mixins.scss │ │ │ ├── _bootstrap.scss │ │ │ ├── _jumbotron.scss │ │ │ ├── _badges.scss │ │ │ ├── _labels.scss │ │ │ ├── _code.scss │ │ │ ├── _grid.scss │ │ │ ├── _alerts.scss │ │ │ ├── _print.scss │ │ │ ├── _pagination.scss │ │ │ ├── _progress-bars.scss │ │ │ ├── _tooltip.scss │ │ │ ├── _scaffolding.scss │ │ │ ├── _list-group.scss │ │ │ ├── _popovers.scss │ │ │ ├── _modals.scss │ │ │ └── _buttons.scss │ │ ├── _boottstrap.customize.scss │ │ ├── _prettify.scss │ │ ├── _bootstrap.scss │ │ ├── _common.scss │ │ └── _highlight-github.scss │ ├── _reset.scss │ └── index │ │ └── _layout.scss ├── js │ ├── lib │ │ └── html5.js │ ├── page.min.js │ ├── page.js │ └── index.min.js └── css │ └── top-bar.css ├── javascript ├── img │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ ├── 9.jpg │ ├── star.gif │ ├── focus-1.jpg │ ├── focus-2.jpg │ ├── focus-3.jpg │ ├── focus-4.jpg │ ├── focus-5.jpg │ ├── qiyi-1.jpg │ ├── qiyi-10.jpg │ ├── qiyi-2.jpg │ ├── qiyi-3.jpg │ ├── qiyi-4.jpg │ ├── qiyi-5.jpg │ ├── qiyi-6.jpg │ ├── qiyi-7.jpg │ ├── qiyi-8.jpg │ ├── qiyi-9.jpg │ ├── roll-1.jpg │ ├── roll-2.jpg │ ├── roll-3.jpg │ ├── roll-4.jpg │ ├── roll-5.jpg │ ├── prev-next.png │ ├── calendar-bg.png │ ├── focus-nav-1.jpg │ ├── focus-nav-10.jpg │ ├── focus-nav-2.jpg │ ├── focus-nav-3.jpg │ ├── focus-nav-4.jpg │ ├── focus-nav-5.jpg │ ├── focus-nav-6.jpg │ ├── focus-nav-7.jpg │ ├── focus-nav-8.jpg │ ├── focus-nav-9.jpg │ ├── focus-nav-bg.png │ ├── focus-txt-bg.png │ ├── focus-txt-play.png │ └── focus-txt-play-h.png ├── contextmenu.html ├── image-roll.html ├── calculator.html ├── css │ └── focus.css ├── accordion-slide.html ├── search.html └── random-hide-slide.html ├── project ├── scroll │ ├── css │ │ └── style.css │ ├── sass │ │ └── style.scss │ ├── index.html │ └── config.rb └── wordpress │ ├── img │ ├── arror.png │ ├── avatar.jpg │ ├── back-to-top.png │ ├── glyphicons-halflings.png │ └── glyphicons-halflings-white.png │ ├── js │ ├── common.js │ └── html5.js │ ├── 404.html │ └── css │ ├── ie.css │ └── global.css ├── game ├── 2048 │ ├── index.html │ └── css │ │ └── style.css └── flappyBird │ ├── img │ ├── bg.jpg │ ├── end.ogg │ ├── fly.ogg │ ├── brid.gif │ ├── brid.png │ ├── lawn.jpg │ ├── over.png │ ├── panel.png │ ├── play.png │ ├── start.ogg │ ├── start.png │ ├── across.ogg │ ├── pillar.png │ ├── pillar-up.png │ └── pillar-down.png │ ├── css │ └── style.css │ └── index.html ├── templates ├── footer.html └── header.html ├── README.md ├── package.json ├── index.html ├── tools ├── img2base64.html └── html2js.html └── svg └── basic.html /css3/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/img/1.jpg -------------------------------------------------------------------------------- /css3/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/img/2.jpg -------------------------------------------------------------------------------- /css/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css/images/1.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | deploy 3 | .sass-cache 4 | .DS_Store 5 | .tmp 6 | .cache -------------------------------------------------------------------------------- /jquery/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/jquery/images/1.jpg -------------------------------------------------------------------------------- /jquery/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/jquery/images/2.jpg -------------------------------------------------------------------------------- /jquery/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/jquery/images/3.jpg -------------------------------------------------------------------------------- /jquery/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/jquery/images/4.jpg -------------------------------------------------------------------------------- /static/img/fork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/fork.png -------------------------------------------------------------------------------- /static/img/open.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/open.gif -------------------------------------------------------------------------------- /css/images/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css/images/blank.gif -------------------------------------------------------------------------------- /javascript/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/1.jpg -------------------------------------------------------------------------------- /javascript/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/2.jpg -------------------------------------------------------------------------------- /javascript/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/3.jpg -------------------------------------------------------------------------------- /javascript/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/4.jpg -------------------------------------------------------------------------------- /javascript/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/5.jpg -------------------------------------------------------------------------------- /javascript/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/6.jpg -------------------------------------------------------------------------------- /javascript/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/7.jpg -------------------------------------------------------------------------------- /javascript/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/8.jpg -------------------------------------------------------------------------------- /javascript/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/9.jpg -------------------------------------------------------------------------------- /static/img/close.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/close.gif -------------------------------------------------------------------------------- /javascript/img/star.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/star.gif -------------------------------------------------------------------------------- /jquery/images/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/jquery/images/select.png -------------------------------------------------------------------------------- /project/scroll/css/style.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0}body{overflow:hidden;position:relative} 2 | -------------------------------------------------------------------------------- /static/img/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/header-bg.png -------------------------------------------------------------------------------- /static/img/line_conn.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/line_conn.gif -------------------------------------------------------------------------------- /game/flappyBird/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/bg.jpg -------------------------------------------------------------------------------- /game/flappyBird/img/end.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/end.ogg -------------------------------------------------------------------------------- /game/flappyBird/img/fly.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/fly.ogg -------------------------------------------------------------------------------- /javascript/img/focus-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-1.jpg -------------------------------------------------------------------------------- /javascript/img/focus-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-2.jpg -------------------------------------------------------------------------------- /javascript/img/focus-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-3.jpg -------------------------------------------------------------------------------- /javascript/img/focus-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-4.jpg -------------------------------------------------------------------------------- /javascript/img/focus-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-5.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-1.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-10.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-2.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-3.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-4.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-5.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-6.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-7.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-8.jpg -------------------------------------------------------------------------------- /javascript/img/qiyi-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/qiyi-9.jpg -------------------------------------------------------------------------------- /javascript/img/roll-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/roll-1.jpg -------------------------------------------------------------------------------- /javascript/img/roll-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/roll-2.jpg -------------------------------------------------------------------------------- /javascript/img/roll-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/roll-3.jpg -------------------------------------------------------------------------------- /javascript/img/roll-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/roll-4.jpg -------------------------------------------------------------------------------- /javascript/img/roll-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/roll-5.jpg -------------------------------------------------------------------------------- /static/img/header-bg-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/header-bg-2.png -------------------------------------------------------------------------------- /game/flappyBird/img/brid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/brid.gif -------------------------------------------------------------------------------- /game/flappyBird/img/brid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/brid.png -------------------------------------------------------------------------------- /game/flappyBird/img/lawn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/lawn.jpg -------------------------------------------------------------------------------- /game/flappyBird/img/over.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/over.png -------------------------------------------------------------------------------- /game/flappyBird/img/panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/panel.png -------------------------------------------------------------------------------- /game/flappyBird/img/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/play.png -------------------------------------------------------------------------------- /game/flappyBird/img/start.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/start.ogg -------------------------------------------------------------------------------- /game/flappyBird/img/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/start.png -------------------------------------------------------------------------------- /javascript/img/prev-next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/prev-next.png -------------------------------------------------------------------------------- /static/img/zTreeStandard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/zTreeStandard.gif -------------------------------------------------------------------------------- /static/img/zTreeStandard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/static/img/zTreeStandard.png -------------------------------------------------------------------------------- /static/sass/top-bar.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import "reset"; 4 | @import "page/common"; 5 | -------------------------------------------------------------------------------- /game/flappyBird/img/across.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/across.ogg -------------------------------------------------------------------------------- /game/flappyBird/img/pillar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/pillar.png -------------------------------------------------------------------------------- /javascript/img/calendar-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/calendar-bg.png -------------------------------------------------------------------------------- /javascript/img/focus-nav-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-1.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-10.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-2.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-3.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-4.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-5.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-6.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-7.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-8.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-9.jpg -------------------------------------------------------------------------------- /javascript/img/focus-nav-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-nav-bg.png -------------------------------------------------------------------------------- /javascript/img/focus-txt-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-txt-bg.png -------------------------------------------------------------------------------- /project/wordpress/img/arror.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/project/wordpress/img/arror.png -------------------------------------------------------------------------------- /project/wordpress/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/project/wordpress/img/avatar.jpg -------------------------------------------------------------------------------- /project/wordpress/js/common.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/project/wordpress/js/common.js -------------------------------------------------------------------------------- /game/flappyBird/img/pillar-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/pillar-up.png -------------------------------------------------------------------------------- /javascript/img/focus-txt-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-txt-play.png -------------------------------------------------------------------------------- /game/flappyBird/img/pillar-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/game/flappyBird/img/pillar-down.png -------------------------------------------------------------------------------- /javascript/img/focus-txt-play-h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/javascript/img/focus-txt-play-h.png -------------------------------------------------------------------------------- /project/wordpress/img/back-to-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/project/wordpress/img/back-to-top.png -------------------------------------------------------------------------------- /css3/demo/font/DIN Next W02 Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/demo/font/DIN Next W02 Medium.eot -------------------------------------------------------------------------------- /css3/demo/font/DIN Next W02 Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/demo/font/DIN Next W02 Medium.woff -------------------------------------------------------------------------------- /css3/demo/font/madameklara-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/demo/font/madameklara-webfont.eot -------------------------------------------------------------------------------- /css3/demo/font/madameklara-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/demo/font/madameklara-webfont.ttf -------------------------------------------------------------------------------- /css3/demo/font/madameklara-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/css3/demo/font/madameklara-webfont.woff -------------------------------------------------------------------------------- /static/sass/index.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import "reset"; 4 | @import "index/layout"; 5 | @import "index/z-tree"; 6 | -------------------------------------------------------------------------------- /project/wordpress/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/project/wordpress/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /project/wordpress/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/8788/lab/HEAD/project/wordpress/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /static/sass/page.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import "reset"; 4 | @import "page/boottstrap.customize"; 5 | @import "page/common"; 6 | @import "page/highlight-github"; 7 | -------------------------------------------------------------------------------- /project/scroll/sass/style.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | overflow: hidden; 10 | position: relative; 11 | } 12 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_center-block.scss: -------------------------------------------------------------------------------- 1 | // Center-align a block level element 2 | 3 | @mixin center-block() { 4 | display: block; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_opacity.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height) { 4 | width: $width; 5 | height: $height; 6 | } 7 | 8 | @mixin square($size) { 9 | @include size($size, $size); 10 | } 11 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_text-overflow.scss: -------------------------------------------------------------------------------- 1 | // Text overflow 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-overflow() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_tab-focus.scss: -------------------------------------------------------------------------------- 1 | // WebKit-style focus 2 | 3 | @mixin tab-focus() { 4 | // Default 5 | outline: thin dotted; 6 | // WebKit 7 | outline: 5px auto -webkit-focus-ring-color; 8 | outline-offset: -2px; 9 | } 10 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | resize: $direction; // Options: horizontal, vertical, both 5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 6 | } 7 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | // Labels 2 | 3 | @mixin label-variant($color) { 4 | background-color: $color; 5 | 6 | &[href] { 7 | &:hover, 8 | &:focus { 9 | background-color: darken($color, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /templates/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | 3 | // [converter] $parent hack 4 | @mixin text-emphasis-variant($parent, $color) { 5 | #{$parent} { 6 | color: $color; 7 | } 8 | a#{$parent}:hover { 9 | color: darken($color, 10%); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /static/sass/page/_boottstrap.customize.scss: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import "bootstrap/variables"; 3 | @import "bootstrap/mixins"; 4 | 5 | // Core CSS 6 | @import "bootstrap/code"; 7 | @import "bootstrap/forms"; 8 | @import "bootstrap/buttons"; 9 | 10 | @import "bootstrap/alerts"; 11 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_progress-bar.scss: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | 3 | @mixin progress-bar-variant($color) { 4 | background-color: $color; 5 | 6 | // Deprecated parent class requirement as of v3.2.0 7 | .progress-striped & { 8 | @include gradient-striped(); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | 3 | // [converter] $parent hack 4 | @mixin bg-variant($parent, $color) { 5 | #{$parent} { 6 | background-color: $color; 7 | } 8 | a#{$parent}:hover { 9 | background-color: darken($color, 10%); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_reset-filter.scss: -------------------------------------------------------------------------------- 1 | // Reset filters for IE 2 | // 3 | // When you need to remove a gradient background, do not forget to use this to reset 4 | // the IE filter for IE9 and below. 5 | 6 | @mixin reset-filter() { 7 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FE Lab 2 | 3 | https://8788.github.io/lab/ 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # dev server at http://localhost:3000 12 | npm run dev 13 | 14 | # build for production 15 | npm run build 16 | 17 | # deploying to a gh-pages branch 18 | npm run deploy 19 | ``` -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: #e5e5e5) { 6 | height: 1px; 7 | margin: (($line-height-computed / 2) - 1) 0; 8 | overflow: hidden; 9 | background-color: $color; 10 | } 11 | -------------------------------------------------------------------------------- /templates/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= title %> 6 | 7 | 8 | 9 | 10 | 11 |
-------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_alerts.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | 3 | @mixin alert-variant($background, $border, $text-color) { 4 | background-color: $background; 5 | border-color: $border; 6 | color: $text-color; 7 | 8 | hr { 9 | border-top-color: darken($border, 5%); 10 | } 11 | .alert-link { 12 | color: darken($text-color, 10%); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /static/js/lib/html5.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var e = ['article','aside','audio','bdi','canvas','command','datalist','details','figcaption','figure','footer','header','hgroup','keygen','mark','meter','nav','output','progress','rp','rt','ruby','section','source','summary','time','track','vedio']; 3 | var iHtml5 = e.length; 4 | for(var i=0;i li { 5 | > a, 6 | > span { 7 | padding: $padding-vertical $padding-horizontal; 8 | font-size: $font-size; 9 | } 10 | &:first-child { 11 | > a, 12 | > span { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | > a, 18 | > span { 19 | @include border-right-radius($border-radius); 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Single side border-radius 2 | 3 | @mixin border-top-radius($radius) { 4 | border-top-right-radius: $radius; 5 | border-top-left-radius: $radius; 6 | } 7 | @mixin border-right-radius($radius) { 8 | border-bottom-right-radius: $radius; 9 | border-top-right-radius: $radius; 10 | } 11 | @mixin border-bottom-radius($radius) { 12 | border-bottom-right-radius: $radius; 13 | border-bottom-left-radius: $radius; 14 | } 15 | @mixin border-left-radius($radius) { 16 | border-bottom-left-radius: $radius; 17 | border-top-left-radius: $radius; 18 | } 19 | -------------------------------------------------------------------------------- /static/js/page.min.js: -------------------------------------------------------------------------------- 1 | !function(){function a(a,b){if(b=b||document,b.getElementsByClassName)return b.getElementsByClassName(a);for(var c=[],d=new RegExp("(^|\\s+)"+a+"($|\\s+)","i"),e=b.getElementsByTagName("*"),f=0;f前端实验室',document.body.appendChild(b),b.onclick=function(){b.style.display="none"};var c=a("container")[0];c&&(c.style.paddingTop="30px")}}(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lab", 3 | "version": "0.2.0", 4 | "scripts": { 5 | "dev": "grunt server", 6 | "build": "grunt", 7 | "gh-pages": "gh-pages -d deploy", 8 | "deploy": "npm run build && npm run gh-pages" 9 | }, 10 | "devDependencies": { 11 | "grunt": "^0.4.2", 12 | "grunt-contrib-clean": "^0.5.0", 13 | "grunt-contrib-compass": "^0.8.0", 14 | "grunt-contrib-connect": "^0.8.0", 15 | "grunt-contrib-copy": "^0.5.0", 16 | "grunt-contrib-uglify": "^0.5.0", 17 | "grunt-contrib-watch": "^0.4.0", 18 | "cheerio": "^0.17.0", 19 | "ejs": "^2.3.3", 20 | "gh-pages": "^2.0.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_responsive-visibility.scss: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | // [converter] $parent hack 6 | @mixin responsive-visibility($parent) { 7 | #{$parent} { 8 | display: block !important; 9 | } 10 | table#{$parent} { display: table; } 11 | tr#{$parent} { display: table-row !important; } 12 | th#{$parent}, 13 | td#{$parent} { display: table-cell !important; } 14 | } 15 | 16 | // [converter] $parent hack 17 | @mixin responsive-invisibility($parent) { 18 | #{$parent} { 19 | display: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /project/scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Examples 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_panels.scss: -------------------------------------------------------------------------------- 1 | // Panels 2 | 3 | @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) { 4 | border-color: $border; 5 | 6 | & > .panel-heading { 7 | color: $heading-text-color; 8 | background-color: $heading-bg-color; 9 | border-color: $heading-border; 10 | 11 | + .panel-collapse > .panel-body { 12 | border-top-color: $border; 13 | } 14 | .badge { 15 | color: $heading-bg-color; 16 | background-color: $heading-text-color; 17 | } 18 | } 19 | & > .panel-footer { 20 | + .panel-collapse > .panel-body { 21 | border-bottom-color: $border; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_wells.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: $well-bg; 12 | border: 1px solid $well-border; 13 | border-radius: $border-radius-base; 14 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: $border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: $border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | // 3 | // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for 4 | // mixins being reused as classes with the same name, this doesn't hold up. As 5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. 6 | // 7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 8 | 9 | // Deprecated as of v3.0.1 (will be removed in v4) 10 | @mixin hide-text() { 11 | font: #{0/0} a; 12 | color: transparent; 13 | text-shadow: none; 14 | background-color: transparent; 15 | border: 0; 16 | } 17 | 18 | // New mixin to use as of v3.0.1 19 | @mixin text-hide() { 20 | @include hide-text(); 21 | } 22 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; 8 | margin-bottom: $line-height-computed; 9 | list-style: none; 10 | background-color: $breadcrumb-bg; 11 | border-radius: $border-radius-base; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | + li:before { 17 | content: "#{$breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space 18 | padding: 0 5px; 19 | color: $breadcrumb-color; 20 | } 21 | } 22 | 23 | > .active { 24 | color: $breadcrumb-active-color; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_responsive-embed.scss: -------------------------------------------------------------------------------- 1 | // Embeds responsive 2 | // 3 | // Credit: Nicolas Gallagher and SUIT CSS. 4 | 5 | .embed-responsive { 6 | position: relative; 7 | display: block; 8 | height: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | 12 | .embed-responsive-item, 13 | iframe, 14 | embed, 15 | object { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | bottom: 0; 20 | height: 100%; 21 | width: 100%; 22 | border: 0; 23 | } 24 | 25 | // Modifier class for 16:9 aspect ratio 26 | &.embed-responsive-16by9 { 27 | padding-bottom: 56.25%; 28 | } 29 | 30 | // Modifier class for 4:3 aspect ratio 31 | &.embed-responsive-4by3 { 32 | padding-bottom: 75%; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | // [converter] extracted a& to a.list-group-item-#{$state} 9 | } 10 | 11 | a.list-group-item-#{$state} { 12 | color: $color; 13 | 14 | .list-group-item-heading { 15 | color: inherit; 16 | } 17 | 18 | &:hover, 19 | &:focus { 20 | color: $color; 21 | background-color: darken($background, 5%); 22 | } 23 | &.active, 24 | &.active:hover, 25 | &.active:focus { 26 | color: #fff; 27 | background-color: $color; 28 | border-color: $color; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /css/demo/layout/fixed1.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "固定宽度两栏布局（侧栏在左）" 4 | } 5 | 6 | 14 | 15 |
16 | 17 |
18 |
19 |
aside
20 |
21 |
22 |
main
23 |
24 |
25 | 26 |
-------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table > thead > tr, 7 | .table > tbody > tr, 8 | .table > tfoot > tr { 9 | > td.#{$state}, 10 | > th.#{$state}, 11 | &.#{$state} > td, 12 | &.#{$state} > th { 13 | background-color: $background; 14 | } 15 | } 16 | 17 | // Hover states for `.table-hover` 18 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 19 | .table-hover > tbody > tr { 20 | > td.#{$state}:hover, 21 | > th.#{$state}:hover, 22 | &.#{$state}:hover > td, 23 | &:hover > .#{$state}, 24 | &.#{$state}:hover > th { 25 | background-color: darken($background, 5%); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /project/wordpress/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 |
19 |

404 Not Found

20 |

我们无法找到这个页面，可能是永久性的转移到了别的地址或者已经被删除，您可以尝试搜索一下。

21 |
22 | 23 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: ($font-size-base * 1.5); 9 | font-weight: $close-font-weight; 10 | line-height: 1; 11 | color: $close-color; 12 | text-shadow: $close-text-shadow; 13 | @include opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: $close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | @include opacity(.5); 21 | } 22 | 23 | // [converter] extracted button& to button.close 24 | } 25 | 26 | // Additional properties for button version 27 | // iOS requires the button element instead of an anchor tag. 28 | // If you want the anchor version, it requires `href="#"`. 29 | button.close { 30 | padding: 0; 31 | cursor: pointer; 32 | background: transparent; 33 | border: 0; 34 | -webkit-appearance: none; 35 | } 36 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_component-animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | @include transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | 21 | &.in { display: block; } 22 | // [converter] extracted tr&.in to tr.collapse.in 23 | // [converter] extracted tbody&.in to tbody.collapse.in 24 | } 25 | 26 | tr.collapse.in { display: table-row; } 27 | 28 | tbody.collapse.in { display: table-row-group; } 29 | 30 | .collapsing { 31 | position: relative; 32 | height: 0; 33 | overflow: hidden; 34 | @include transition(height .35s ease); 35 | } 36 | -------------------------------------------------------------------------------- /css/demo/layout/fixed2.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "固定宽度两栏布局（侧栏在右）" 4 | } 5 | 6 | 16 | 17 |
18 | 19 |
20 |
21 |
main
22 |
23 |
24 |
aside
25 |
26 |
27 | 28 |
-------------------------------------------------------------------------------- /project/scroll/config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "css" 6 | sass_dir = "sass" 7 | images_dir = "img" 8 | javascripts_dir = "js" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | output_style = :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | line_comments = false 19 | 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | -------------------------------------------------------------------------------- /css/demo/layout/fluid1.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "左栏固定，右栏自适应布局" 4 | } 5 | 6 | 16 | 17 |
18 | 19 |
20 |
21 |
22 | aside 23 |

















24 |
25 |
26 |
27 |
28 | main 29 |

















30 |
31 |
32 |
33 | 34 |
-------------------------------------------------------------------------------- /static/sass/page/bootstrap/_thumbnails.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | display: block; 9 | padding: $thumbnail-padding; 10 | margin-bottom: $line-height-computed; 11 | line-height: $line-height-base; 12 | background-color: $thumbnail-bg; 13 | border: 1px solid $thumbnail-border; 14 | border-radius: $thumbnail-border-radius; 15 | @include transition(all .2s ease-in-out); 16 | 17 | > img, 18 | a > img { 19 | @include img-responsive(); 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active 25 | 26 | // Image captions 27 | .caption { 28 | padding: $thumbnail-caption-padding; 29 | color: $thumbnail-caption-color; 30 | } 31 | } 32 | 33 | // Add a hover state for linked versions only 34 | a.thumbnail:hover, 35 | a.thumbnail:focus, 36 | a.thumbnail.active { 37 | border-color: $link-color; 38 | } 39 | -------------------------------------------------------------------------------- /css3/demo/font-face.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Examples 7 | 8 | 9 | 10 | 24 | 25 | 26 |

this is a test. 1234567890 （自定义字体）

27 |
this is a test. 1234567890 （浏览器默认字体）
28 | 29 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_media.scss: -------------------------------------------------------------------------------- 1 | // Media objects 2 | // Source: http://stubbornella.org/content/?p=497 3 | // -------------------------------------------------- 4 | 5 | 6 | // Common styles 7 | // ------------------------- 8 | 9 | // Clear the floats 10 | .media, 11 | .media-body { 12 | overflow: hidden; 13 | zoom: 1; 14 | } 15 | 16 | // Proper spacing between instances of .media 17 | .media, 18 | .media .media { 19 | margin-top: 15px; 20 | } 21 | .media:first-child { 22 | margin-top: 0; 23 | } 24 | 25 | // For images and videos, set to block 26 | .media-object { 27 | display: block; 28 | } 29 | 30 | // Reset margins on headings for tighter default spacing 31 | .media-heading { 32 | margin: 0 0 5px; 33 | } 34 | 35 | 36 | // Media image alignment 37 | // ------------------------- 38 | 39 | .media { 40 | > .pull-left { 41 | margin-right: 10px; 42 | } 43 | > .pull-right { 44 | margin-left: 10px; 45 | } 46 | } 47 | 48 | 49 | // Media list variation 50 | // ------------------------- 51 | 52 | // Undo default ul/ol styles 53 | .media-list { 54 | padding-left: 0; 55 | list-style: none; 56 | } 57 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_pager.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: $line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | @include clearfix(); 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: $pager-bg; 19 | border: 1px solid $pager-border; 20 | border-radius: $pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: $pager-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: $pager-disabled-color; 50 | background-color: $pager-bg; 51 | cursor: not-allowed; 52 | } 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | @include clearfix(); 11 | } 12 | .center-block { 13 | @include center-block(); 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | @include text-hide(); 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | visibility: hidden !important; 48 | } 49 | 50 | 51 | // For Affix plugin 52 | // ------------------------- 53 | 54 | .affix { 55 | position: fixed; 56 | @include translate3d(0, 0, 0); 57 | } 58 | -------------------------------------------------------------------------------- /css/demo/layout/fluid2.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "右栏固定，左栏自适应布局" 4 | } 5 | 6 | 17 | 18 |
19 | 20 |
21 |
22 |
23 | main 24 |

















25 |
26 |
27 |
28 |
29 | aside 30 |

















31 |
32 |
33 |
34 | 35 |
-------------------------------------------------------------------------------- /static/sass/page/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | 4 | // Utilities 5 | @import "mixins/hide-text"; 6 | @import "mixins/opacity"; 7 | @import "mixins/image"; 8 | @import "mixins/labels"; 9 | @import "mixins/reset-filter"; 10 | @import "mixins/resize"; 11 | @import "mixins/responsive-visibility"; 12 | @import "mixins/size"; 13 | @import "mixins/tab-focus"; 14 | @import "mixins/text-emphasis"; 15 | @import "mixins/text-overflow"; 16 | @import "mixins/vendor-prefixes"; 17 | 18 | // Components 19 | @import "mixins/alerts"; 20 | @import "mixins/buttons"; 21 | @import "mixins/panels"; 22 | @import "mixins/pagination"; 23 | @import "mixins/list-group"; 24 | @import "mixins/nav-divider"; 25 | @import "mixins/forms"; 26 | @import "mixins/progress-bar"; 27 | @import "mixins/table-row"; 28 | 29 | // Skins 30 | @import "mixins/background-variant"; 31 | @import "mixins/border-radius"; 32 | @import "mixins/gradients"; 33 | 34 | // Layout 35 | @import "mixins/clearfix"; 36 | @import "mixins/center-block"; 37 | @import "mixins/nav-vertical-align"; 38 | @import "mixins/grid-framework"; 39 | @import "mixins/grid"; 40 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import "variables"; 3 | @import "mixins"; 4 | 5 | // Reset and dependencies 6 | @import "normalize"; 7 | @import "print"; 8 | @import "glyphicons"; 9 | 10 | // Core CSS 11 | @import "scaffolding"; 12 | @import "type"; 13 | @import "code"; 14 | @import "grid"; 15 | @import "tables"; 16 | @import "forms"; 17 | @import "buttons"; 18 | 19 | // Components 20 | @import "component-animations"; 21 | @import "dropdowns"; 22 | @import "button-groups"; 23 | @import "input-groups"; 24 | @import "navs"; 25 | @import "navbar"; 26 | @import "breadcrumbs"; 27 | @import "pagination"; 28 | @import "pager"; 29 | @import "labels"; 30 | @import "badges"; 31 | @import "jumbotron"; 32 | @import "thumbnails"; 33 | @import "alerts"; 34 | @import "progress-bars"; 35 | @import "media"; 36 | @import "list-group"; 37 | @import "panels"; 38 | @import "responsive-embed"; 39 | @import "wells"; 40 | @import "close"; 41 | 42 | // Components w/ JavaScript 43 | @import "modals"; 44 | @import "tooltip"; 45 | @import "popovers"; 46 | @import "carousel"; 47 | 48 | // Utility classes 49 | @import "utilities"; 50 | @import "responsive-utilities"; 51 | -------------------------------------------------------------------------------- /game/2048/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2048 - javascript 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | score: 0 17 | best: 0 18 |
19 |

2048

20 |

合并这些数字以得到2048方块(使用上下左右键)

21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding: $jumbotron-padding; 8 | margin-bottom: $jumbotron-padding; 9 | color: $jumbotron-color; 10 | background-color: $jumbotron-bg; 11 | 12 | h1, 13 | .h1 { 14 | color: $jumbotron-heading-color; 15 | } 16 | p { 17 | margin-bottom: ($jumbotron-padding / 2); 18 | font-size: $jumbotron-font-size; 19 | font-weight: 200; 20 | } 21 | 22 | > hr { 23 | border-top-color: darken($jumbotron-bg, 10%); 24 | } 25 | 26 | .container & { 27 | border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container 28 | } 29 | 30 | .container { 31 | max-width: 100%; 32 | } 33 | 34 | @media screen and (min-width: $screen-sm-min) { 35 | padding-top: ($jumbotron-padding * 1.6); 36 | padding-bottom: ($jumbotron-padding * 1.6); 37 | 38 | .container & { 39 | padding-left: ($jumbotron-padding * 2); 40 | padding-right: ($jumbotron-padding * 2); 41 | } 42 | 43 | h1, 44 | .h1 { 45 | font-size: ($font-size-base * 4.5); 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($color, $background, $border) { 7 | color: $color; 8 | background-color: $background; 9 | border-color: $border; 10 | 11 | &:hover, 12 | &:focus, 13 | &:active, 14 | &.active, 15 | .open > &.dropdown-toggle { 16 | color: $color; 17 | background-color: darken($background, 10%); 18 | border-color: darken($border, 12%); 19 | } 20 | &:active, 21 | &.active, 22 | .open > &.dropdown-toggle { 23 | background-image: none; 24 | } 25 | &.disabled, 26 | &[disabled], 27 | fieldset[disabled] & { 28 | &, 29 | &:hover, 30 | &:focus, 31 | &:active, 32 | &.active { 33 | background-color: $background; 34 | border-color: $border; 35 | } 36 | } 37 | 38 | .badge { 39 | color: $background; 40 | background-color: $color; 41 | } 42 | } 43 | 44 | // Button sizes 45 | @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { 46 | padding: $padding-vertical $padding-horizontal; 47 | font-size: $font-size; 48 | line-height: $line-height; 49 | border-radius: $border-radius; 50 | } 51 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: $font-size-small; 12 | font-weight: $badge-font-weight; 13 | color: $badge-color; 14 | line-height: $badge-line-height; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: $badge-bg; 19 | border-radius: $badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | 26 | // Quick fix for badges in buttons 27 | .btn & { 28 | position: relative; 29 | top: -1px; 30 | } 31 | .btn-xs & { 32 | top: 0; 33 | padding: 1px 5px; 34 | } 35 | 36 | // [converter] extracted a& to a.badge 37 | 38 | // Account for badges in navs 39 | a.list-group-item.active > &, 40 | .nav-pills > .active > a > & { 41 | color: $badge-active-color; 42 | background-color: $badge-active-bg; 43 | } 44 | .nav-pills > li > a > & { 45 | margin-left: 3px; 46 | } 47 | } 48 | 49 | // Hover state, but only for links 50 | a.badge { 51 | &:hover, 52 | &:focus { 53 | color: $badge-link-hover-color; 54 | text-decoration: none; 55 | cursor: pointer; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /css/demo/layout/fixed3.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "三栏固定布局" 4 | } 5 | 6 | 18 | 19 |
20 | 21 |
22 |
23 |
24 | aside 25 |

















26 |
27 |
28 |
29 |
30 |
31 | main 32 |

















33 |
34 |
35 |
36 |
37 | content-aside 38 |

















39 |
40 |
41 |
42 | 43 |
44 | 45 |
-------------------------------------------------------------------------------- /game/2048/css/style.css: -------------------------------------------------------------------------------- 1 | body{overflow:hidden;font-family:"Clear Sans","Helvetica Neue",Arial,"Microsoft Yahei",SimSun}.wraper{position:absolute;top:50%;left:50%;width:480px;height:560px;margin:-280px 0 0 -240px;background-color:#efefef}.head{width:395px;height:100px;margin:0 auto;padding-top:30px;line-height:48px}.title{color:#776E65;line-height:48px;margin:0}.score{float:right}.score span{margin-left:10px;padding:10px 15px;color:#ECE0C8;background-color:#BBADA0}.score em{font-style:normal;color:#fff}.tips{margin-top:10px;line-height:24px;font-size:14px}.box{position:relative;width:380px;height:380px;margin:0 auto;padding-top:15px;padding-left:15px;border-radius:5px;background-color:#BBADA0}.grid{position:absolute;width:80px;height:80px;border-radius:3px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#59EEE4DA', endColorstr='#59EEE4DA');background-color:rgba(238,228,218,.35)}.number{overflow:hidden;position:absolute;border-radius:3px;width:80px;height:80px;line-height:80px;font-size:36px;font-weight:700;text-align:center;color:#fff}.value-2{background:#eee4da;color:#776E65}.value-4{background:#ece0c8;color:#776E65}.value-8{background:#f2b179}.value-16{background:#f59563}.value-32{background:#f57c5f}.value-64{background:#f65d3b}.value-128{background:#edce71}.value-256{background:#edcc61}.value-512{background:#ecc850}.value-1024{background:#edc53f}.value-2048{background:#eec22e}.value-4096{background:#a6c}.value-8192{background:#93c} -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | @mixin img-responsive($display: block) { 10 | display: $display; 11 | width: 100% \9; // Force IE10 and below to size SVG images correctly 12 | max-width: 100%; // Part 1: Set a maximum relative to the parent 13 | height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching 14 | } 15 | 16 | 17 | // Retina image 18 | // 19 | // Short retina mixin for setting background-image and -size. Note that the 20 | // spelling of `min--moz-device-pixel-ratio` is intentional. 21 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 22 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}")); 23 | 24 | @media 25 | only screen and (-webkit-min-device-pixel-ratio: 2), 26 | only screen and ( min--moz-device-pixel-ratio: 2), 27 | only screen and ( -o-min-device-pixel-ratio: 2/1), 28 | only screen and ( min-device-pixel-ratio: 2), 29 | only screen and ( min-resolution: 192dpi), 30 | only screen and ( min-resolution: 2dppx) { 31 | background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}")); 32 | background-size: $width-1x $height-1x; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /static/sass/page/_prettify.scss: -------------------------------------------------------------------------------- 1 | .pln { 2 | color: #000; 3 | } 4 | @media screen { 5 | .str { 6 | color: #080; 7 | } 8 | .kwd { 9 | color: #008; 10 | } 11 | .com { 12 | color: #800; 13 | } 14 | .typ { 15 | color: #606; 16 | } 17 | .lit { 18 | color: #066; 19 | } 20 | .pun, 21 | .opn, 22 | .clo { 23 | color: #660; 24 | } 25 | .tag { 26 | color: #008; 27 | } 28 | .atn { 29 | color: #606; 30 | } 31 | .atv { 32 | color: #080; 33 | } 34 | .dec, 35 | .var { 36 | color: #606; 37 | } 38 | .fun { 39 | color: red; 40 | } 41 | } 42 | @media print, projection { 43 | .str { 44 | color: #060; 45 | } 46 | .kwd { 47 | color: #006; 48 | font-weight: bold; 49 | } 50 | .com { 51 | color: #600; 52 | font-style: italic; 53 | } 54 | .typ { 55 | color: #404; 56 | font-weight: bold; 57 | } 58 | .lit { 59 | color: #044; 60 | } 61 | .pun, 62 | .opn, 63 | .clo { 64 | color: #440; 65 | } 66 | .tag { 67 | color: #006; 68 | font-weight: bold; 69 | } 70 | .atn { 71 | color: #404; 72 | } 73 | .atv { 74 | color: #060; 75 | } 76 | } 77 | pre.prettyprint { 78 | padding: 2px; 79 | border: 1px solid #888; 80 | } 81 | ol.linenums { 82 | margin: 0 0 0 33px; /* IE indents via margin-left */ 83 | } 84 | ol.linenums li { 85 | padding-left: 12px; 86 | color: #bebec5; 87 | line-height: 18px; 88 | text-shadow: 0 1px 0 #fff; 89 | } 90 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: $label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // [converter] extracted a& to a.label 18 | 19 | // Empty labels collapse automatically (not available in IE8) 20 | &:empty { 21 | display: none; 22 | } 23 | 24 | // Quick fix for labels in buttons 25 | .btn & { 26 | position: relative; 27 | top: -1px; 28 | } 29 | } 30 | 31 | // Add hover effects, but only for links 32 | a.label { 33 | &:hover, 34 | &:focus { 35 | color: $label-link-hover-color; 36 | text-decoration: none; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | // Colors 42 | // Contextual variations (linked labels get darker on :hover) 43 | 44 | .label-default { 45 | @include label-variant($label-default-bg); 46 | } 47 | 48 | .label-primary { 49 | @include label-variant($label-primary-bg); 50 | } 51 | 52 | .label-success { 53 | @include label-variant($label-success-bg); 54 | } 55 | 56 | .label-info { 57 | @include label-variant($label-info-bg); 58 | } 59 | 60 | .label-warning { 61 | @include label-variant($label-warning-bg); 62 | } 63 | 64 | .label-danger { 65 | @include label-variant($label-danger-bg); 66 | } 67 | -------------------------------------------------------------------------------- /css/demo/layout/fluid3.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "左栏固定，右栏自适应布局" 4 | } 5 | 6 | 7 | 20 | 21 |
22 | 23 |
24 |
25 |
26 | aside 27 |

















28 |
29 |
30 |
31 |
32 |
33 | main 34 |

















35 |
36 |
37 |
38 |
39 | content-aside 40 |

















41 |
42 |
43 |
44 |
45 | 46 |
-------------------------------------------------------------------------------- /static/sass/page/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import "bootstrap/variables"; 3 | @import "bootstrap/mixins"; 4 | 5 | // Reset and dependencies 6 | @import "bootstrap/normalize"; 7 | @import "bootstrap/print"; 8 | @import "bootstrap/glyphicons"; 9 | 10 | // Core CSS 11 | @import "bootstrap/scaffolding"; 12 | @import "bootstrap/type"; 13 | @import "bootstrap/code"; 14 | @import "bootstrap/grid"; 15 | @import "bootstrap/tables"; 16 | @import "bootstrap/forms"; 17 | @import "bootstrap/buttons"; 18 | 19 | // Components 20 | @import "bootstrap/component-animations"; 21 | @import "bootstrap/dropdowns"; 22 | @import "bootstrap/button-groups"; 23 | @import "bootstrap/input-groups"; 24 | @import "bootstrap/navs"; 25 | @import "bootstrap/navbar"; 26 | @import "bootstrap/breadcrumbs"; 27 | @import "bootstrap/pagination"; 28 | @import "bootstrap/pager"; 29 | @import "bootstrap/labels"; 30 | @import "bootstrap/badges"; 31 | @import "bootstrap/jumbotron"; 32 | @import "bootstrap/thumbnails"; 33 | @import "bootstrap/alerts"; 34 | @import "bootstrap/progress-bars"; 35 | @import "bootstrap/media"; 36 | @import "bootstrap/list-group"; 37 | @import "bootstrap/panels"; 38 | @import "bootstrap/responsive-embed"; 39 | @import "bootstrap/wells"; 40 | @import "bootstrap/close"; 41 | 42 | // Components w/ JavaScript 43 | @import "bootstrap/modals"; 44 | @import "bootstrap/tooltip"; 45 | @import "bootstrap/popovers"; 46 | @import "bootstrap/carousel"; 47 | 48 | // Utility classes 49 | @import "bootstrap/utilities"; 50 | @import "bootstrap/responsive-utilities"; 51 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 前端实验室 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 |
19 | 22 | 23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /project/wordpress/css/ie.css: -------------------------------------------------------------------------------- 1 | /* NAVBAR */ 2 | 3 | /* !CPU HIGH, fix for IE6 shake when scroll */ 4 | * html,* html body { 5 | _background-image:url(about:blank); 6 | _background-attachment:fixed; 7 | } 8 | /* !CPU HIGH, fix for IE6 not support fixed position */ 9 | .navbar-fixed-top { 10 | _position:absolute; 11 | _bottom:auto; 12 | _top:expression(eval(document.documentElement.scrollTop)); 13 | } 14 | /* !CPU HIGH, fix for IE6 not support fixed position */ 15 | .navbar-fixed-bottom { 16 | _position:absolute; 17 | _bottom:auto; 18 | _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); 19 | } 20 | 21 | /* DROPDOWN */ 22 | .dropup, 23 | .dropdown { 24 | *zoom:1; 25 | } 26 | 27 | /* CLOSE */ 28 | .close { 29 | _font-size: 15px; 30 | } 31 | 32 | .modal-header h3 { 33 | *display: inline; 34 | *zoom:1; 35 | } 36 | 37 | /* MODALS */ 38 | .modal-backdrop { 39 | _position: absolute; 40 | _top:0; 41 | _margin-top:0; 42 | _width:expression(eval(document.documentElement.scrollWidth)); 43 | _height:expression(eval(document.documentElement.scrollHeight)); 44 | } 45 | .modal { 46 | _position:absolute; 47 | _top:0; 48 | _margin-top:0; 49 | _top:expression(eval(document.documentElement.scrollTop)); 50 | } 51 | .modal.fade.in { 52 | _filter:alpha(opacity=100); 53 | } 54 | .modal-backdrop { 55 | _filter: alpha(opacity=80); 56 | } 57 | .modal-body { 58 | _height:expression(this.scrollHeight > 400 ? "400px" : "auto"); 59 | } 60 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_code.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: $font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: $code-color; 19 | background-color: $code-bg; 20 | border-radius: $border-radius-base; 21 | } 22 | 23 | // User input typically entered via keyboard 24 | kbd { 25 | padding: 2px 4px; 26 | font-size: 90%; 27 | color: $kbd-color; 28 | background-color: $kbd-bg; 29 | border-radius: $border-radius-small; 30 | box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); 31 | 32 | kbd { 33 | padding: 0; 34 | font-size: 100%; 35 | box-shadow: none; 36 | } 37 | } 38 | 39 | // Blocks of code 40 | pre { 41 | display: block; 42 | padding: (($line-height-computed - 1) / 2); 43 | margin: 0 0 ($line-height-computed / 2); 44 | line-height: $line-height-base; 45 | word-break: break-all; 46 | word-wrap: break-word; 47 | color: $pre-color; 48 | background-color: $pre-bg; 49 | border: 1px solid $pre-border-color; 50 | border-radius: $border-radius-base; 51 | 52 | // Account for some code outputs that place code tags in pre tags 53 | code { 54 | padding: 0; 55 | font-size: inherit; 56 | color: inherit; 57 | white-space: pre-wrap; 58 | background-color: transparent; 59 | border-radius: 0; 60 | } 61 | } 62 | 63 | // Enable scrollable blocks of code 64 | .pre-scrollable { 65 | max-height: $pre-scrollable-max-height; 66 | overflow-y: scroll; 67 | } 68 | -------------------------------------------------------------------------------- /game/flappyBird/css/style.css: -------------------------------------------------------------------------------- 1 | body{height:100%;background-color:#333;overflow:hidden}.game{overflow:hidden;position:absolute;top:50%;left:50%;width:360px;height:580px;margin:-290px 0 0 -180px;background-color:#DDD894}.main{position:relative;height:480px;background:url(../img/bg.jpg) center bottom no-repeat #4EC0CA}.ready{display:none;position:absolute;top:130px;left:50%;width:254px;height:230px;margin-left:-127px;background:url(../img/start.png) no-repeat center}.over{position:absolute;top:580px;width:360px;text-align:center}.over .panel{position:relative;width:310px;height:162px;margin:30px auto 0;background:url(../img/panel.png) no-repeat center;font-size:32px;color:#fff;font-weight:700}.over .panel span{position:absolute;top:44px;right:30px}.over .panel em{position:absolute;top:100px;right:30px;font-style:normal}.over .restart{display:inline-block;width:145px;height:93px;background:url(../img/play.png) no-repeat center}.score{position:absolute;z-index:2;top:50px;left:50%;color:#fff;font-size:54px;font-weight:700;transform:translateX(-50%)}.bird{position:absolute;width:44px;height:30px;background:url(../img/brid.gif) no-repeat}.bird.died{background-image:url(../img/brid.png)}.lawn{position:absolute;bottom:-30px;left:0;width:720px;height:30px;background:url(../img/lawn.jpg) repeat-x}.pillar{position:absolute;height:100%}.pillar .item{position:absolute;width:69px;height:100%}.pillar .item:nth-child(1){left:0}.pillar .item:nth-child(2){left:220px}.pillar .item-down,.pillar .item-up{position:absolute;width:100%;height:100px;background:url(../img/pillar.png) repeat-y center}.pillar .item-up{top:0}.pillar .item-up:after{position:absolute;bottom:0;content:"";width:100%;height:35px;background:url(../img/pillar-up.png) no-repeat}.pillar .item-down{bottom:0}.pillar .item-down:after{position:absolute;top:0;content:"";width:100%;height:35px;background:url(../img/pillar-down.png) no-repeat} -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | 6 | // Container widths 7 | // 8 | // Set the container width, and override it for fixed navbars in media queries. 9 | 10 | .container { 11 | @include container-fixed(); 12 | 13 | @media (min-width: $screen-sm-min) { 14 | width: $container-sm; 15 | } 16 | @media (min-width: $screen-md-min) { 17 | width: $container-md; 18 | } 19 | @media (min-width: $screen-lg-min) { 20 | width: $container-lg; 21 | } 22 | } 23 | 24 | 25 | // Fluid container 26 | // 27 | // Utilizes the mixin meant for fixed width containers, but without any defined 28 | // width for fluid, full width layouts. 29 | 30 | .container-fluid { 31 | @include container-fixed(); 32 | } 33 | 34 | 35 | // Row 36 | // 37 | // Rows contain and clear the floats of your columns. 38 | 39 | .row { 40 | @include make-row(); 41 | } 42 | 43 | 44 | // Columns 45 | // 46 | // Common styles for small and large grid columns 47 | 48 | @include make-grid-columns(); 49 | 50 | 51 | // Extra small grid 52 | // 53 | // Columns, offsets, pushes, and pulls for extra small devices like 54 | // smartphones. 55 | 56 | @include make-grid(xs); 57 | 58 | 59 | // Small grid 60 | // 61 | // Columns, offsets, pushes, and pulls for the small device range, from phones 62 | // to tablets. 63 | 64 | @media (min-width: $screen-sm-min) { 65 | @include make-grid(sm); 66 | } 67 | 68 | 69 | // Medium grid 70 | // 71 | // Columns, offsets, pushes, and pulls for the desktop device range. 72 | 73 | @media (min-width: $screen-md-min) { 74 | @include make-grid(md); 75 | } 76 | 77 | 78 | // Large grid 79 | // 80 | // Columns, offsets, pushes, and pulls for the large desktop device range. 81 | 82 | @media (min-width: $screen-lg-min) { 83 | @include make-grid(lg); 84 | } 85 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_alerts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: $alert-padding; 11 | margin-bottom: $line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: $alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing $headings-color 19 | color: inherit; 20 | } 21 | // Provide class for links that match alerts 22 | .alert-link { 23 | font-weight: $alert-link-font-weight; 24 | } 25 | 26 | // Improve alignment and spacing of inner content 27 | > p, 28 | > ul { 29 | margin-bottom: 0; 30 | } 31 | > p + p { 32 | margin-top: 5px; 33 | } 34 | } 35 | 36 | // Dismissible alerts 37 | // 38 | // Expand the right padding and account for the close button's positioning. 39 | 40 | .alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. 41 | .alert-dismissible { 42 | padding-right: ($alert-padding + 20); 43 | 44 | // Adjust close link position 45 | .close { 46 | position: relative; 47 | top: -2px; 48 | right: -21px; 49 | color: inherit; 50 | } 51 | } 52 | 53 | // Alternate styles 54 | // 55 | // Generate contextual modifier classes for colorizing the alert. 56 | 57 | .alert-success { 58 | @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); 59 | } 60 | .alert-info { 61 | @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); 62 | } 63 | .alert-warning { 64 | @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); 65 | } 66 | .alert-danger { 67 | @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); 68 | } 69 | -------------------------------------------------------------------------------- /javascript/contextmenu.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "自定义浏览器右键菜单" 4 | } 5 | 6 | 7 | 8 | 20 | 21 | 22 |

在页面中任意位置点击右键，你试下。。。

23 | 31 | 32 | 63 | 64 | -------------------------------------------------------------------------------- /static/js/page.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | // highlight init 4 | try { 5 | hljs.initHighlightingOnLoad(); 6 | } catch (e) { 7 | // low browser 8 | } 9 | 10 | 11 | /** 12 | * getByClass 13 | */ 14 | function getByClass(cls, p){ 15 | p = p || document; 16 | if (p.getElementsByClassName) { 17 | return p.getElementsByClassName(cls); 18 | } else { 19 | var res = []; 20 | var re = new RegExp('(^|\\s+)' + cls + '($|\\s+)', 'i'); 21 | var ele = p.getElementsByTagName('*'); 22 | for (var i = 0; i < ele.length; i++) { 23 | if(re.test(ele[i].className)) { 24 | res.push(ele[i]); 25 | } 26 | } 27 | return res; 28 | } 29 | } 30 | 31 | /** 32 | * addEvent 33 | */ 34 | function addEvent(ele, type, fn) { 35 | if (ele.addEventListener) { 36 | ele.addEventListener(type, fn, false); 37 | } else { 38 | ele.attachEvent('on'+type, function () { 39 | fn && fn.call(ele, event); // 纠正this指向，同时将事件对象传入 40 | }); 41 | } 42 | } 43 | 44 | // 不在iframe中时显示导航 45 | if (top == self) { 46 | var topBar = document.createElement('div'); 47 | topBar.className = 'top-bar'; 48 | topBar.innerHTML = '' + 49 | '前端实验室' + 50 | ''; 51 | document.body.appendChild(topBar); 52 | topBar.onclick = function () { 53 | topBar.style.display = 'none'; 54 | }; 55 | 56 | var container = getByClass('container')[0]; 57 | if (container) { 58 | container.style.paddingTop = '30px'; 59 | } 60 | } 61 | 62 | })(); 63 | -------------------------------------------------------------------------------- /static/sass/page/_common.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | body { 4 | font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", SimSun, sans-serif; 5 | } 6 | .container { 7 | width: auto; 8 | height: 100%; 9 | padding: 0 20px; 10 | } 11 | img[src="http://icon.cnzz.com/img/pic1.gif"] { 12 | display: none; 13 | } 14 | pre { 15 | margin: 20px 0; 16 | } 17 | .linenums li { 18 | list-style-type: decimal; 19 | } 20 | h1 { 21 | font-size: 26px; 22 | line-height: 40px; 23 | } 24 | h2 { 25 | font-size: 24px; 26 | line-height: 36px; 27 | } 28 | h3 { 29 | font-size: 20px; 30 | line-height: 32px; 31 | } 32 | h4 { 33 | font-size: 16px; 34 | line-height: 28px; 35 | } 36 | h5 { 37 | font-size: 14px; 38 | line-height: 24px; 39 | } 40 | h6 { 41 | font-size: 12px; 42 | line-height: 20px; 43 | } 44 | 45 | .top-bar { 46 | position: fixed; 47 | _position: absolute; 48 | top: 0; 49 | z-index: 100; 50 | width: 100%; 51 | height: 30px; 52 | font: 14px/30px "Microsoft Yahei"; 53 | text-align: right; 54 | background-color: #000; 55 | opacity: 0.7; 56 | filter: alpha(opacity=70); 57 | } 58 | .top-bar span { 59 | color: #f5f5f5; 60 | } 61 | .top-bar .lab { 62 | margin-right: 5px; 63 | color: #f5f5f5; 64 | } 65 | .top-bar .home { 66 | margin-right: 10px; 67 | color: #f5f5f5; 68 | } 69 | .top-bar .top-bar-close { 70 | cursor: pointer; 71 | margin-right: 10px; 72 | padding: 0 8px; 73 | color: #fff; 74 | font-size: 14px; 75 | line-height: 30px; 76 | background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMjIvMTC90kbgAAAAZUlEQVQokbVRWwrAMAizYwfZTXaUerPRk2Yf1SI+PvrRgCBpQo02ALSDa0vtDB8RcaJheZsAoNUxwYZj4bpy1uBNQZwZrCmIAaShW9GHDH7mLBNV4nIRt/nslRUOw2n/rBmPX/oHrYLOAqbDwB0AAAAASUVORK5CYII=") 77 | no-repeat center; 78 | } 79 | .top-bar .top-bar-close:hover { 80 | opacity: 0.8; 81 | filter: alpha(opacity=80); 82 | } 83 | -------------------------------------------------------------------------------- /game/flappyBird/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flappy bird 像素鸟游戏 - javascript 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
0
16 |
17 |
18 |
19 |
20 |
21 | game over 22 |
23 | 24 | 25 |
26 | 27 |
28 |
29 | 30 | 33 | 36 | 39 | 42 |
43 | 44 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /project/wordpress/css/global.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* css reset */ 4 | body, 5 | div, 6 | dl, 7 | dt, 8 | dd, 9 | ul, 10 | ol, 11 | li, 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6, 18 | pre, 19 | code, 20 | form, 21 | fieldset, 22 | legend, 23 | input, 24 | textarea, 25 | select, 26 | optgroup, 27 | option, 28 | p, 29 | blockquote, 30 | th, 31 | td { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | fieldset, 36 | img { 37 | border: 0; 38 | } 39 | html, 40 | body { 41 | height: 100%; 42 | } 43 | address, 44 | caption, 45 | cite, 46 | code, 47 | dfn, 48 | em, 49 | i, 50 | th, 51 | var, 52 | optgroup { 53 | font-style: normal; 54 | font-weight: normal; 55 | } 56 | ins { 57 | text-decoration: none; 58 | } 59 | li { 60 | list-style: none; 61 | } 62 | table { 63 | font-size: inherit; 64 | border-collapse: collapse; 65 | } 66 | caption, 67 | th { 68 | text-align: left; 69 | } 70 | h1, 71 | h2, 72 | h3, 73 | h4, 74 | h5, 75 | h6 { 76 | font-size: 100%; 77 | } 78 | q:before, 79 | q:after { 80 | content: ""; 81 | } 82 | abbr, 83 | acronym { 84 | border: 0; 85 | font-variant: normal; 86 | } 87 | legend { 88 | color: #000; 89 | } 90 | input, 91 | button, 92 | textarea, 93 | select, 94 | optgroup, 95 | option { 96 | font-family: inherit; 97 | font-size: inherit; 98 | font-style: inherit; 99 | font-weight: inherit; 100 | } 101 | input, 102 | button, 103 | textarea, 104 | select { 105 | margin: 0; 106 | *font-size: 100%; 107 | line-height: 1.2; 108 | } 109 | input, 110 | textarea, 111 | select { 112 | outline: none; 113 | } 114 | a img, 115 | img { 116 | -ms-interpolation-mode: bicubic; 117 | } 118 | 119 | /* clear float */ 120 | .cls { 121 | *zoom: 1; 122 | } 123 | .cls:after { 124 | display: block; 125 | visibility: hidden; 126 | clear: both; 127 | content: "."; 128 | height: 0; 129 | } 130 | 131 | /* heml5 new tags */ 132 | article, 133 | aside, 134 | canvas, 135 | details, 136 | figcaption, 137 | figure, 138 | footer, 139 | header, 140 | hgroup, 141 | menu, 142 | nav, 143 | section, 144 | summary { 145 | display: block; 146 | } 147 | -------------------------------------------------------------------------------- /static/sass/_reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* css reset */ 4 | body, 5 | div, 6 | dl, 7 | dt, 8 | dd, 9 | ul, 10 | ol, 11 | li, 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6, 18 | code, 19 | form, 20 | fieldset, 21 | legend, 22 | input, 23 | textarea, 24 | select, 25 | optgroup, 26 | option, 27 | p, 28 | blockquote, 29 | th, 30 | td { 31 | margin: 0; 32 | padding: 0; 33 | } 34 | fieldset, 35 | img { 36 | border: 0; 37 | } 38 | address, 39 | caption, 40 | cite, 41 | code, 42 | dfn, 43 | em, 44 | i, 45 | th, 46 | var, 47 | optgroup { 48 | font-style: normal; 49 | font-weight: normal; 50 | } 51 | ins { 52 | text-decoration: none; 53 | } 54 | li { 55 | list-style: none; 56 | } 57 | table { 58 | font-size: inherit; 59 | border-collapse: collapse; 60 | } 61 | caption, 62 | th { 63 | text-align: left; 64 | } 65 | h1, 66 | h2, 67 | h3, 68 | h4, 69 | h5, 70 | h6 { 71 | font-size: 100%; 72 | font-weight: normal; 73 | } 74 | q:before, 75 | q:after { 76 | content: ""; 77 | } 78 | abbr, 79 | acronym { 80 | border: 0; 81 | font-variant: normal; 82 | } 83 | legend { 84 | color: #000; 85 | } 86 | input, 87 | button, 88 | textarea, 89 | select, 90 | optgroup, 91 | option { 92 | font-family: inherit; 93 | font-size: inherit; 94 | font-style: inherit; 95 | font-weight: inherit; 96 | } 97 | input, 98 | button, 99 | textarea, 100 | select { 101 | margin: 0; 102 | *font-size: 100%; 103 | line-height: 1.2; 104 | } 105 | input, 106 | textarea, 107 | select { 108 | outline: none; 109 | } 110 | a img, 111 | img { 112 | -ms-interpolation-mode: bicubic; 113 | } 114 | a { 115 | text-decoration: none; 116 | } 117 | 118 | /* clear float */ 119 | .clearfix { 120 | *zoom: 1; 121 | } 122 | .clearfix:after { 123 | display: block; 124 | visibility: hidden; 125 | clear: both; 126 | content: ""; 127 | height: 0; 128 | } 129 | 130 | /* heml5 new tags */ 131 | article, 132 | aside, 133 | canvas, 134 | details, 135 | figcaption, 136 | figure, 137 | footer, 138 | header, 139 | hgroup, 140 | menu, 141 | nav, 142 | section, 143 | summary { 144 | display: block; 145 | } 146 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_print.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Basic print styles 3 | // -------------------------------------------------- 4 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 5 | 6 | @media print { 7 | 8 | * { 9 | text-shadow: none !important; 10 | color: #000 !important; // Black prints faster: h5bp.com/s 11 | background: transparent !important; 12 | box-shadow: none !important; 13 | } 14 | 15 | a, 16 | a:visited { 17 | text-decoration: underline; 18 | } 19 | 20 | a[href]:after { 21 | content: " (" attr(href) ")"; 22 | } 23 | 24 | abbr[title]:after { 25 | content: " (" attr(title) ")"; 26 | } 27 | 28 | // Don't show links for images, or javascript/internal links 29 | a[href^="javascript:"]:after, 30 | a[href^="#"]:after { 31 | content: ""; 32 | } 33 | 34 | pre, 35 | blockquote { 36 | border: 1px solid #999; 37 | page-break-inside: avoid; 38 | } 39 | 40 | thead { 41 | display: table-header-group; // h5bp.com/t 42 | } 43 | 44 | tr, 45 | img { 46 | page-break-inside: avoid; 47 | } 48 | 49 | img { 50 | max-width: 100% !important; 51 | } 52 | 53 | p, 54 | h2, 55 | h3 { 56 | orphans: 3; 57 | widows: 3; 58 | } 59 | 60 | h2, 61 | h3 { 62 | page-break-after: avoid; 63 | } 64 | 65 | // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 66 | // Once fixed, we can just straight up remove this. 67 | select { 68 | background: #fff !important; 69 | } 70 | 71 | // Bootstrap components 72 | .navbar { 73 | display: none; 74 | } 75 | .table { 76 | td, 77 | th { 78 | background-color: #fff !important; 79 | } 80 | } 81 | .btn, 82 | .dropup > .btn { 83 | > .caret { 84 | border-top-color: #000 !important; 85 | } 86 | } 87 | .label { 88 | border: 1px solid #000; 89 | } 90 | 91 | .table { 92 | border-collapse: collapse !important; 93 | } 94 | .table-bordered { 95 | th, 96 | td { 97 | border: 1px solid #ddd !important; 98 | } 99 | } 100 | 101 | } 102 | -------------------------------------------------------------------------------- /tools/img2base64.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "在线图片转base64" 4 | } 5 | 6 | 7 | 49 | 50 |
51 |

支持 PNG、GIF、JPG、WEBP等格式的图片转换成base64编码

52 | 53 |
54 | 55 |

你选择的图片是：

56 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /css3/rgba.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "rgba" 4 | } 5 | 6 | 7 | 16 | 17 |

rgba

18 |

语法

19 | 
20 | R：红色值。正整数 | 百分数
21 | G：绿色值。正整数 | 百分数
22 | B：蓝色值。正整数| 百分数
23 | A：透明度。取值0~1之间
24 | 25 |

说明

26 |
27 | RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。 28 |
29 | 30 |

纯色不透明

31 |
32 | 
.rgba-1{ width:50px; height:50px; background:rgb(255,0,0); }
33 | 34 |

不透明度0.8

35 |
36 | 
.rgba-2{ width:50px; height:50px; background:rgba(255,0,0,.8); }
37 | 38 |

不透明度0.6

39 |
40 | 
.rgba-3{ width:50px; height:50px; background:rgba(255,0,0,.6); }
41 | 42 |

不透明度0.4

43 |
44 | 
.rgba-2{ width:50px; height:50px; background:rgba(255,0,0,.4); }
45 | 46 |

不透明度0.2

47 |
48 | 
.rgba-3{ width:50px; height:50px; background:rgba(255,0,0,.2); }
49 | 50 |

不透明度0 完全透明

51 |
52 | 
.rgba-3{ width:50px; height:50px; background:rgba(255,0,0,0); border:1px solid #ccc;/*加边框看得清楚*/ }
53 | 54 |

对比

55 |
    56 |
  • 1
    • 57 |
  • 0.8
    • 58 |
  • 0.6
    • 59 |
  • 0.4
    • 60 |
  • 0.2
    • 61 |
  • 0
    • 62 |
-------------------------------------------------------------------------------- /static/css/top-bar.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,code,form,fieldset,legend,input,textarea,select,optgroup,option,p,blockquote,th,td{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,i,th,var,optgroup{font-style:normal;font-weight:normal}ins{text-decoration:none}li{list-style:none}table{font-size:inherit;border-collapse:collapse}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:""}abbr,acronym{border:0;font-variant:normal}legend{color:#000}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{margin:0;*font-size:100%;line-height:1.2}input,textarea,select{outline:none}a img,img{-ms-interpolation-mode:bicubic}a{text-decoration:none}.clearfix{*zoom:1}.clearfix:after{display:block;visibility:hidden;clear:both;content:"";height:0}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body{font-family:Helvetica, Tahoma, Arial, "Microsoft YaHei", SimSun, sans-serif}.container{width:auto;height:100%;padding:0 20px}img[src="http://icon.cnzz.com/img/pic1.gif"]{display:none}pre{margin:20px 0}.linenums li{list-style-type:decimal}h1{font-size:26px;line-height:40px}h2{font-size:24px;line-height:36px}h3{font-size:20px;line-height:32px}h4{font-size:16px;line-height:28px}h5{font-size:14px;line-height:24px}h6{font-size:12px;line-height:20px}.top-bar{position:fixed;_position:absolute;top:0;z-index:100;width:100%;height:30px;font:14px/30px "Microsoft Yahei";text-align:right;background-color:#000;opacity:0.7;filter:alpha(opacity=70)}.top-bar span{color:#f5f5f5}.top-bar .lab{margin-right:5px;color:#f5f5f5}.top-bar .home{margin-right:10px;color:#f5f5f5}.top-bar .top-bar-close{cursor:pointer;margin-right:10px;padding:0 8px;color:#fff;font-size:14px;line-height:30px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTEvMjIvMTC90kbgAAAAZUlEQVQokbVRWwrAMAizYwfZTXaUerPRk2Yf1SI+PvrRgCBpQo02ALSDa0vtDB8RcaJheZsAoNUxwYZj4bpy1uBNQZwZrCmIAaShW9GHDH7mLBNV4nIRt/nslRUOw2n/rBmPX/oHrYLOAqbDwB0AAAAASUVORK5CYII=") no-repeat center}.top-bar .top-bar-close:hover{opacity:0.8;filter:alpha(opacity=80)} 2 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: $line-height-computed 0; 8 | border-radius: $border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: $padding-base-vertical $padding-base-horizontal; 17 | line-height: $line-height-base; 18 | text-decoration: none; 19 | color: $pagination-color; 20 | background-color: $pagination-bg; 21 | border: 1px solid $pagination-border; 22 | margin-left: -1px; 23 | } 24 | &:first-child { 25 | > a, 26 | > span { 27 | margin-left: 0; 28 | @include border-left-radius($border-radius-base); 29 | } 30 | } 31 | &:last-child { 32 | > a, 33 | > span { 34 | @include border-right-radius($border-radius-base); 35 | } 36 | } 37 | } 38 | 39 | > li > a, 40 | > li > span { 41 | &:hover, 42 | &:focus { 43 | color: $pagination-hover-color; 44 | background-color: $pagination-hover-bg; 45 | border-color: $pagination-hover-border; 46 | } 47 | } 48 | 49 | > .active > a, 50 | > .active > span { 51 | &, 52 | &:hover, 53 | &:focus { 54 | z-index: 2; 55 | color: $pagination-active-color; 56 | background-color: $pagination-active-bg; 57 | border-color: $pagination-active-border; 58 | cursor: default; 59 | } 60 | } 61 | 62 | > .disabled { 63 | > span, 64 | > span:hover, 65 | > span:focus, 66 | > a, 67 | > a:hover, 68 | > a:focus { 69 | color: $pagination-disabled-color; 70 | background-color: $pagination-disabled-bg; 71 | border-color: $pagination-disabled-border; 72 | cursor: not-allowed; 73 | } 74 | } 75 | } 76 | 77 | // Sizing 78 | // -------------------------------------------------- 79 | 80 | // Large 81 | .pagination-lg { 82 | @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); 83 | } 84 | 85 | // Small 86 | .pagination-sm { 87 | @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small); 88 | } 89 | -------------------------------------------------------------------------------- /css3/demo-accordion.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "纯css3实现手风琴效果" 4 | } 5 | 6 | 7 | 42 | 43 |
44 |
45 | Collapsible Group Item #1 46 |
47 |
    48 |
  • test list #1
    • 49 |
  • test list #1
    • 50 |
  • test list #1
    • 51 |
52 |
53 |
54 |
55 | Collapsible Group Item #2 56 |
57 |
    58 |
  • test list #2
    • 59 |
  • test list #2
    • 60 |
  • test list #2
    • 61 |
  • test list #2
    • 62 |
63 |
64 |
65 |
66 | Collapsible Group Item #3 67 |
68 |
    69 |
  • test list #3
    • 70 |
  • test list #3
    • 71 |
  • test list #3
    • 72 |
73 |
74 |
75 |
76 | Collapsible Group Item #4 77 |
78 |
    79 |
  • test list #4
    • 80 |
  • test list #4
    • 81 |
  • test list #4
    • 82 |
  • test list #4
    • 83 |
84 |
85 |
86 |
-------------------------------------------------------------------------------- /static/sass/page/_highlight-github.scss: -------------------------------------------------------------------------------- 1 | .hljs { 2 | display: block; 3 | overflow-x: auto; 4 | padding: 0.5em; 5 | color: #333; 6 | background: #f8f8f8; 7 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 8 | font-size: 14px; 9 | line-height: 1.45; 10 | -webkit-text-size-adjust: none; 11 | margin: 15px 0; 12 | } 13 | 14 | .hljs-comment, 15 | .hljs-template_comment, 16 | .diff .hljs-header, 17 | .hljs-javadoc { 18 | color: #998; 19 | font-style: italic; 20 | } 21 | 22 | .hljs-keyword, 23 | .css .rule .hljs-keyword, 24 | .hljs-winutils, 25 | .javascript .hljs-title, 26 | .nginx .hljs-title, 27 | .hljs-subst, 28 | .hljs-request, 29 | .hljs-status { 30 | color: #333; 31 | font-weight: bold; 32 | } 33 | 34 | .hljs-number, 35 | .hljs-hexcolor, 36 | .ruby .hljs-constant { 37 | color: #008080; 38 | } 39 | 40 | .hljs-string, 41 | .hljs-tag .hljs-value, 42 | .hljs-phpdoc, 43 | .hljs-dartdoc, 44 | .tex .hljs-formula { 45 | color: #d14; 46 | } 47 | 48 | .hljs-title, 49 | .hljs-id, 50 | .scss .hljs-preprocessor { 51 | color: #900; 52 | font-weight: bold; 53 | } 54 | 55 | .javascript .hljs-title, 56 | .hljs-list .hljs-keyword, 57 | .hljs-subst { 58 | font-weight: normal; 59 | } 60 | 61 | .hljs-class .hljs-title, 62 | .hljs-type, 63 | .vhdl .hljs-literal, 64 | .tex .hljs-command { 65 | color: #458; 66 | font-weight: bold; 67 | } 68 | 69 | .hljs-tag, 70 | .hljs-tag .hljs-title, 71 | .hljs-rules .hljs-property, 72 | .django .hljs-tag .hljs-keyword { 73 | color: #000080; 74 | font-weight: normal; 75 | } 76 | 77 | .hljs-attribute, 78 | .hljs-variable, 79 | .lisp .hljs-body { 80 | color: #008080; 81 | } 82 | 83 | .hljs-regexp { 84 | color: #009926; 85 | } 86 | 87 | .hljs-symbol, 88 | .ruby .hljs-symbol .hljs-string, 89 | .lisp .hljs-keyword, 90 | .clojure .hljs-keyword, 91 | .scheme .hljs-keyword, 92 | .tex .hljs-special, 93 | .hljs-prompt { 94 | color: #990073; 95 | } 96 | 97 | .hljs-built_in { 98 | color: #0086b3; 99 | } 100 | 101 | .hljs-preprocessor, 102 | .hljs-pragma, 103 | .hljs-pi, 104 | .hljs-doctype, 105 | .hljs-shebang, 106 | .hljs-cdata { 107 | color: #999; 108 | font-weight: bold; 109 | } 110 | 111 | .hljs-deletion { 112 | background: #fdd; 113 | } 114 | 115 | .hljs-addition { 116 | background: #dfd; 117 | } 118 | 119 | .diff .hljs-change { 120 | background: #0086b3; 121 | } 122 | 123 | .hljs-chunk { 124 | color: #aaa; 125 | } 126 | -------------------------------------------------------------------------------- /javascript/image-roll.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "无缝滚动" 4 | } 5 | 6 | 16 | 17 |
18 |
    19 |
    • 20 |
    • 21 |
    • 22 |
    • 23 |
    • 24 |
25 |
26 |

无缝滚动demo

27 |

← →键可以控制滚动方向

28 | 29 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Framework grid generation 2 | // 3 | // Used only by Bootstrap to generate the correct number of grid classes given 4 | // any value of `$grid-columns`. 5 | 6 | // [converter] This is defined recursively in LESS, but Sass supports real loops 7 | @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { 8 | @for $i from (1 + 1) through $grid-columns { 9 | $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 10 | } 11 | #{$list} { 12 | position: relative; 13 | // Prevent columns from collapsing when empty 14 | min-height: 1px; 15 | // Inner gutter via padding 16 | padding-left: ($grid-gutter-width / 2); 17 | padding-right: ($grid-gutter-width / 2); 18 | } 19 | } 20 | 21 | 22 | // [converter] This is defined recursively in LESS, but Sass supports real loops 23 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { 24 | @for $i from (1 + 1) through $grid-columns { 25 | $list: "#{$list}, .col-#{$class}-#{$i}"; 26 | } 27 | #{$list} { 28 | float: left; 29 | } 30 | } 31 | 32 | 33 | @mixin calc-grid-column($index, $class, $type) { 34 | @if ($type == width) and ($index > 0) { 35 | .col-#{$class}-#{$index} { 36 | width: percentage(($index / $grid-columns)); 37 | } 38 | } 39 | @if ($type == push) and ($index > 0) { 40 | .col-#{$class}-push-#{$index} { 41 | left: percentage(($index / $grid-columns)); 42 | } 43 | } 44 | @if ($type == push) and ($index == 0) { 45 | .col-#{$class}-push-0 { 46 | left: auto; 47 | } 48 | } 49 | @if ($type == pull) and ($index > 0) { 50 | .col-#{$class}-pull-#{$index} { 51 | right: percentage(($index / $grid-columns)); 52 | } 53 | } 54 | @if ($type == pull) and ($index == 0) { 55 | .col-#{$class}-pull-0 { 56 | right: auto; 57 | } 58 | } 59 | @if ($type == offset) { 60 | .col-#{$class}-offset-#{$index} { 61 | margin-left: percentage(($index / $grid-columns)); 62 | } 63 | } 64 | } 65 | 66 | // [converter] This is defined recursively in LESS, but Sass supports real loops 67 | @mixin loop-grid-columns($columns, $class, $type) { 68 | @for $i from 0 through $columns { 69 | @include calc-grid-column($i, $class, $type); 70 | } 71 | } 72 | 73 | 74 | // Create grid for specific class 75 | @mixin make-grid($class) { 76 | @include float-grid-columns($class); 77 | @include loop-grid-columns($grid-columns, $class, width); 78 | @include loop-grid-columns($grid-columns, $class, pull); 79 | @include loop-grid-columns($grid-columns, $class, push); 80 | @include loop-grid-columns($grid-columns, $class, offset); 81 | } 82 | -------------------------------------------------------------------------------- /css3/linear-gradient.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "linear-gradient" 4 | } 5 | 6 | 13 | 14 | 15 |

linear-gradient

16 |

语法

17 | 
18 | <linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
19 | <point>：[ left | right ]? [ top | bottom ]? || <angle>?
20 | <color-stop>：<color> [ <length> | <percentage> ]?
21 |
22 | 23 |

说明

24 | 
25 | <point>可取如下值
26 | 	left：设置左边为渐变起点的横坐标值。
27 | 	right：设置右边为渐变起点的横坐标值。
28 | 	top：设置顶部为渐变起点的纵坐标值。
29 | 	bottom：设置底部为渐变起点的纵坐标值。
30 | <angle>：
31 | 	用角度值指定渐变的方向（或角度）。
32 | <color-stop>：
33 | 	指定渐变的起止颜色。
34 |
35 | 36 |

从上到下

37 | 38 | 
39 | .top-bottom{ 
40 | 	background:-moz-linear-gradient(top, #e97e00, #f80200);
41 | 	background:-webkit-linear-gradient:(top, #e97e00, #f80200); 
42 | 	background:linear-gradient:(top, #e97e00, #f80200);
43 | 	float:left;
44 | }
45 | 46 |

从左到右

47 | 48 | 
49 | .left-right{ 
50 | 	background:-moz-linear-gradient(left, #e97e00, #f80200);
51 | 	background:-webkit-linear-gradient:(left, #e97e00, #f80200); 
52 | 	background:linear-gradient:(left, #e97e00, #f80200);
53 | }
54 | 55 |

沿45度方向渐变

56 | 57 | 
58 | .topleft{ 
59 | 	background:-moz-linear-gradient(45deg, #e97e00, #f80200);
60 | 	background:-webkit-linear-gradient:(45deg, #e97e00, #f80200); 
61 | 	background:linear-gradient:(45deg, #e97e00, #f80200);
62 | }
-------------------------------------------------------------------------------- /css3/border-radius.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "border-radius" 4 | } 5 | 6 | 12 | 13 |

border-radius

14 |

语法

15 | 
16 | border-radius ： none | {1,4} [/ {1,4} ]?
17 | 相关属性：border-top-left-radius, border-top-right-radius, border-botton-left-radius, border-bottom-right-radius
18 | 19 | 20 |
统一设置各边圆角
21 |

普通圆角水平半径与垂直半径相等

22 |
23 | 
24 | .border-radius-1{
25 | 	width:100px;
26 | 	height:100px;
27 | 	background-color:pink;
28 | 	-moz-border-radius:10px;
29 | 	-webkit-border-radius:10px;
30 | 	border-radius:10px;
31 | }
32 | 33 |

特殊圆角水平半径与垂直半径不相等

34 |
35 | 
36 | .border-radius-2{
37 | 	width:100px;
38 | 	height:100px;
39 | 	background-color:pink;
40 | 	-moz-border-radius:10px/30px;	/*==="/"前表示水平半径，"/"后表示垂直半径===*/
41 | 	-webkit-border-radius:10px/30px;
42 | 	border-radius:10px/30px;
43 | }
44 | 45 |
单独设置某边圆角以左上角为例
46 | 47 |

普通圆角水平半径与垂直半径相等

48 |
49 | 
50 | .border-radius-3{
51 | 	width:100px;
52 | 	height:100px;
53 | 	background-color:pink;
54 | 	-moz-border-top-left-radius:10px;
55 | 	-webkit-border-top-left-radius:10px;
56 | 	border-top-left-radius:10px;
57 | }
58 | 59 | 60 |

特殊圆角水平半径与垂直半径不相等

61 |
62 | 
63 | .border-radius-4{
64 | 	width:100px;
65 | 	height:100px;
66 | 	background-color:pink;
67 | 	-moz-border-top-left-radius:10px 30px; /*=== 注：此处水平半径与垂直半径之间无 "/" ===*/
68 | 	-webkit-border-top-left-radius:10px 30px;
69 | 	border-radius:10px 30px;
70 | }
71 |
说明：border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius属性同border-top-left-radius
-------------------------------------------------------------------------------- /javascript/calculator.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "js简易计算器" 4 | } 5 | 6 | 7 | 18 | 19 | 20 |
21 |
22 |
23 | 复位 24 | 删除 25 | 7 26 | 8 27 | 9 28 | / 29 | 4 30 | 5 31 | 6 32 | * 33 | 1 34 | 2 35 | 3 36 | - 37 | . 38 | 0 39 | = 40 | + 41 |
42 |
43 | 44 | 82 | -------------------------------------------------------------------------------- /javascript/css/focus.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* focus */ 4 | .focus { 5 | position: relative; 6 | zoom: 1; 7 | width: 100%; 8 | height: 410px; 9 | background-color: #010101; 10 | } 11 | .focus img { 12 | display: block; 13 | } 14 | .focus-img { 15 | position: absolute; 16 | z-index: 100; 17 | width: 100%; 18 | height: 410px; 19 | } 20 | .focus-img li { 21 | overflow: hidden; 22 | display: none; 23 | position: absolute; 24 | width: 100%; 25 | height: 410px; 26 | opacity: 0; 27 | filter: alpha(opacity=0); 28 | background-repeat: no-repeat; 29 | background-position: center; 30 | } 31 | .focus-img li a { 32 | display: block; 33 | width: 1145px; 34 | height: 410px; 35 | margin: 0 auto; 36 | } 37 | 38 | /* focus-nav */ 39 | .focus-nav { 40 | position: absolute; 41 | z-index: 102; 42 | right: 0; 43 | bottom: 25px; 44 | width: 150px; 45 | height: 305px; 46 | padding: 13px; 47 | background: url(../img/focus-nav-bg.png); 48 | _background: #none; 49 | _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/focus-nav-bg.png"); 50 | } 51 | .focus-nav-list { 52 | overflow: hidden; 53 | border-radius: 6px; 54 | background-color: #010101; 55 | } 56 | .focus-nav-list li { 57 | float: left; 58 | cursor: pointer; 59 | opacity: 0.4; 60 | filter: alpha(opacity=40); 61 | border-bottom: 1px solid #2d2d2d; 62 | } 63 | .focus-nav-list .current { 64 | opacity: 1; 65 | filter: alpha(opacity=100); 66 | } 67 | 68 | /* focus-txt */ 69 | .focus-txt { 70 | cursor: default; 71 | position: absolute; 72 | bottom: 0; 73 | z-index: 101; 74 | width: 1145px; 75 | height: 95px; 76 | } 77 | .focus-txt-bg { 78 | position: absolute; 79 | left: 0; 80 | z-index: -1; 81 | width: 660px; 82 | height: 70px; 83 | background: url(../img/focus-txt-bg.png) no-repeat; 84 | _background: none; 85 | } 86 | .focus-txt-btn { 87 | float: left; 88 | width: 52px; 89 | height: 52px; 90 | margin: 9px 0 0 5px; 91 | } 92 | .focus-txt-btn a { 93 | display: block; 94 | width: 52px; 95 | height: 52px; 96 | background: url(../img/focus-txt-play.png) no-repeat; 97 | _background: none; 98 | _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/focus-txt-play.png"); 99 | } 100 | .focus-txt-btn a:hover { 101 | background: url(../img/focus-txt-play-h.png) no-repeat; 102 | _background: none; 103 | _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/focus-txt-play-h.png"); 104 | } 105 | .focus-txt-con { 106 | float: left; 107 | margin-left: 10px; 108 | height: 70px; 109 | font: 18px/70px "Microsoft Yahei"; 110 | _font-weight: bold; 111 | } 112 | .focus-txt-con a { 113 | display: inline-block; 114 | height: 70px; 115 | color: #fff; 116 | } 117 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | // WebKit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Spec and IE10+ 16 | @keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | 22 | 23 | // Bar itself 24 | // ------------------------- 25 | 26 | // Outer container 27 | .progress { 28 | overflow: hidden; 29 | height: $line-height-computed; 30 | margin-bottom: $line-height-computed; 31 | background-color: $progress-bg; 32 | border-radius: $border-radius-base; 33 | @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 34 | } 35 | 36 | // Bar of progress 37 | .progress-bar { 38 | float: left; 39 | width: 0%; 40 | height: 100%; 41 | font-size: $font-size-small; 42 | line-height: $line-height-computed; 43 | color: $progress-bar-color; 44 | text-align: center; 45 | background-color: $progress-bar-bg; 46 | @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 47 | @include transition(width .6s ease); 48 | } 49 | 50 | // Striped bars 51 | // 52 | // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the 53 | // `.progress-bar-striped` class, which you just add to an existing 54 | // `.progress-bar`. 55 | .progress-striped .progress-bar, 56 | .progress-bar-striped { 57 | @include gradient-striped(); 58 | background-size: 40px 40px; 59 | } 60 | 61 | // Call animation for the active one 62 | // 63 | // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the 64 | // `.progress-bar.active` approach. 65 | .progress.active .progress-bar, 66 | .progress-bar.active { 67 | @include animation(progress-bar-stripes 2s linear infinite); 68 | } 69 | 70 | // Account for lower percentages 71 | .progress-bar { 72 | &[aria-valuenow="1"], 73 | &[aria-valuenow="2"] { 74 | min-width: 30px; 75 | } 76 | 77 | &[aria-valuenow="0"] { 78 | color: $gray-light; 79 | min-width: 30px; 80 | background-color: transparent; 81 | background-image: none; 82 | box-shadow: none; 83 | } 84 | } 85 | 86 | 87 | 88 | // Variations 89 | // ------------------------- 90 | 91 | .progress-bar-success { 92 | @include progress-bar-variant($progress-bar-success-bg); 93 | } 94 | 95 | .progress-bar-info { 96 | @include progress-bar-variant($progress-bar-info-bg); 97 | } 98 | 99 | .progress-bar-warning { 100 | @include progress-bar-variant($progress-bar-warning-bg); 101 | } 102 | 103 | .progress-bar-danger { 104 | @include progress-bar-variant($progress-bar-danger-bg); 105 | } 106 | -------------------------------------------------------------------------------- /javascript/accordion-slide.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "手风琴效果焦点图" 4 | } 5 | 6 | 7 | 8 | 15 | 16 | 17 |
18 |
    19 |
  • 这是第一张图片
    • 20 |
  • 这是第二张图片
    • 21 |
  • 这是第三张图片
    • 22 |
  • 这是第四张图片
    • 23 |
  • 这是第五张图片
    • 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /css3/demo-android.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "css3绘制安卓logo" 4 | } 5 | 6 | 7 | 110 | 111 |
112 |
113 | 114 | 115 | 116 | 117 |
118 |
119 | 120 | 121 | 122 | 123 |
124 |
-------------------------------------------------------------------------------- /static/sass/page/bootstrap/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Tooltips 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .tooltip { 8 | position: absolute; 9 | z-index: $zindex-tooltip; 10 | display: block; 11 | visibility: visible; 12 | font-size: $font-size-small; 13 | line-height: 1.4; 14 | @include opacity(0); 15 | 16 | &.in { @include opacity($tooltip-opacity); } 17 | &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; } 18 | &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; } 19 | &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; } 20 | &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; } 21 | } 22 | 23 | // Wrapper for the tooltip content 24 | .tooltip-inner { 25 | max-width: $tooltip-max-width; 26 | padding: 3px 8px; 27 | color: $tooltip-color; 28 | text-align: center; 29 | text-decoration: none; 30 | background-color: $tooltip-bg; 31 | border-radius: $border-radius-base; 32 | } 33 | 34 | // Arrows 35 | .tooltip-arrow { 36 | position: absolute; 37 | width: 0; 38 | height: 0; 39 | border-color: transparent; 40 | border-style: solid; 41 | } 42 | .tooltip { 43 | &.top .tooltip-arrow { 44 | bottom: 0; 45 | left: 50%; 46 | margin-left: -$tooltip-arrow-width; 47 | border-width: $tooltip-arrow-width $tooltip-arrow-width 0; 48 | border-top-color: $tooltip-arrow-color; 49 | } 50 | &.top-left .tooltip-arrow { 51 | bottom: 0; 52 | left: $tooltip-arrow-width; 53 | border-width: $tooltip-arrow-width $tooltip-arrow-width 0; 54 | border-top-color: $tooltip-arrow-color; 55 | } 56 | &.top-right .tooltip-arrow { 57 | bottom: 0; 58 | right: $tooltip-arrow-width; 59 | border-width: $tooltip-arrow-width $tooltip-arrow-width 0; 60 | border-top-color: $tooltip-arrow-color; 61 | } 62 | &.right .tooltip-arrow { 63 | top: 50%; 64 | left: 0; 65 | margin-top: -$tooltip-arrow-width; 66 | border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; 67 | border-right-color: $tooltip-arrow-color; 68 | } 69 | &.left .tooltip-arrow { 70 | top: 50%; 71 | right: 0; 72 | margin-top: -$tooltip-arrow-width; 73 | border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; 74 | border-left-color: $tooltip-arrow-color; 75 | } 76 | &.bottom .tooltip-arrow { 77 | top: 0; 78 | left: 50%; 79 | margin-left: -$tooltip-arrow-width; 80 | border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; 81 | border-bottom-color: $tooltip-arrow-color; 82 | } 83 | &.bottom-left .tooltip-arrow { 84 | top: 0; 85 | left: $tooltip-arrow-width; 86 | border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; 87 | border-bottom-color: $tooltip-arrow-color; 88 | } 89 | &.bottom-right .tooltip-arrow { 90 | top: 0; 91 | right: $tooltip-arrow-width; 92 | border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; 93 | border-bottom-color: $tooltip-arrow-color; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | // Form validation states 2 | // 3 | // Used in forms.less to generate the form validation CSS for warnings, errors, 4 | // and successes. 5 | 6 | @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { 7 | // Color the label and help text 8 | .help-block, 9 | .control-label, 10 | .radio, 11 | .checkbox, 12 | .radio-inline, 13 | .checkbox-inline { 14 | color: $text-color; 15 | } 16 | // Set the border and box shadow on specific inputs to match 17 | .form-control { 18 | border-color: $border-color; 19 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work 20 | &:focus { 21 | border-color: darken($border-color, 10%); 22 | $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); 23 | @include box-shadow($shadow); 24 | } 25 | } 26 | // Set validation states also for addons 27 | .input-group-addon { 28 | color: $text-color; 29 | border-color: $border-color; 30 | background-color: $background-color; 31 | } 32 | // Optional feedback icon 33 | .form-control-feedback { 34 | color: $text-color; 35 | } 36 | } 37 | 38 | 39 | // Form control focus state 40 | // 41 | // Generate a customized focus state and for any input with the specified color, 42 | // which defaults to the `$input-border-focus` variable. 43 | // 44 | // We highly encourage you to not customize the default value, but instead use 45 | // this to tweak colors on an as-needed basis. This aesthetic change is based on 46 | // WebKit's default styles, but applicable to a wider range of browsers. Its 47 | // usability and accessibility should be taken into account with any change. 48 | // 49 | // Example usage: change the default blue border and shadow to white for better 50 | // contrast against a dark gray background. 51 | @mixin form-control-focus($color: $input-border-focus) { 52 | $color-rgba: rgba(red($color), green($color), blue($color), .6); 53 | &:focus { 54 | border-color: $color; 55 | outline: 0; 56 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); 57 | } 58 | } 59 | 60 | // Form control sizing 61 | // 62 | // Relative text size, padding, and border-radii changes for form controls. For 63 | // horizontal sizing, wrap controls in the predefined grid classes. ` 51 |

52 | 53 | 54 | 55 | 60 |

61 |

生成的javascript代码

62 | 63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /css3/box-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "box-shadow" 4 | } 5 | 6 | 7 | 13 | 14 | 15 |

box-shadow

16 |

语法

17 | 
18 | box-shadow：none | <shadow> [ , <shadow> ]*
19 | <shadow> = inset? && [ <length>{2,4} && <color>? ]
20 |
21 | 22 | 23 |

说明

24 |
25 | 值为none时表示无阴影
26 | inset:设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
27 | <shadow>中可取2-4个长度值和一个颜色值
28 | 1.第1个长度值用来设置对象的阴影水平偏移值。可以为负值
29 | 2.第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
30 | 3.第3个值可选，如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
31 | 4.第4个值可选，如果提供了第4个长度值则用来设置对象对象的阴影外延值。可以为负值
32 | 5.最后一个值为阴影颜色，也可用rgba或hsla的透明色 33 |
34 |

举例

35 |
外阴影效果
36 | 
37 | .bxo-shadow-1{ 
38 |     width:160px; 
39 |     padding:10px; 
40 |     text-align:center; 
41 |     background-color:#eee; 
42 |     -webkit-box-shadow:5px 5px rgba(0,0,0,.5);
43 |     -moz-box-shadow:5px 5px rgba(0,0,0,.5);
44 |     box-shadow:5px 5px rgba(0,0,0,.5);
45 | }
46 | 47 |
外阴影模糊效果
48 | 
49 | .box-shadow-2{ 
50 |     width:160px; 
51 |     padding:10px; 
52 |     text-align:center;
53 |     background-color:#eee;
54 |     -webkit-box-shadow:5px 5px 10px rgba(0,0,0,.5); 
55 |     -moz-box-shadow:5px 5px 10px rgba(0,0,0,.5);
56 |     box-shadow:5px 5px 10px rgba(0,0,0,.5);
57 | }
58 | 59 | 60 |
外阴影模糊延伸效果
61 | 
62 | .box-shadow-3{ 
63 |     width:160px; 
64 |     padding:10px; 
65 |     text-align:center;
66 |     background-color:#eee;
67 |     -webkit-box-shadow:5px 5px 10px 10px rgba(0,0,0,.5); 
68 |     -moz-box-shadow:5px 5px 10px 10px rgba(0,0,0,.5);
69 |     box-shadow:5px 5px 10px 10px rgba(0,0,0,.5);
70 | }
71 | 72 |
内阴影效果
73 | 
74 | .box-shadow-4{ 
75 |     width:160px; 
76 |     padding:10px; 
77 |     text-align:center; 
78 |     background-color:#eee; 
79 |     -webkit-box-shadow:inset 5px 5px 5px rgba(0,0,0,.5); 
80 |     -moz-box-shadow:inset 5px 5px 5px rgba(0,0,0,.5); 
81 |     box-shadow:inset 5px 5px 5px rgba(0,0,0,.5);
82 | }
83 |
-------------------------------------------------------------------------------- /static/js/index.min.js: -------------------------------------------------------------------------------- 1 | function animateLogo(){$(".animation-logo p").eq(0).addClass("txt-1"),setTimeout(function(){$(".animation-logo p").eq(0).removeClass("txt-1")},3e3),setTimeout(function(){animateLogo()},4e3)}var setting={data:{simpleData:{enable:!0}}},zNodes=[{name:"project",open:!0,children:[{name:"博客主题(旧)",url:"project/wordpress/index.html"}]},{name:"game",open:!0,children:[{name:"js版2048游戏",url:"game/2048/index.html"},{name:"js版flappy bird",url:"game/flappyBird/index.html"}]},{name:"svg",open:!0,children:[{name:"svg基本图形",url:"svg/basic.html"}]},{name:"tools",open:!0,children:[{name:"html转javascript",url:"tools/html2js.html"},{name:"图片转base64工具",url:"tools/img2base64.html"}]},{name:"css3",open:!0,children:[{name:"border-radius",url:"css3/border-radius.html"},{name:"rgba",url:"css3/rgba.html"},{name:"text-shadow",url:"css3/text-shadow.html"},{name:"box-shadow",url:"css3/box-shadow.html"},{name:"linear-gradient",url:"css3/linear-gradient.html"},{name:"transform",url:"css3/transform.html"},{name:"transition",url:"css3/transition.html"},{name:"animation",url:"css3/animation.html"},{name:"demo",open:!0,children:[{name:"css3绘制android logo",url:"css3/demo-android.html"},{name:"css3绘制时钟",url:"css3/demo-clock.html"},{name:"纯css3手风琴效果",url:"css3/demo-accordion.html"}]}]},{name:"css",open:!0,children:[{name:"图片垂直居中",url:"css/vertically-center-image.html"},{name:"css两列布局",url:"css/layout.html"},{name:"css三列布局",url:"css/three-col-layout.html"}]},{name:"javascript",open:!0,children:[{name:"可拖拽改变大小对话框",url:"javascript/drag-change-size.html"},{name:"拖拽交换图片位置",url:"javascript/drag-photo.html"},{name:"手风琴效果-焦点图",url:"javascript/accordion-slide.html"},{name:"碎片效果-焦点图",url:"javascript/random-hide-slide.html"},{name:"面向对象-焦点图",url:"javascript/oop-focus.html"},{name:"模拟滚动条",url:"javascript/scroll.html"},{name:"简单选项卡",url:"javascript/tabs.html"},{name:"简易计算器",url:"javascript/calculator.html"},{name:"简单搜索功能",url:"javascript/search.html"},{name:"简单排序功能",url:"javascript/sort.html"},{name:"自定义浏览器右键菜单",url:"javascript/contextmenu.html"},{name:"取模运算实现无缝滚动",url:"javascript/image-roll.html"},{name:"简单星星评分功能",url:"javascript/star-rating.html"},{name:"简单日历组件",url:"javascript/calendar.html"}]},{name:"jquery",open:!1,children:[{name:"选项卡插件myTabs",url:"jquery/myTabs.html"},{name:"轮播图插件mySlide",url:"jquery/mySlide.html"},{name:"placeholder插件",url:"jquery/myPlaceholder.html"}]}];$(function(){$.fn.zTree.init($("#nav-tree"),setting,zNodes),window.location.hash&&$(".iframe").attr("src",window.location.hash.replace(/_/g,"/").substring("1")+".html"),$(".nav").delegate("#nav-tree li li a","click",function(a){var b=$(this).attr("href");$(".iframe").attr("src",b),a.preventDefault();var c=window.location.href,d=b.substring(b.indexOf("lab"),b.indexOf(".htm")).replace("lab/","");window.location.href=c.substring(0,c.indexOf("#"))+"#"+d.replace("/","_")}),setTimeout(function(){$(".tips").slideUp()},4e3),$(".close-aside").click(function(){var a=$(this),b=$(".main"),c=$(".aside");a.hasClass("open-aside")?(b.removeClass("main-noaside"),c.removeClass("noaside").find(".nav").show(),a.removeClass("open-aside")):(b.addClass("main-noaside"),c.addClass("noaside").find(".nav").hide(),a.addClass("open-aside"))}),("animation"in document.documentElement.style||"-webkit-animation"in document.documentElement.style||"-moz-animation"in document.documentElement.style)&&setTimeout(function(){animateLogo()},500),$(".iframe").focus()}); -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Scaffolding 3 | // -------------------------------------------------- 4 | 5 | 6 | // Reset the box-sizing 7 | // 8 | // Heads up! This reset may cause conflicts with some third-party widgets. 9 | // For recommendations on resolving such conflicts, see 10 | // http://getbootstrap.com/getting-started/#third-box-sizing 11 | * { 12 | @include box-sizing(border-box); 13 | } 14 | *:before, 15 | *:after { 16 | @include box-sizing(border-box); 17 | } 18 | 19 | 20 | // Body reset 21 | 22 | html { 23 | font-size: 10px; 24 | -webkit-tap-highlight-color: rgba(0,0,0,0); 25 | } 26 | 27 | body { 28 | font-family: $font-family-base; 29 | font-size: $font-size-base; 30 | line-height: $line-height-base; 31 | color: $text-color; 32 | background-color: $body-bg; 33 | } 34 | 35 | // Reset fonts for relevant elements 36 | input, 37 | button, 38 | select, 39 | textarea { 40 | font-family: inherit; 41 | font-size: inherit; 42 | line-height: inherit; 43 | } 44 | 45 | 46 | // Links 47 | 48 | a { 49 | color: $link-color; 50 | text-decoration: none; 51 | 52 | &:hover, 53 | &:focus { 54 | color: $link-hover-color; 55 | text-decoration: underline; 56 | } 57 | 58 | &:focus { 59 | @include tab-focus(); 60 | } 61 | } 62 | 63 | 64 | // Figures 65 | // 66 | // We reset this here because previously Normalize had no `figure` margins. This 67 | // ensures we don't break anyone's use of the element. 68 | 69 | figure { 70 | margin: 0; 71 | } 72 | 73 | 74 | // Images 75 | 76 | img { 77 | vertical-align: middle; 78 | } 79 | 80 | // Responsive images (ensure images don't scale beyond their parents) 81 | .img-responsive { 82 | @include img-responsive(); 83 | } 84 | 85 | // Rounded corners 86 | .img-rounded { 87 | border-radius: $border-radius-large; 88 | } 89 | 90 | // Image thumbnails 91 | // 92 | // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. 93 | .img-thumbnail { 94 | padding: $thumbnail-padding; 95 | line-height: $line-height-base; 96 | background-color: $thumbnail-bg; 97 | border: 1px solid $thumbnail-border; 98 | border-radius: $thumbnail-border-radius; 99 | @include transition(all .2s ease-in-out); 100 | 101 | // Keep them at most 100% wide 102 | @include img-responsive(inline-block); 103 | } 104 | 105 | // Perfect circle 106 | .img-circle { 107 | border-radius: 50%; // set radius in percents 108 | } 109 | 110 | 111 | // Horizontal rules 112 | 113 | hr { 114 | margin-top: $line-height-computed; 115 | margin-bottom: $line-height-computed; 116 | border: 0; 117 | border-top: 1px solid $hr-border; 118 | } 119 | 120 | 121 | // Only display content to screen readers 122 | // 123 | // See: http://a11yproject.com/posts/how-to-hide-content/ 124 | 125 | .sr-only { 126 | position: absolute; 127 | width: 1px; 128 | height: 1px; 129 | margin: -1px; 130 | padding: 0; 131 | overflow: hidden; 132 | clip: rect(0,0,0,0); 133 | border: 0; 134 | } 135 | 136 | // Use in conjunction with .sr-only to only display content when it's focused. 137 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 138 | // Credit: HTML5 Boilerplate 139 | 140 | .sr-only-focusable { 141 | &:active, 142 | &:focus { 143 | position: static; 144 | width: auto; 145 | height: auto; 146 | margin: 0; 147 | overflow: visible; 148 | clip: auto; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /static/sass/index/_layout.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | html { 4 | overflow: hidden; 5 | height: 100%; 6 | } 7 | body { 8 | position: relative; 9 | height: 100%; 10 | font: 12px/1.5 Helvetica, Tahoma, Arial, "Microsoft YaHei", SimSun, sans-serif; 11 | } 12 | .tips { 13 | text-align: center; 14 | } 15 | img[src="http://icon.cnzz.com/img/pic1.gif"] { 16 | display: none; 17 | } 18 | 19 | .header { 20 | position: relative; 21 | height: 40px; 22 | background: url(../img/header-bg.png) repeat; 23 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 24 | } 25 | .container { 26 | overflow: hidden; 27 | width: auto; 28 | _position: relative; 29 | _top: auto; 30 | _bottom: auto; 31 | _height: 100%; 32 | } 33 | .aside { 34 | overflow: auto; 35 | position: absolute; 36 | top: 50px; 37 | bottom: 10px; 38 | left: 10px; 39 | width: 240px; 40 | border: 1px solid #ccc; 41 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 42 | _top: 10px; 43 | } 44 | .main { 45 | overflow: auto; 46 | position: absolute; 47 | top: 50px; 48 | right: 10px; 49 | bottom: 10px; 50 | left: 260px; 51 | border: 1px solid #ccc; 52 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 53 | _zomm: 1; 54 | _top: 10px; 55 | _position: static; 56 | _height: 80%; 57 | _margin-top: 10px; 58 | _margin-left: 260px; 59 | } 60 | .main-noaside { 61 | left: 25px; 62 | } 63 | .noaside { 64 | width: 5px; 65 | } 66 | 67 | .nav { 68 | } 69 | .content { 70 | _position: relative; 71 | _overflow: auto; 72 | _height: 100%; 73 | } 74 | .iframe { 75 | position: absolute; 76 | top: 0px; 77 | left: 0px; 78 | width: 100%; 79 | height: 100%; 80 | } 81 | 82 | /* close open aside */ 83 | .close-aside { 84 | position: absolute; 85 | top: 50%; 86 | right: 0px; 87 | margin-top: -17px; 88 | display: block; 89 | width: 5px; 90 | height: 35px; 91 | background: url(../img/close.gif) no-repeat; 92 | } 93 | .open-aside { 94 | background: url(../img/open.gif) no-repeat; 95 | } 96 | 97 | /* header */ 98 | .header-link { 99 | float: right; 100 | margin-right: 50px; 101 | padding: 10px 20px 0 0; 102 | } 103 | .header-link a { 104 | padding: 0 5px; 105 | color: #fff; 106 | text-decoration: none; 107 | font: 14px/20px "Microsoft YaHei"; 108 | } 109 | .header-link a:hover { 110 | text-decoration: underline; 111 | } 112 | 113 | .fork { 114 | position: absolute; 115 | top: -10px; 116 | right: -10px; 117 | width: 80px; 118 | height: 80px; 119 | background: url(../img/fork.png) no-repeat; 120 | opacity: 0.8; 121 | filter: alpha(opacity=80); 122 | } 123 | .fork:hover { 124 | opacity: 1; 125 | filter: alpha(opacity=100); 126 | } 127 | 128 | .animation-logo { 129 | float: left; 130 | position: relative; 131 | width: 200px; 132 | height: 80px; 133 | margin-left: 20px; 134 | padding: 10px; 135 | } 136 | .animation-logo p { 137 | opacity: 0; 138 | color: #fff; 139 | font-size: 16px; 140 | } 141 | .animation-logo .txt-1 { 142 | margin-left: 60px; 143 | -webkit-animation: txt-1-move 2s ease-out; 144 | -moz-animation: txt-1-move 2s ease-out; 145 | animation: txt-1-move 2s ease-out; 146 | } 147 | @-webkit-keyframes txt-1-move { 148 | 0% { 149 | margin-left: 0px; 150 | opacity: 0; 151 | } 152 | 50% { 153 | margin-left: 30px; 154 | opacity: 1; 155 | -webkit-transform: skew(-15deg); 156 | } 157 | 70% { 158 | margin-left: 35px; 159 | opacity: 1; 160 | } 161 | 100% { 162 | margin-left: 60px; 163 | opacity: 0; 164 | -webkit-transform: skew(-30deg); 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /css3/demo-3d-rotate.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "css3 3d图片墙" 4 | } 5 | 6 | 7 | 68 | 69 | 70 |
71 |
72 | 73 | 74 |
75 |
76 | 77 | 78 |
79 |
80 | 81 | -------------------------------------------------------------------------------- /css/three-col-layout.html: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "css常见三列布局方案" 4 | } 5 | 6 | 7 | 8 |

css常见三列布局方案

9 |

一、固定宽度三列布局

10 | 
11 | <div id="wrapper">
12 | 	<div id="header">header</div>
13 | 	<div id="body" class="cls">
14 | 		<div id="aside">
15 | 			<div class="inner">
16 | 				aside
17 | 				<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
18 | 			</div>
19 | 		</div>
20 | 		<div id="content" class="cls">
21 | 			<div id="main">
22 | 				<div class="inner">
23 | 					main
24 | 					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
25 | 				</div>
26 | 			</div>
27 | 			<div id="content-aside">
28 | 				<div class="inner">
29 | 					content-aside
30 | 					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
31 | 				</div>
32 | 			</div>			
33 | 		</div>
34 | 	</div>
35 | 	<div id="footer">footer</div>
36 | </div>
37 |
38 | 
39 | #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}
40 | #body{ width: 980px; margin: 0 auto;}
41 | #aside{ float: left; width: 240px; background: #ccc;}
42 | #content{ margin-left: 240px;}
43 | #main{ float: left; width: 540px; background: pink;}
44 | #content-aside{  float: left; width: 200px; background: orange; }
45 | #footer{ width: 980px; height: 90px; margin: 0 auto; background: #08f;}
46 |
47 | 点击查看demo 48 | 49 | 50 | 51 |

二、自适应宽度三列布局

52 | 
53 | <div id="wrapper">
54 | 	<div id="header">header</div>
55 | 	<div id="body" class="cls">
56 | 		<div id="aside">
57 | 			<div class="inner">
58 | 				aside
59 | 				<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
60 | 			</div>
61 | 		</div>
62 | 		<div id="content" class="cls">
63 | 			<div id="main">
64 | 				<div class="inner">
65 | 					main
66 | 					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
67 | 				</div>
68 | 			</div>
69 | 			<div id="content-aside">
70 | 				<div class="inner">
71 | 					content-aside
72 | 					<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
73 | 				</div>
74 | 			</div>			
75 | 		</div>
76 | 	</div>
77 | 	<div id="footer">footer</div>
78 | </div>
79 |
80 | 
81 | #header{ width: 96%; height: 90px; margin: 0 auto; background: #f60;}
82 | #body{ width: 96%; margin: 0 auto;}
83 | #aside{ float: left; width: 240px; background: #ccc;}
84 | #content{ margin-left: 240px;}
85 | #main{ float: left; width: 100%; background: pink;}
86 | #main .inner{ padding-right: 200px;}
87 | #content-aside{ float: left; width: 200px; margin-left: -200px; background: orange; }
88 | #footer{ width: 96%; height: 90px; margin: 0 auto; background: #08f;}
89 |
90 | 点击查看demo -------------------------------------------------------------------------------- /static/sass/page/bootstrap/mixins/_grid.scss: -------------------------------------------------------------------------------- 1 | // Grid system 2 | // 3 | // Generate semantic grid columns with these mixins. 4 | 5 | // Centered container element 6 | @mixin container-fixed($gutter: $grid-gutter-width) { 7 | margin-right: auto; 8 | margin-left: auto; 9 | padding-left: ($gutter / 2); 10 | padding-right: ($gutter / 2); 11 | @include clearfix(); 12 | } 13 | 14 | // Creates a wrapper for a series of columns 15 | @mixin make-row($gutter: $grid-gutter-width) { 16 | margin-left: ($gutter / -2); 17 | margin-right: ($gutter / -2); 18 | @include clearfix(); 19 | } 20 | 21 | // Generate the extra small columns 22 | @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { 23 | position: relative; 24 | float: left; 25 | width: percentage(($columns / $grid-columns)); 26 | min-height: 1px; 27 | padding-left: ($gutter / 2); 28 | padding-right: ($gutter / 2); 29 | } 30 | @mixin make-xs-column-offset($columns) { 31 | margin-left: percentage(($columns / $grid-columns)); 32 | } 33 | @mixin make-xs-column-push($columns) { 34 | left: percentage(($columns / $grid-columns)); 35 | } 36 | @mixin make-xs-column-pull($columns) { 37 | right: percentage(($columns / $grid-columns)); 38 | } 39 | 40 | // Generate the small columns 41 | @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { 42 | position: relative; 43 | min-height: 1px; 44 | padding-left: ($gutter / 2); 45 | padding-right: ($gutter / 2); 46 | 47 | @media (min-width: $screen-sm-min) { 48 | float: left; 49 | width: percentage(($columns / $grid-columns)); 50 | } 51 | } 52 | @mixin make-sm-column-offset($columns) { 53 | @media (min-width: $screen-sm-min) { 54 | margin-left: percentage(($columns / $grid-columns)); 55 | } 56 | } 57 | @mixin make-sm-column-push($columns) { 58 | @media (min-width: $screen-sm-min) { 59 | left: percentage(($columns / $grid-columns)); 60 | } 61 | } 62 | @mixin make-sm-column-pull($columns) { 63 | @media (min-width: $screen-sm-min) { 64 | right: percentage(($columns / $grid-columns)); 65 | } 66 | } 67 | 68 | // Generate the medium columns 69 | @mixin make-md-column($columns, $gutter: $grid-gutter-width) { 70 | position: relative; 71 | min-height: 1px; 72 | padding-left: ($gutter / 2); 73 | padding-right: ($gutter / 2); 74 | 75 | @media (min-width: $screen-md-min) { 76 | float: left; 77 | width: percentage(($columns / $grid-columns)); 78 | } 79 | } 80 | @mixin make-md-column-offset($columns) { 81 | @media (min-width: $screen-md-min) { 82 | margin-left: percentage(($columns / $grid-columns)); 83 | } 84 | } 85 | @mixin make-md-column-push($columns) { 86 | @media (min-width: $screen-md-min) { 87 | left: percentage(($columns / $grid-columns)); 88 | } 89 | } 90 | @mixin make-md-column-pull($columns) { 91 | @media (min-width: $screen-md-min) { 92 | right: percentage(($columns / $grid-columns)); 93 | } 94 | } 95 | 96 | // Generate the large columns 97 | @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { 98 | position: relative; 99 | min-height: 1px; 100 | padding-left: ($gutter / 2); 101 | padding-right: ($gutter / 2); 102 | 103 | @media (min-width: $screen-lg-min) { 104 | float: left; 105 | width: percentage(($columns / $grid-columns)); 106 | } 107 | } 108 | @mixin make-lg-column-offset($columns) { 109 | @media (min-width: $screen-lg-min) { 110 | margin-left: percentage(($columns / $grid-columns)); 111 | } 112 | } 113 | @mixin make-lg-column-push($columns) { 114 | @media (min-width: $screen-lg-min) { 115 | left: percentage(($columns / $grid-columns)); 116 | } 117 | } 118 | @mixin make-lg-column-pull($columns) { 119 | @media (min-width: $screen-lg-min) { 120 | right: percentage(($columns / $grid-columns)); 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /static/sass/page/bootstrap/_list-group.scss: -------------------------------------------------------------------------------- 1 | // 2 | // List groups 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | // 8 | // Easily usable on