Rumah hujung hadapan web tutorial css 纯css3实现物流状态持续更新的实例代码

纯css3实现物流状态持续更新的实例代码

May 17, 2017 pm 05:30 PM

代码片段,纯css3实现物流状态持续更新的实例代码,特地分享如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body{font-size: 12px;}
            ul li{list-style: none;}
            .track-rcol{width: 900px; border: 1px solid #eee;}
            .track-list{margin: 20px; padding-left: 5px; position: relative;}
            .track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}
            .track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}
            .track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(http://demo.daimabiji.com/3531/img/order-icons.png)  -21px -72px no-repeat;}
            .track-list li.first .node-icon{background-position:0 -72px;}
            .track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
            .track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
            .track-list li.first .time{margin-right: 20px; }
            .track-list li.first .txt{max-width: 600px; }
        </style>
    </head>
    <body>
        <div class="track-rcol">
            <div class="track-list">
                <ul>
                    <li class="first">
                        <i class="node-icon"></i>
                        <span class="time">2016-03-10 18:07:15</span>
                        <span class="txt">感谢您在京东购物,欢迎您再次光临!</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2016-03-10 18:07:15</span>
                        <span class="txt">【京东到家】京东配送员【申国龙】已出发,联系电话【18410106883,感谢您的耐心等待,参加评价还能赢取京豆呦】</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2016-03-10 18:07:15</span>
                        <span class="txt">感谢您在京东购物,欢迎您再次光临!</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2016-03-10 18:07:15</span>
                        <span class="txt">感谢您在京东购物,欢迎您再次光临!</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2016-03-10 18:07:15</span>
                        <span class="txt">感谢您在京东购物,欢迎您再次光临!</span>
                    </li>
                    <li>
                        <i class="node-icon"></i>
                        <span class="time">2016-03-10 18:07:15</span>
                        <span class="txt">感谢您在京东购物,欢迎您再次光临!</span>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>
Salin selepas log masuk

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱(2)-css视频教程

Atas ialah kandungan terperinci 纯css3实现物流状态持续更新的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Contoh SVM dalam Python Contoh SVM dalam Python Jun 11, 2023 pm 08:42 PM

Mesin Vektor Sokongan (SVM) dalam Python ialah algoritma pembelajaran diselia yang berkuasa yang boleh digunakan untuk menyelesaikan masalah klasifikasi dan regresi. SVM berprestasi baik apabila menangani data berdimensi tinggi dan masalah bukan linear, dan digunakan secara meluas dalam perlombongan data, klasifikasi imej, klasifikasi teks, bioinformatik dan bidang lain. Dalam artikel ini, kami akan memperkenalkan contoh penggunaan SVM untuk pengelasan dalam Python. Kami akan menggunakan model SVM daripada perpustakaan scikit-learn

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk melaksanakan sempadan renda dalam css3 Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Contoh Permulaan VUE3: Membuat Pemain Video Mudah Contoh Permulaan VUE3: Membuat Pemain Video Mudah Jun 15, 2023 pm 09:42 PM

Apabila rangka kerja hadapan generasi baharu terus muncul, VUE3 digemari sebagai rangka kerja bahagian hadapan yang pantas, fleksibel dan mudah digunakan. Seterusnya, mari kita pelajari asas VUE3 dan buat pemain video mudah. 1. Pasang VUE3 Mula-mula, kita perlu memasang VUE3 secara setempat. Buka alat baris arahan dan laksanakan arahan berikut: npminstallvue@next Kemudian, cipta fail HTML baharu dan perkenalkan VUE3: &lt;!doctypehtml&gt;

Ketahui contoh amalan terbaik penukaran penunjuk di Golang Ketahui contoh amalan terbaik penukaran penunjuk di Golang Feb 24, 2024 pm 03:51 PM

Golang ialah bahasa pengaturcaraan yang berkuasa dan cekap yang boleh digunakan untuk membangunkan pelbagai aplikasi dan perkhidmatan. Di Golang, penunjuk ialah konsep yang sangat penting, yang boleh membantu kami mengendalikan data dengan lebih fleksibel dan cekap. Penukaran penunjuk merujuk kepada proses operasi penunjuk antara jenis yang berbeza Artikel ini akan menggunakan contoh khusus untuk mempelajari amalan terbaik penukaran penunjuk di Golang. 1. Konsep asas Di Golang, setiap pembolehubah mempunyai alamat, dan alamat adalah lokasi pembolehubah dalam ingatan.

Contoh algoritma VAE dalam Python Contoh algoritma VAE dalam Python Jun 11, 2023 pm 07:58 PM

VAE ialah model generatif, nama penuhnya ialah VariationalAutoencoder, yang diterjemahkan ke dalam bahasa Cina sebagai autoenkoder variasi. Ia adalah algoritma pembelajaran tanpa pengawasan yang boleh digunakan untuk menjana data baharu, seperti imej, audio, teks, dsb. Berbanding dengan pengekod auto biasa, VAE lebih fleksibel dan berkuasa serta boleh menjana data yang lebih kompleks dan realistik. Python adalah salah satu bahasa pengaturcaraan yang paling banyak digunakan dan salah satu alat utama untuk pembelajaran mendalam. Dalam Python, terdapat banyak pembelajaran mesin yang sangat baik dan mendalam

See all articles