首頁»HTML/CSS»Web開發者的福利 30段超實用CSS代碼

                    Web開發者的福利 30段超實用CSS代碼

                    來源:csdn 發布時間:2013-05-30 閱讀次數:

                      Web開發者的福利30段超實用CSS代碼。上周,發表了一篇《Web開發者不容錯過的20段CSS代碼》,大家一致覺得很實用。該文是筆者對后30個的翻譯,希望對大家有幫助。

                      1.花式連字符(&)

                      這個類應該在span元素里使用,并且里面包括&字符。它使用經典的serif字體和斜體來增強&符號。

                    .amp {
                        font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
                        font-style: italic;
                        font-weight: normal;
                    }

                      源碼地址: http://css-tricks.com/snippets/css/fancy-ampersand/

                      2.段落首字符下沉

                      通常,這種效果會出現在印刷媒體上,如報紙或書籍。同樣,如果網頁布局合理,它也可以使用在Web頁面上,它僅針對段落使用,但你也可以與單個元素綁定。

                    p:first-letter{
                        display: block;
                        margin: 5px 0 0 5px;
                        float: left;
                        color: #ff3366;
                        font-size: 5.4em;
                        font-family: Georgia, Times New Roman, serif;
                    }

                      3.內層CSS3盒陰影

                      盒陰影(box shadow)屬性幾乎可以運用在任何元素上,它們看起來都非常好看。下面這段代碼主要聚焦內層陰影的設計。

                    #mydiv { 
                        -moz-box-shadow: inset 2px 0 4px #000;
                        -webkit-box-shadow: inset 2px 0 4px #000;
                        box-shadow: inset 2px 0 4px #000;
                    }

                      4.外層CSS3盒陰影

                      下面介紹一段外層陰影代碼設計,注意,代碼里的第三個參數表示模糊距離(blur distance),而第四個參數表示鋪開的(spread)距離。關于這些值的設計,你可以前往 W3Schools學習。

                    #mydiv { 
                        -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
                        -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
                        box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
                    }

                      5.三角形列表符號

                      該符號只能在CSS3里生成,在主流瀏覽器中,這是一項非常酷的技術。而其唯一的潛在問題是缺乏對后退方法的支持。 

                    ul {
                        margin: 0.75em 0;
                        padding: 0 1em;
                        list-style: none;
                    }
                    li:before { 
                        content: "";
                        border-color: transparent #111;
                        border-style: solid;
                        border-width: 0.35em 0 0.35em 0.45em;
                        display: block;
                        height: 0;
                        width: 0;
                        left: -1em;
                        top: 0.9em;
                        position: relative;
                    }

                      源碼地址: http://jsfiddle.net/chriscoyier/yNZTU/

                      6.居中對齊并設置固定寬度

                    #page-wrap {
                        width: 800px;
                        margin: 0 auto;
                    }

                      源碼地址: http://css-tricks.com/snippets/css/centering-a-website/

                      7.CSS3列文本

                    #columns-3 {
                        text-align: justify;
                        -moz-column-count: 3;
                        -moz-column-gap: 12px;
                        -moz-column-rule: 1px solid #c4c8cc;
                        -webkit-column-count: 3;
                        -webkit-column-gap: 12px;
                        -webkit-column-rule: 1px solid #c4c8cc;
                    }

                      源碼地址: http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/

                      8.固定頁腳

                      在網頁里添加固定的頁腳其實非常簡單,并且也很實用。有些網站的頁腳設計得很漂亮,可以給網站呈現出一個完美的結尾。

                    #footer {
                        position: fixed;
                        left: 0px;
                        bottom: 0px;
                        height: 30px;
                        width: 100%;
                        background: #444;
                    }
                    /* IE 6 */
                    * html #footer {
                        position: absolute;
                        top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
                    }

                      源碼地址: http://www.flashjunior.ch/school/footers/fixed.cfm

                      9.IE 6下修復PNG格式的透明度

                      在網站里使用透明的圖像已成為一種很普遍的做法,其始于.gif圖片格式,但現在也涉及到.png圖片格式。而一些老版本的IE不支持透明度,下面這段代碼會很好地解決這一問題。

                    .bg {
                        width:200px;
                        height:100px;
                        background: url(/folder/yourimage.png) no-repeat;
                        _background:none;
                        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
                    }
                    /* 1px gif method */
                    img, .png {
                        position: relative;
                        behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
                           this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                           this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
                           this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
                           this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
                    }

                      源碼地址: http://css-tricks.com/snippets/css/png-hack-for-ie-6/

                      10.跨瀏覽器設置最小高度

                      有時開發者需要對HTML元素設置最小高度,然而,這個效果卻無法兼容IE和老版本的Firefox,下面這段代碼可以修復這個問題。

                    #container {
                        min-height: 550px;
                        height: auto !important;
                        height: 550px;
                    }
                     

                      11. CSS3發光輸入框

                      下面的這段代碼重寫了瀏覽器的默認行為,可以讓Chrome和Safari瀏覽器下普通的表單輸入框產生發光效果。

                    input[type=text], textarea {
                        -webkit-transition: all 0.30s ease-in-out;
                        -moz-transition: all 0.30s ease-in-out;
                        -ms-transition: all 0.30s ease-in-out;
                        -o-transition: all 0.30s ease-in-out;
                        outline: none;
                        padding: 3px 0px 3px 3px;
                        margin: 5px 1px 3px 0px;
                        border: 1px solid #ddd;
                    }
                    input[type=text]:focus, textarea:focus {
                        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
                        padding: 3px 0px 3px 3px;
                        margin: 5px 1px 3px 0px;
                        border: 1px solid rgba(81, 203, 238, 1);
                    }

                      源碼地址: http://css-tricks.com/snippets/css/glowing-blue-input-highlights/

                      12.基于文件類型來創建鏈接樣式

                      下面這段代碼通過使用CSS選擇器和圖像圖標來實現各種類型的鏈接樣式,可能會用到各種協議(HTTP、FTP、IRC,mailto),或者是文件本身的類型(mp3、avi、pdf)。

                    /* external links */
                    a[href^="http://"] {
                        padding-right: 13px;
                        background: url('external.gif') no-repeat center right;
                    } 
                    /* emails */
                    a[href^="mailto:"] {
                        padding-right: 20px;
                        background: url('email.png') no-repeat center right;
                    }
                    /* pdfs */
                    a[href$=".pdf"] {
                        padding-right: 18px;
                        background: url('acrobat.png') no-repeat center right;
                    }

                      源碼地址: http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/

                      13.pre標簽封裝代碼

                      pre標簽常用來對代碼進行布局,可以解決因為行太多帶來的滾動條問題。下面這段代碼就使用pre來封裝代碼,讓內容直接顯示在頁面中。

                    pre {
                        white-space: pre-wrap;       /* css-3 */
                        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
                        white-space: -pre-wrap;      /* Opera 4-6 */
                        white-space: -o-pre-wrap;    /* Opera 7 */
                        word-wrap: break-word;       /* Internet Explorer 5.5+ */
                    }

                      源碼地址: http://css-tricks.com/snippets/css/make-pre-text-wrap/

                      14.鼠標指向時變成手型

                      網頁中有許多item在點擊時,鼠標不會變成小手的形狀。這套CSS選擇器會強迫鼠標越過一些關鍵元素和其他對象一起來使用.pointer這個類。

                    a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
                        cursor: pointer;
                    }

                      源碼地址: http://css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/

                      15.頁面頂部陰影

                      簡單地把下面這段代碼拷貝到頁面里,它會在body元素之前產生黑色的,漸漸變淡的陰影。這種效果通常用來給一個文本框或網頁元素加陰影。

                    body:before {
                        content: "";
                        position: fixed;
                        top: -10px;
                        left: 0;
                        width: 100%;
                        height: 10px;
                        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                        z-index: 100;
                    }

                      源碼地址: http://css-tricks.com/snippets/css/top-shadow/

                      16.氣泡引用效果

                      這種效果常出現在論壇、創建公告牌或者是文本引用上。你只需把下面這段代碼拷貝到樣式表文件即可。 這里(需翻墻)提供了許多關于語音泡泡的代碼片段和使用技巧,歡迎去圍觀。

                    .chat-bubble {
                        background-color: #ededed;
                        border: 2px solid #666;
                        font-size: 35px;
                        line-height: 1.3em;
                        margin: 10px auto;
                        padding: 10px;
                        position: relative;
                        text-align: center;
                        width: 300px;
                        -moz-border-radius: 20px;
                        -webkit-border-radius: 20px;
                        -moz-box-shadow: 0 0 5px #888;
                        -webkit-box-shadow: 0 0 5px #888;
                        font-family: 'Bangers', arial, serif; 
                    }
                    .chat-bubble-arrow-border {
                        border-color: #666 transparent transparent transparent;
                        border-style: solid;
                        border-width: 20px;
                        height: 0;
                        width: 0;
                        position: absolute;
                        bottom: -42px;
                        left: 30px;
                    }
                    .chat-bubble-arrow {
                        border-color: #ededed transparent transparent transparent;
                        border-style: solid;
                        border-width: 20px;
                        height: 0;
                        width: 0;
                        position: absolute;
                        bottom: -39px;
                        left: 30px;
                    }

                      源碼地址(需翻墻): http://html5snippets.com/snippets/35-css3-comic-bubble-using-triangle-trick

                      17.指定標題樣式

                      該模板提供了所有頭元素的主要樣式,從H1到H5。

                    h1,h2,h3,h4,h5{
                    	color: #005a9c;
                    }
                    h1{
                    	font-size: 2.6em;
                    	line-height: 2.45em;
                    }
                    h2{
                    	font-size: 2.1em;
                    	line-height: 1.9em;
                    }
                    h3{
                    	font-size: 1.8em;
                    	line-height: 1.65em;
                    }
                    h4{
                    	font-size: 1.65em;
                    	line-height: 1.4em;
                    }
                    h5{
                    	font-size: 1.4em;
                    	line-height: 1.25em;
                    }

                      源碼地址: https://snipt.net/freshmaker99/headers/

                      18.利用CSS生成紋理圖案背景

                      通過CSS來為背景圖片添加噪點,從而形成漂亮的紋理圖案。你可以使用 NoiseTextureGenerator生成器自定義噪點的紋理圖案。

                    body {
                        background-image: url(data:image/png;base64,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);
                        background-color: #0094d0;
                    }

                      19.List Ordering

                      你可能會遇到這種列表情況,需要把這個列表拆分成兩個UL元素,你不妨看看下面這段代碼。

                    ol.chapters {
                        list-style: none;
                        margin-left: 0;
                    }
                    
                    ol.chapters > li:before {
                        content: counter(chapter) ". ";
                        counter-increment: chapter;
                        font-weight: bold;
                        float: left;
                        width: 40px;
                    }
                    
                    ol.chapters li {
                        clear: left;
                    }
                    
                    ol.start {
                    	counter-reset: chapter;
                    }
                    
                    ol.continue {
                    	counter-reset: chapter 11;
                    }

                      源碼地址: http://timmychristensen.com/css-ordered-list-numbering-examples.html

                      20.為文本添加懸停提示框

                      把這段代碼拷貝到樣式表中,使用新的HTML5數據屬性,通過使用data-tooltip你就可以給文本添加懸停提示框了。

                    a { 
                        border-bottom:1px solid #bbb;
                        color:#666;
                        display:inline-block;
                        position:relative;
                        text-decoration:none;
                    }
                    a:hover,
                    a:focus {
                        color:#36c;
                    }
                    a:active {
                        top:1px; 
                    }
                     
                    /* Tooltip styling */
                    a[data-tooltip]:after {
                        border-top: 8px solid #222;
                        border-top: 8px solid hsla(0,0%,0%,.85);
                        border-left: 8px solid transparent;
                        border-right: 8px solid transparent;
                        content: "";
                        display: none;
                        height: 0;
                        width: 0;
                        left: 25%;
                        position: absolute;
                    }
                    a[data-tooltip]:before {
                        background: #222;
                        background: hsla(0,0%,0%,.85);
                        color: #f6f6f6;
                        content: attr(data-tooltip);
                        display: none;
                        font-family: sans-serif;
                        font-size: 14px;
                        height: 32px;
                        left: 0;
                        line-height: 32px;
                        padding: 0 15px;
                        position: absolute;
                        text-shadow: 0 1px 1px hsla(0,0%,0%,1);
                        white-space: nowrap;
                        -webkit-border-radius: 5px;
                        -moz-border-radius: 5px;
                        -o-border-radius: 5px;
                        border-radius: 5px;
                    }
                    a[data-tooltip]:hover:after {
                        display: block;
                        top: -9px;
                    }
                    a[data-tooltip]:hover:before {
                        display: block;
                        top: -41px;
                    }
                    a[data-tooltip]:active:after {
                        top: -10px;
                    }
                    a[data-tooltip]:active:before {
                        top: -42px;
                    }

                      源碼地址: http://www.impressivewebs.com/pure-css-tool-tips/

                     

                      21.創建暗灰色的按鈕樣式

                      下面這段代碼創建了CSS3按鈕類,并根據按鈕顏色命名為.graybtn。當然你也可以根據自己的網站風格對顏色進行更改。

                    .graybtn {
                        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
                        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
                        box-shadow:inset 0px 1px 0px 0px #ffffff;
                        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
                        background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
                        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
                        background-color:#ffffff;
                        -moz-border-radius:6px;
                        -webkit-border-radius:6px;
                        border-radius:6px;
                        border:1px solid #dcdcdc;
                        display:inline-block;
                        color:#777777;
                        font-family:arial;
                        font-size:15px;
                        font-weight:bold;
                        padding:6px 24px;
                        text-decoration:none;
                        text-shadow:1px 1px 0px #ffffff;
                    }
                    .graybtn:hover {
                        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
                        background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
                        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
                        background-color:#d1d1d1;
                    }
                    .graybtn:active {
                        position:relative;
                        top:1px;
                    }

                      源碼地址: http://html5snippets.com/snippets/1-a-css-rounded-gray-button

                      22.打印的頁面上顯示URL

                      這條規則會使打印出來的頁面在超鏈接文字后面加上URL,URL會被放在一組括號里面,前后各留一個空格。

                    @media print   {  
                      a:after {  
                        content: " [" attr(href) "] ";  
                      }  
                    }

                      源碼地址: http://www.smipple.net/snippet/bramloquet/Print%20the%20url%20after%20your%20links

                      23.屏蔽Webkit移動瀏覽器中元素高亮效果

                      在訪問移動網站時,你會發現,在選中的元素周圍會出現一些灰色的框框,而下面這段代碼即可屏蔽這種樣式。

                    body {
                        -webkit-touch-callout: none;
                        -webkit-user-select: none;
                        -khtml-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }

                      24.利用CSS生成小圓點圖案

                      通過下面的代碼,可以讓你的網站背景上產生一些小圓點裝飾圖案。默認情況下,它是使用在body元素上,但你也可以把它使用在網頁里的其他容器上。

                    body {
                        background: radial-gradient(circle, white 10%, transparent 10%),
                        radial-gradient(circle, white 10%, black 10%) 50px 50px;
                        background-size: 100px 100px;
                    }

                      源碼地址: http://dabblet.com/gist/1457668

                      25.CSS3棋盤格效果

                    和上面的小圓點設計一樣,這個效果需要一些額外的語法才可以工作,它需要在支持CSS3的瀏覽器上運行,效果很艷麗。當然,你可以根據需要自定義顏色。

                    body {
                        background-color: white;
                        background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
                        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
                        background-size: 100px 100px;
                        background-position: 0 0, 50px 50px;
                    }

                      26.Github Fork紅絲帶

                      下面這段代碼是利用CSS3的transform屬性生成Fork me on Github紅絲帶效果。

                    .ribbon {
                        background-color: #a00;
                        overflow: hidden;
                        /* top left corner */
                        position: absolute;
                        left: -3em;
                        top: 2.5em;
                        /* 45 deg ccw rotation */
                        -moz-transform: rotate(-45deg);
                        -webkit-transform: rotate(-45deg);
                        /* shadow */
                        -moz-box-shadow: 0 0 1em #888;
                        -webkit-box-shadow: 0 0 1em #888;
                    }
                    .ribbon a {
                        border: 1px solid #faa;
                        color: #fff;
                        display: block;
                        font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
                        margin: 0.05em 0 0.075em 0;
                        padding: 0.5em 3.5em;
                        text-align: center;
                        text-decoration: none;
                        /* shadow */
                        text-shadow: 0 0 0.5em #444;
                    }

                      源碼地址: http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/

                      27.字體壓縮

                      在樣式表里使用如下代碼能夠幫你節省許多網頁空間。

                    p {
                      font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
                    }

                      源碼地址: http://www.csspop.com/view/542

                      28.紙頁面卷曲效果

                      這種效果可以被廣泛的使用在多種容器中,查看 demo page頁面來更好地掌握該函數的使用吧。

                    ul.box {
                        position: relative;
                        z-index: 1; /* prevent shadows falling behind containers with backgrounds */
                        overflow: hidden;
                        list-style: none;
                        margin: 0;
                        padding: 0; 
                    }
                    
                    ul.box li {
                        position: relative;
                        float: left;
                        width: 250px;
                        height: 150px;
                        padding: 0;
                        border: 1px solid #efefef;
                        margin: 0 30px 30px 0;
                        background: #fff;
                        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
                        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
                        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
                    }
                    
                    ul.box li:before,
                    ul.box li:after {
                        content: '';
                        z-index: -1;
                        position: absolute;
                        left: 10px;
                        bottom: 10px;
                        width: 70%;
                        max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
                        max-height: 100px;
                        height: 55%;
                        -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                        -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
                        -webkit-transform: skew(-15deg) rotate(-6deg);
                        -moz-transform: skew(-15deg) rotate(-6deg);
                        -ms-transform: skew(-15deg) rotate(-6deg);
                        -o-transform: skew(-15deg) rotate(-6deg);
                        transform: skew(-15deg) rotate(-6deg); 
                    }
                    
                    ul.box li:after {
                        left: auto;
                        right: 10px;
                        -webkit-transform: skew(15deg) rotate(6deg);
                        -moz-transform: skew(15deg) rotate(6deg);
                        -ms-transform: skew(15deg) rotate(6deg);
                        -o-transform: skew(15deg) rotate(6deg);
                        transform: skew(15deg) rotate(6deg); 
                    }

                      源碼地址: http://www.csspop.com/view/524

                      29.發光的錨鏈接

                      下面這段代碼可以創建自定義的錨鏈接,鼠標懸浮在上面會發光。

                    a {
                    	color: #00e;
                    }
                    a:visited {
                    	color: #551a8b;
                    }
                    a:hover {
                    	color: #06e;
                    }
                    a:focus {
                    	outline: thin dotted;
                    }
                    a:hover, a:active {
                    	outline: 0;
                    }
                    a, a:visited, a:active {
                    	text-decoration: none;
                    	color: #fff;
                    	-webkit-transition: all .3s ease-in-out;
                    }
                    a:hover, .glow {
                    	color: #ff0;
                    	text-shadow: 0 0 10px #ff0;
                    }

                      30.創建CSS3 Banner

                      在支持CSS3的瀏覽器中,下面的代碼可以生成漂亮的純CSS圖案。這種效果常見于電子商務網站的產品圖片、縮略圖、視頻預覽等。

                    .featureBanner {
                        position: relative;
                        margin: 20px
                    }
                    .featureBanner:before {
                        content: "Featured";
                        position: absolute;
                        top: 5px;
                        left: -8px;
                        padding-right: 10px;
                        color: #232323;
                        font-weight: bold;
                        height: 0px;
                        border: 15px solid #ffa200;
                        border-right-color: transparent;
                        line-height: 0px;
                        box-shadow: -0px 5px 5px -5px #000;
                        z-index: 1;
                    }
                    .featureBanner:after {
                        content: "";
                        position: absolute;
                        top: 35px;
                        left: -8px;
                        border: 4px solid #89540c;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                    }

                      源碼地址: http://www.csspop.com/view/553

                      英文來源:css-snippets-for-designers

                    QQ群:WEB開發者官方群(515171538),驗證消息:10000
                    微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
                    提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
                    網友評論(共2條評論) 正在載入評論......
                    理智評論文明上網,拒絕惡意謾罵 發表評論 / 共2條評論
                    登錄會員中心
                    福彩试机号今天 曾道人特码心水论坛 澳客竞彩 北京比赛pk10直播开奖 北京pk10有人赚钱吗 最新11选5开奖结果 宁夏十一选五开奖查询结果 澳门赌场网上德州扑克 澳洲三分彩官网 香港最精准六肖中特 山西十一选五一定牛 期西陲特码诗 江苏11选5号码遗漏查询 澳洲幸运5开奖结果查询 彩票数据中心 彩霸王1383845一肖中特