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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Bagaimana untuk melaksanakan susun atur penyesuaian kedudukan paksi y dalam anotasi web? Apr 04, 2025 pm 11:30 PM

Algoritma Adaptif Kedudukan Y-Axis untuk Fungsi Anotasi Web Artikel ini akan meneroka cara melaksanakan fungsi anotasi yang serupa dengan dokumen perkataan, terutama bagaimana menangani selang antara anotasi ...

GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404? Apr 04, 2025 pm 11:54 PM

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...

HTML, CSS, dan JavaScript: Alat penting untuk pemaju web HTML, CSS, dan JavaScript: Alat penting untuk pemaju web Apr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Bagaimana menggunakan CSS3 dan JavaScript untuk mencapai kesan penyebaran dan membesarkan gambar -gambar sekitarnya selepas mengklik? Apr 05, 2025 am 06:15 AM

Untuk mencapai kesan penyebaran dan membesarkan imej sekitarnya selepas mengklik pada imej, banyak reka bentuk web perlu mencapai kesan interaktif: klik pada imej tertentu untuk membuat sekitar ...

See all articles