純HTML和CSS實現JD輪播圖_ZenDei技術網路在線

純HTML和CSS實現JD輪播圖

-Advertisement-

博主使用了純HTML和CSS實現了JD的輪播圖，沒有加動態效果，主要是使用了定位的知識。，如圖為兩個側邊箭頭圖片。實現瞭如下效果 ...

　　博主使用了純HTML和CSS實現了JD的輪播圖，沒有加動態效果，主要是使用了定位的知識。

　　，如圖為兩個側邊箭頭圖片(其實實際中應該使用CSS3的圖標字體，這裡沒有使用)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LunBo</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .lunbo{
            margin: 40px auto;
            height: 470px;
            width: 590px;
            position: relative;
        }
        .left,.right{
            position: absolute;
            top: 50%;
            margin-top: -18px;
            width: 24px;
            height: 36px;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .lunbo ul{
            height: 18px;
            width: 151px;
            background: rgba(255,255,255,.3);
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -76px;
            border-radius: 10px;
        }
        .lunbo li{
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background-color: #fff;
            float: left;
            margin: 2px;
        }
        .lunbo .current{
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="lunbo">
        <img src="images/lunbo.jpg" alt="">
        <div class="left"><img src="images/left.png" alt=""></div>
        <!-- 也可以使用鏈接然後使用backgrounf -->
        <div class="right"><img src="images/right.png" alt=""></div>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

實現瞭如下效果

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

GPUImage源碼解讀之GLProgram

簡述 GLProgram是GPUImage中代表openGL ES 中的program，具有glprogram功能。其實是作者對OpenGL ES program的面向對象封裝初始化 program shader c語言編譯流程：預編譯、編譯、彙編、鏈接 glsl的編譯過程類似c語言，主要有glC ...
Android 針對單個Activity設置狀態欄顏色

代碼如下： ...
純swift開發，彈幕，演唱會廣告牌

最近去了次演唱會，看見有人在用這個，剛好沒事，我自己也寫了一個。順手練一練swift，第一個純swift開發工程。支持字體大小切換，滾動速度切換，字體切換，字體顏色切換工程Git：https://github.com/WALKERMUZHOU/SCVocalConcert 歡迎大家指點最近去 ...
【讀書筆記】button只顯示在一個界面的右下角，不管界面大小怎麼變化（xib，沒有使用自動佈局)(一)

一，新建立一個工程，Hello,如圖所示。二，Xcode >New >File >FirstViewController >選中Also create XIB file >Next.如圖所示。三，如下圖所示。四，在AppDelegate.m中輸入如下代碼：五，在FristViewContr ...
微信小程式發現之旅（二）—— 自定義組件

組件化的項目開發中，組件應當劃分為三個層次：組件、模塊、頁面微信小程式已經為開發者封裝好了基礎組件，頁面文件（pages）也有了詳細的規定而模塊就需要自行開發，並且要和頁面文件區分開，這就涉及到自定義組件一、基本用法在根目錄下創建一個 components 目錄，用於存放自定義組件組件也是 ...
解決placeholder對ie9及以下的不相容

具體的看代碼，都寫在註釋里了，歡迎討論 ...
CSS學習摘要-層疊和繼承

層疊 CSS 是 **Cascading Style Sheets** 的縮寫，這暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它表明CSS規則的順序很重要，但它比那更複雜。什麼選擇器在層疊中勝出取決於三個因素（這些都是按重量級順序排列的——前面的的一種會否決後一種）： 1. 重要... ...
解決盒子浮動時margin會顯示兩倍的美觀問題

當給幾個大小一樣有boder的盒子浮動時，會出現margin自動加起來的結果。此時可以給每個盒子一個margin-left:-border的長來實現很好的效果，這樣右邊的盒子會把左邊盒子的右邊border壓住，如圖所示。還可以使用偽元素實現動態效果，代碼如下。 ...