国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

純HTML和CSS實(shí)現(xiàn)JD輪播圖

dendoink / 1559人閱讀

摘要:博主使用了純和實(shí)現(xiàn)了的輪播圖,沒有加動態(tài)效果,主要是使用了定位的知識。,如圖為兩個側(cè)邊箭頭圖片其實(shí)實(shí)際中應(yīng)該使用的圖標(biāo)字體,這里沒有使用。

  博主使用了純HTML和CSS實(shí)現(xiàn)了JD的輪播圖,沒有加動態(tài)效果,主要是使用了定位的知識。

  ?,如圖為兩個側(cè)邊箭頭圖片(其實(shí)實(shí)際中應(yīng)該使用CSS3的圖標(biāo)字體,這里沒有使用)。

  

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LunBotitle>
    <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>
        
        <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>

?實(shí)現(xiàn)了如下效果

?

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/2197.html

相關(guān)文章

  • 原生js + css3 + 定時器 無縫播圖(部分)

    摘要:起因現(xiàn)在自學(xué)前端中,學(xué)到移動端,在做一個項(xiàng)目,課程開始用原生的方法寫輪播圖無縫,但是視頻講的是面向過程的方式,現(xiàn)在自己用面向?qū)ο蟮姆绞綄懸幌隆? ## 起因 ## 現(xiàn)在自學(xué)前端中,學(xué)到移動端,在做一個項(xiàng)目,課程開始用原生的方法寫輪播圖(無縫),但是視頻講的是面向過程的方式,現(xiàn)在自己用面向?qū)ο蟮姆绞綄懸幌隆?## 上代碼 ## html的代碼 分類 ...

    IamDLY 評論0 收藏0
  • vue播圖插件之vue-awesome-swiper

    摘要:移動端輪播圖插件,在使用圖形界面插件中的組件無法實(shí)現(xiàn)觸摸滑動后,轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個版本使用全局導(dǎo)入樣式的話,我這里有用到分頁器,就在全局中引入了樣式組件引入在中使用常見的小圓點(diǎn) 移動端輪播圖插件,在使用iview圖形界面插件中的carousel組件無法實(shí)現(xiàn)觸摸滑動后,轉(zhuǎn)而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

    binta 評論0 收藏0
  • 【VIP視頻網(wǎng)站項(xiàng)目v1.0.3】基于Nodejs開發(fā)的VIP視頻網(wǎng)站項(xiàng)目及源碼分享

    摘要:在線體驗(yàn)地址源碼項(xiàng)目預(yù)覽主頁面登錄頁面注冊頁面會員中心電影播放頁面電影彈幕功能視頻網(wǎng)站項(xiàng)目已經(jīng)完功能如下當(dāng)前最新版本增加自動抓取功能,網(wǎng)站數(shù)據(jù)定期實(shí)時更新電影和電視劇數(shù)據(jù)抓取電影數(shù)據(jù)信息前端展現(xiàn)電影頁面圖片的自動抓取下載和展示代碼結(jié)構(gòu)調(diào)整簡 在線體驗(yàn)地址:http://vip.52tech.tech/ GIthub源碼:https://github.com/xiugangzha......

    Cympros 評論0 收藏0
  • 幾種原生js播圖

    摘要:由于各種各樣的原因比如說懶,本文直接在代碼里面用注釋序號記錄實(shí)現(xiàn)的思路普通版原理一個包含多張圖片的其中所有的左浮動成一排,實(shí)際過程就是將往左右邊移動,改變值。 由于各種各樣的原因(比如說懶),本文直接在代碼里面用注釋+序號記錄實(shí)現(xiàn)的思路 1.普通版 原理:一個包含多張圖片的ul,其中所有的li左浮動成一排,實(shí)際過程就是將ul往左(右)邊移動,改變left值。 效果圖:實(shí)際應(yīng)用的時候.s...

    CollinPeng 評論0 收藏0

發(fā)表評論

0條評論

dendoink

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<