Rumah hujung hadapan web html tutorial 仿京东手机充值进度导航_html/css_WEB-ITnose

仿京东手机充值进度导航_html/css_WEB-ITnose

Jun 24, 2016 am 11:50 AM

  由于项目要做一个充值功能,看京东的手机充值进度条导航觉得还不错

于是模仿他做了一个,不过没搞那么复杂,不分那么多颜色了。通过分析可以看出此进度导航关键在于每个li右边的箭头,这个可以用css的:after选择器搞定,记住不要用::after这种写法,这种写法在IE8下会失效的,至于IE8以前的IE浏览器则不能正确的还原我想要的效果,不知道哪位大神可以教一下我如何在IE8以前正确的使用:after选择器。

  首先定义一个ul样式progress-nav:

其中list-style:none是用于消除ul每个li前面的小圆点的,overflow:hidden是为了美观的,当浏览器宽度不足以放下li里的文字的时候把放不下的文字直接隐藏掉。接下来就定义每个li的样式:

li采用相对定位,向左浮动,此演示用三个li,所以li的宽度定义为32%,这个可以根据li的个数自行修改的,也可以把宽度写死,足以放下文字就好。

  接下来到了关键时候了,要定义伪元素:after了

给伪元素设为绝对定位(相当于母节点li),边框定义为实线,边框颜色定义为透明的,其实也就是看到的是父节点的颜色,border-width是关键,这个定义了三角形的形状,15px的两倍30px即为导航条也即伪元素的高,12px的两倍24px即为伪元素的宽,border-left-color也是边框的左部分的颜色也就是我们看到的三角形的颜色,矩形的左边框也就是矩形的左上角和左下角以及中心连成的三角形,三角形做好后得把他移到li的外面去呀,所以right向右偏移伪元素矩形的宽24px,可是这样做好后你会发现什么效果都没有,这时content就派上用场了,去w3c学习一下可以知道,content是配合:before和:after伪元素使用的,用来插入生成内容,可是这样做了你会发现妈蛋还是没效果,别急,那是因为伪元素被下一个li给挡住视线了,所以才要加个z-index把伪元素反覆盖下一个li。

  说了那么多,口水都干了,先来个效果图吧

  你一下子就可以发现,这样还是不行呀,因为2.确认订单信息和3.支付之间神马都木有,别急,其实处理很简单,那就在两个li之间加个白线呀,这样的话需要在首个li后的每个li加个span:

然后给这些span定义样式:

span的样式和伪元素:after长的差不多,不过颜色不一样,span的左边框颜色是白色的,同时他绝对定位母li左边右移两个像素,这两个像素就会是我们看到我li之间的白条了,如果想白条宽一点就加大span的left值就可以了。

  这些完成以后就差当前活动的li的样式了,给那个li变个蓝色就好了:

  同时这个li的右边的伪元素:after也要相应的修改颜色:

  好了,总算完成了,来张效果图吧,IE9以上的IE和其他大部分浏览器下长这样

  IE8下长这样

  IE7以下的IE就不要看了,负责任的告诉你,真的不是我想要的

  最后附上样式类progress.css吧,方便大家查看:

.progress-nav {    height: 30px;    margin-bottom: 10px;    list-style:none;    line-height: 30px;    text-align: center;    color: #7a91b2;    overflow: hidden;}    .progress-nav li.active {        color: #fff;        background: #5495ec;    }    .progress-nav li {        position: relative;        float: left;        width: 32%;        background: #bdcee6;    }        .progress-nav li:after {            content: "";            position: absolute;            border: solid transparent;            border-left-color: #bdcee6;            border-width: 15px 12px;            right: -24px;            z-index: 100;        }        .progress-nav li.active:after {            border-left-color: #5495ec;        }.progress-nav span {    position: absolute;    border: solid transparent;    border-left-color: #fff;    border-width: 15px 12px;    left: 2px;}
Salin selepas log masuk

  网页上就比较简单:

    <ul class="progress-nav">        <li class="active">            1.填写订单信息        </li>        <li>            <span></span>            2.确认订单信息        </li>        <li>            <span></span>            3.支付        </li>    </ul>
Salin selepas log masuk

  最后给伸手党附上示例代码吧:进度导航示例

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)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
1 bulan 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)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

See all articles