sass我的學習筆記

時間 2019-11-13

標籤 sass 我的學習筆記简体版

原文原文鏈接

Materliu 在慕課的視頻: http://www.imooc.com/learn/364 、 http://www.imooc.com/wiki/371javascript

sass入門:http://www.w3cplus.com/sassguide/css

我的先看了《Sass與Compass實戰》（Materliu 是中文翻譯之一）後看的視頻，看書的時候不是很瞭解看了視頻以後又看了一遍書終於少量了解sass了html

下面是我我的對《Sass與Compass實戰》這本書學習筆記總結，有些是我的極端自我理解少量和API解釋不一樣前端

安裝的步驟就不總結了java

目前我的以爲也就用到這幾個固然也是書裏寫css3

compass create 項目名建立 compass項目程序員

compass h compass的幫助命令web

compass init 爲項目添加 compassjson

compass watch 實時編譯瀏覽器

compass compile 生成樣式表

{

gem install css_parser 安裝

compass stats 查看生成的文件大小

}

能夠用圖形界面的編譯工具 koala 不用命令行了

config.rb 配置文件：

http_path = "/" 路徑
css_dir = "stylesheets" 樣式
sass_dir = "sass" 存放scss文件夾
images_dir = "images" 存放圖片文件夾
javascripts_dir = "javascripts" 存放JS文件夾

output_style = :compact 生成CSS格式有壓縮、{}不一樣方式

relative_assets = false 是不是相對路徑

line_comments = false 生成CSS裏清楚對應scss行數

註釋：

// 僅scss 文件內看;

/**/ 除未壓縮外能看;

/*! !*/ 都能看壓縮也能看;

註釋中有會有中文編譯問題在文件第一行 @charset "utf-8";

@debug $style; 打印日誌
@error 錯誤提示信息

@import "compass/reset" 引入默認樣式我的認爲這個默認樣式沒啥用

@at-root 在嵌套裏標記用的生成出來css是獨立的

@extend 是繼承不能 .a .b的繼承

% 提取公共的樣式，同時不編譯簡稱提取公因式且不編譯

$ 開頭定義變量名是個全局變量在{ $name } 局部變量

&表明父級 a{ &:hover{} } a{} a:hover{}

.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 羣組

.a,.b{ a{}} .a a,.b a{} 羣組

.a{ border : { style:solid;width:1px;color:#ccc } } 屬性嵌套 ‘:’ 必寫

_aa.scss 通常爲局部文件其實 @import 引入的時候 _能夠不寫

$aa:10 !default !default設置默認值

@mixin 混合器 @include 調用

布爾值 and(與)\or(或)\not(非)

comparable($numver-1,$numver-2) 判斷是否能相加返回布爾值 true/false

unit($numver) 判斷 $numver 的單位

unitless($numver) 判斷數值是否有單位返回布爾值沒有單位是 true 反之 false

type-of($value) 返回類型相似於js typeof

@function @return 必需要有返回值

#{...} 插值

@for $i from 1 to 5 \ @for $i from 1 through 5 前者是到4不到5 後者循環到5

@for $i from $strat through $end 開始結束若是是 strat 大就從小到大反之亦然

@if 判斷條件{}@else{} 判斷

@include a($a:10,$b:20) 能夠傳相似於json的值

@include link-colors( #333,#666,#999,#f00 ); 設置 a:visited a:focus a:hover a:active 顏色

@include link-colors(#333,#00f); 設置默認沒有線 hover 有線還有文字顏色

@include ellipsis 文字超出....

@include nowrap 防止折行

@include clearfix;清浮動

compass css3 我的感受就這最實用

@import 「compass/css3」;

@include border-radius(5px);

關閉某一項瀏覽器的廠商前綴

$experimental-support-for-opera:false

$experimental-support-for-microsoft:false

$experimental-support-for-khtml:false

圖片精靈僅支持PNG格式

@import 「compass/utilities/sprites」;

@import "icons/*.png" 圖片的目錄名

@include all-icons-sprites; 生成全部的精靈class 'icons'爲目錄名生成的class名爲 .目錄名+圖片名 .icos-ico1

<map>就是ico的目錄名字

background-image:inline-image('../images/a.png'); 生成base-64位的 data:images/gif;base64xxxxxxx=

$<map>-layout:vertical(垂直)、horizontal(水平)、diagonal(對角線)、smart(智能)

$icons-layout:smart $icons目錄名生成的圖片是四種中的哪種生成到本來小圖標icons目錄的上一級目錄命名爲小圖標目錄 icons-亂碼.png

$<map>-spacing:0px $icons-spacing:5px; 設置精靈圖片間距（ smart模式不能設置圖片間距）

$<map>-<sprite>-spacing:0px; $icons-arrow-spacing:12px; sprite其實就是你想單獨間距ico的名

$<map>-sprite-width($name)、$<map>-sprite-height($name) 獲取制定ico的寬高

$<map>-sprite-dimensions:true/false; 將每張ico圖片設置寬高

$<map>-sprite-base-class:'.aa' 更改默認文件夾icons 前綴的classname

$disable-magic-sprie-selectors：true/false; 默認開啓是經過圖片名 a_hover.png 圖片生成僞選擇器 a{ background-position:0 0 } a:hover{background-position:10px 10px}

我的以爲有用的圖片精靈自定義：

sprite-map($glob,...) 生成圖片的url複製給變量，同時能夠設置一些配置參數

$icons:sprite-map("icons/*.png",$layout:vertical,$arrow-spacing:5px) 定義圖片的變量名

sprite($map,$sprite,[$offset-x],[$offset-y]); 生成自定義的圖片

sprite-position($map,$sprite,[$offset-x],[$offset-y]) 設置backgournd-positon：x y 位置

backgurnd:sprite-position($icons,arrow); 設置backgournd-positon：x y 位置

sprite-background-position($map,$sprite,[$offset-x],[$offset-y]); 設置backgournd-positon：x y 位置

@include sprite-background-position($icons,arrow); 返回的精靈的x y 位置

@include sprite-dimensions($icons,arrow) 返回的精靈的寬高

例子：

$icons:sprite-map("icons/*.png");

.sprite-base{background:$icons no-repeat;}

.next{

　　@extend .sprite-base;

　　@include sprite-backgournd-position($icons,arrow);

　　@include sprite-dimensions($icons,arrow);

}

寫完發現愈來愈來越像書的壓縮版和 API 了還不如人家作的.....

作了一個小小DEMO

上圖：

整個文件目錄截圖：

images 截圖:

生成ico的 icons裏的截圖:

sass截圖

stylesheets截圖

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>釐米IT學院    </title>
    <link rel="stylesheet" type="text/css" href="stylesheets/itlimi.css" />
</head>
<body>
    <!-- 頭部 導航 start  -->
    <div class="content">
        <div class="nav-top">
            <div class="log"><a href="#"></a></div>
            <ul class="nav">
                <li><a href="#">首  頁</a></li>
                <li><a href="#">培訓課程</a></li>
                <li><a href="#">優秀學員</a></li>
                <li><a href="#">課程疑問</a></li>
                <li><a href="#">職業生涯</a></li>
                <li><a href="#">學員社區</a></li>
                <li><a href="#">官方博客</a></li>
                <li><a href="#">學院地址</a></li>
            </ul>
        </div>
        <!-- 頭部 導航 end  -->

        <!-- 廣告 start  -->
        <div class="adve">
            <img src="images/bannerImg.jpg" alt="">
        </div>
        <!-- 廣告 end  -->
        
        <!-- 主體 start  -->
        <div class="box-main">
            <!-- right start  -->    
            <div class="box-right">
                <dl class="dl-list">
                    <dt>
                        職業生涯
                    </dt>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            Web前端開發工程師須要掌握哪些核心技能？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            我是程序員，有必要進行web前端開發的學習嗎?
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            我是網站美工，目前發展遇到瓶頸，該如何解決？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            我適合從事web前端開發行業嗎？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            Web前端工程師如何給本身定位？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            Web前端開發工程師好找工做嗎？
                        </a>
                    </dd>
                </dl>
                <dl class="dl-list">
                    <dt>
                        好職推薦
                    </dt>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            盛大網絡--前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            阿里巴巴--前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            金山軟件--KIS-WEB前端頁面工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            360京東商城 -- Web前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            阿里巴巴 - 技術部 - Web前端開發工程師（高
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            人人網 - 技術部 - 3G前端工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            人人網 - 技術部 - Web前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            搜狐 - 媒體技術產品中心 - JavaScript前端
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 運營部 - Web前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 無線部 - Web前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 技術部 - Web前端開發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 產品部 - JavaScript前端工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - Web前端研發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 商務搜索 - Web前端研發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 社會化網絡事業部 - JavaScript前端
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 搜索研發部 - web前端研發工程師
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 系統部 - WEB前端開發工程師
                        </a>
                    </dd>
                </dl>
            </div>
               <!-- right end  -->
    
            <!-- left start  -->    
            <div class="box-left">
                <div class="min-adve">
                    <img src="images/articleBanner.jpg" alt="">
                </div>
                <h2 class="tit">Web前端開發工程師好找工做嗎？</h2>
                <div class="txt-info">
                        據09年全國Web前端開發行業調查統計顯示，09年大型企業對於Web前端開發人才需求緊缺。 Web前端開發目前是一種新興職業，專業的前端開發人員絕大部分存在於大型企業中，如騰訊、百度等，換種說法就是：選擇從事Web前端開發就等於你的一隻腳已經邁進了騰訊、百度等高薪企業。

                        隨着Web2.0的大潮席捲而來，2010年互聯網發展速度空前，互聯網向標準化、專業化、精細化方向發展，致使Web開發職位進一步細分，Web 前端開發工程師、Web頁面重構師等這些高薪職業相繼誕生。現在流行的瀏覽器有十幾種，不一樣的瀏覽器對頁面的解析不一樣，致使相同的頁面在不一樣的瀏覽器內顯示效果不一樣，不能兼容多種瀏覽器，用戶體驗下降，搜索引擎抓取率低，加載速度慢等影響頁面總體質量的因素產生，因此對頁面製做要求愈來愈高，導致許多公司急需提供製做標準頁面服務的技術人員。

                        如今YAHOO、MSN等國際門戶網站，網易、新浪等國內門戶網站，和主流的Web2.0網站，均採用xHTML(DIV)＋CSS的框架模式，更加印證了xHTML(DIV)＋CSS是大勢所趨。

                        正由於如此Web前端開發人員成爲市場上緊缺的人才，同時也成爲一個新興的高薪職業。
                </div>
            </div>
               <!-- left end  -->
        
            
        </div>
        <!-- 主體 end  -->

        <!-- 尾部 start  -->
        <div class="foot">
            <p>
                <a href="#">關於W3CStudy</a>
                |
                <a href="#">廣告服務</a>
                |
                <a href="#">提交問題</a>
                |
                <a href="#">聯繫咱們</a>
                |
                <a href="#">版權聲明</a>
                |
                <a href="#">關於隱私</a>
                |
                <a href="#">合做夥伴</a>
            </p>
            <p>
                京ICP備10055601號  All rights(C)2008-2010 Reserved
            </p>
        </div>
        <!-- 尾部 end  -->
    </div>
</body>
</html>

主要 itlimi.scss 樣式

@charset "utf-8";
@import "compass/css3"; 
@import "tsass";  // 默認的樣式庫
@import "compass/utilities/sprites";


$icons-bgs: sprite-map("icons/*.png",$layout:vertical,$spacing:15px);//圖片精靈路徑 


@include treset();  // tsass.scss 重置默認樣式
@include font-sizes(12,24,px); // tsass.scss 生成初始字體12-24
@include init-Style(ml,margin-left,px,5,10); // tsass.scss 生成初始margin-left左外邊距 5-15

.sprite-base{
    background: $icons-bgs no-repeat;
}

//初始一些 顏色值
$gray:#393838;  
$gray2:#eaeaea;
$red:#810000;
$white:#fff;


body{ background:url(../images/bodyBg.png) no-repeat 0 0;}
.content{
    width:1000px;
    margin:0 auto;
    @include border-radius(5px);
}

/* 導航條 */
.nav-top{
    $hei:54px;

    margin :{
        top:$hei;
    };
    height:$hei;
    background-color:$gray;
    
    %top-public{
        float:left;
        height:$hei;
     }

    .log{
        width:220px;
        @extend %top-public;
        a{
            display:block;
            @extend .sprite-base;
            background-position:sprite-position($icons-bgs,logo);
            @include sprite-dimensions($icons-bgs,logo);
        }
    }
    @at-root .nav{
        li{
            @extend %top-public;
            width:86px;
            line-height: $hei;
            text-align: center;

        }
        a{
            display:block;
            font-size: 12px;
            color: #ccc;
        }
        a:hover{
            color:$white;
            background: $icons-bgs no-repeat;
            background-position:sprite-position($icons-bgs,navActive);
        }


    }

    & a{
        
        text-decoration: none;
    }
}

/* 廣告 */
.adve{
    height:292px;
    overflow:hidden;
    margin:10px 0;
}


.box-main{
    background:$gray2;
    padding:10px;
    overflow:hidden;
}

.box-left{
    width:660px;
}

.tit{
    font-size: 22px;
    font-weight: bold;
    line-height: 66px;
    color:$red;
}
.txt-info{ 
    text-indent:2em;
    font-size:14px;
    line-height: 24px;
}

.box-right{
    float:right;
    width:300px;
}

.dl-list{
    padding-bottom:10px;
    dt{
        height:32px;
        line-height: 32px;
        padding-left:20px;
        color:$white;
        font-size: 14px;
        @extend .sprite-base;
        background-color:$red;
        background-position:sprite-position($icons-bgs,fries,7,6);
        margin-bottom:4px;
    }
    dd{
        position:relative;
        line-height: 24px;
        font-size: 12px;
        padding-left:17px;
        span{
            position:absolute;
            left:8px;
            top:12px;
            width:3px;
            height:3px;
            background-image:inline-image('../images/dot.png');
        }
        a{
            text-decoration: none;
            color:#000;
        }
    }
}

/* 尾部 */
.foot{
    background-color:$gray;
    margin-top:10px;
    padding:15px 0;
    font-size: 12px;
    color:$white;
    p{
        text-align: center;
        line-height: 20px;
        a{
            text-decoration: none;
            color:$white;
        }
    }

}

應用 tsass.scss

@charset "utf-8";
@mixin treset(){
    html {margin: 0; padding: 0; border: 0;}
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
    ol, ul, li { list-style: none; }
    table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0;  font-size: 100%; vertical-align: baseline;}
    caption, th, td { text-align: left; font-weight: normal; }
    input,select{margin:0;padding:0}
    a:hover { text-decoration: underline; }
    img { border: none; }
    textarea{ resize:none;border:1px solid #ccc;}
}

//浮動
@mixin float($dir:left){
    float:$dir;
}


//設置默認字體class
@mixin font-sizes( $strat:0 , $end:100 ,$oUnit:px ){

    @if( TestNum( $strat,$end ) ){
        @for $i from $strat through $end {
            @if( $i%2 == 0 ){
                .f-#{$i}{ font-size:$i+$oUnit; }
            }
        }
    }
}


//判斷是否爲數字
@function TestNum( $num1,$num2 ){
    
    @if ( not unitless($num1) or not unitless($num2) ){
        @debug "其中數值有單位";
        @return false;
    }
    @if ( type-of($num1) == number and type-of($num1) == number ) {
        @return true;
    }@else{
        @debug "其中有值不數字";
        @return false;
    }
}

//初始class
@mixin init-Style( $class,$styles,$oUnit:px, $strat:0 , $end:100 ){

    @if( TestNum( $strat,$end ) ){
        @for $i from $strat through $end {
            .#{$class}-#{$i}{ #{$styles}:$i+$oUnit; }
        }
    }

}

config.rb配置文件：

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = false

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

最終生成 itlimi.css

@charset "UTF-8";
html { margin: 0; padding: 0; border: 0; }

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }

ol, ul, li { list-style: none; }

table, tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; }

caption, th, td { text-align: left; font-weight: normal; }

input, select { margin: 0; padding: 0; }

a:hover { text-decoration: underline; }

img { border: none; }

textarea { resize: none; border: 1px solid #ccc; }

.f-12 { font-size: 12px; }

.f-14 { font-size: 14px; }

.f-16 { font-size: 16px; }

.f-18 { font-size: 18px; }

.f-20 { font-size: 20px; }

.f-22 { font-size: 22px; }

.f-24 { font-size: 24px; }

.ml-5 { margin-left: 5px; }

.ml-6 { margin-left: 6px; }

.ml-7 { margin-left: 7px; }

.ml-8 { margin-left: 8px; }

.ml-9 { margin-left: 9px; }

.ml-10 { margin-left: 10px; }

.sprite-base, .nav-top .log a, .dl-list dt { background: url('../images/icons-s46c7590030.png') no-repeat; }

body { background: url(../images/bodyBg.png) no-repeat 0 0; }

.content { width: 1000px; margin: 0 auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

/* 導航條 */
.nav-top { margin-top: 54px; height: 54px; background-color: #393838; }
.nav-top .log, .nav-top .nav li, .nav .nav-top li { float: left; height: 54px; }
.nav-top .log { width: 220px; }
.nav-top .log a { display: block; background-position: 0 -37px; height: 54px; width: 220px; }
.nav li { width: 86px; line-height: 54px; text-align: center; }
.nav a { display: block; font-size: 12px; color: #ccc; }
.nav a:hover { color: white; background: url('../images/icons-s46c7590030.png') no-repeat; background-position: 0 -106px; }
.nav-top a { text-decoration: none; }

/* 廣告 */
.adve { height: 292px; overflow: hidden; margin: 10px 0; }

.box-main { background: #eaeaea; padding: 10px; overflow: hidden; }

.box-left { width: 660px; }

.tit { font-size: 22px; font-weight: bold; line-height: 66px; color: #810000; }

.txt-info { text-indent: 2em; font-size: 14px; line-height: 24px; }

.box-right { float: right; width: 300px; }

.dl-list { padding-bottom: 10px; }
.dl-list dt { height: 32px; line-height: 32px; padding-left: 20px; color: white; font-size: 14px; background-color: #810000; background-position: 7px 6px; margin-bottom: 4px; }
.dl-list dd { position: relative; line-height: 24px; font-size: 12px; padding-left: 17px; }
.dl-list dd span { position: absolute; left: 8px; top: 12px; width: 3px; height: 3px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAAGuTRJ+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkM0Q0UwRTVGNzA4MTFFNEI3RjZFMkQ1Njc1RkM0RDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkM0Q0UwRTZGNzA4MTFFNEI3RjZFMkQ1Njc1RkM0RDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQzRDRTBFM0Y3MDgxMUU0QjdGNkUyRDU2NzVGQzRENiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQzRDRTBFNEY3MDgxMUU0QjdGNkUyRDU2NzVGQzRENiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqSIIugAAAAhSURBVHjaYmhkYAAIIAYgBgggEAYigABihGKAAANhCAAASNsDi4C3yNYAAAAASUVORK5CYII='); }
.dl-list dd a { text-decoration: none; color: #000; }

/* 尾部 */
.foot { background-color: #393838; margin-top: 10px; padding: 15px 0; font-size: 12px; color: white; }
.foot p { text-align: center; line-height: 20px; }
.foot p a { text-decoration: none; color: white; }