*新闻详情页*/>
制做好看美观大方的面包屑导航栏栏
在刚开始以前,我要照样子写一写给大伙儿科普1下啥叫面包屑导航栏栏
相近于下面这几种的
首页>栏目页>文章内容网页页面
首页/栏目页/文章内容网页页面
能够告知浏览者她们现阶段在网站中的部位和怎样回到的DOM叫面包屑导航栏栏
可是。。。。。。
你不感觉这个不太好看吗?
假如哪1天,你们企业的UI给你1张图,图里的面包屑导航栏栏是这样的
这样的
又或是别的带图案设计的面包屑导航栏栏,这时候候应当如何做?
将会有盆友说这个简易,so easy,立即找个图案设计给导航栏栏加background就可以了
但是,真的有这么简易吗?好,空话很少说,让大家立即刚开始动手能力实践活动1下,看究竟该怎样进行这类高颜值的面包削导航栏栏
1、先用无编码序列表做1个导航栏栏,编码以下
<ul> <li> <a href="#">首页</a> </li> <li> <a href="#">首页2</a> </li> <li> <a href="#">首页3</a> </li> <li> <a href="#">首页4</a> </li> <li> <a href="#">首页5</a> </li> </ul>
接下来是css编码
body{background:#000} ul{ list-style: none;} li{ width: 60px; height: 50px; line-height: 50px; float: left; background: #6cf; text-align: center; } a{ color: #000; text-decoration: none; }
css编码也没甚么非常的,就跟平时做nav类似。接下来就刚开始将大家选定的情况图放上去,便是下面这张图
给导航栏栏里边的li加上情况照片
body{ background: #000; } ul{ list-style: none; margin: 100px 100px; } li{ width: 60px; height: 30px; line-height: 30px; float: left; background: #6cf; text-align: center; background: url(img/bg.png) no-repeat 100% 0; } a{ color: #000; text-decoration: none; }
这时候候的网页页面实际效果是这模样的
纳尼?这有点不对啊?导演,这剧本有难题啊!
的确是有难题,可是难题在哪儿?
左右图1比照,难题出在哪儿里马上就清晰了,每个导航栏(除最终1个)的>是堆在相邻的下1个导航栏的身上的,那末这个情况下,大家只必须给li标识加1个margin-left:⑴5px;便可以了,实际编码以下
li{ width: 80px; height: 30px; line-height: 30px; float: left; background: #6cf; text-align: center; background: url(img/bg.png) no-repeat 100% 0; margin-left: ⑴5px; }
因为1开的宽度没给充足,因此这里我略微加了下li的宽度,再加以后,大家的面包屑导航栏栏就变为了这个模样
咦?大家的箭头呢?
说好的箭头呢?
第1⑷的箭头去哪了?
让大家再度倒回上1步实际操作,大家上1步实际操作是给li标识加margin-left:⑴5px;
前端开发的物品有个特点,后边写的特性一般会遮盖前面的特性,而dom构造尽管不容易遮盖,可是当二者部位重合时,在沒有加z-index特性以前,或该特性值相同的情况下,后写的dom构造会在上面
这里也更是这类状况,因此大家只必须在li标识上,独立再加不一样的z-index便可(要要想z-index特性起效,务必先加精准定位,position:relative)
这里对z-index的值沒有是多少限定,但仅有1点,那便是最终1个li标识是最少的,以此类推,慢慢递增,第1个是最大的。
最后编码是这模样的
<!DOCTYPE html> <html> <head> <meta charset="UTF⑻"> <title></title> <style> *{ margin: 0; padding: 0; } body{ background: #000; } ul{ list-style: none; margin: 100px 100px; } li{ width: 80px; height: 30px; line-height: 30px; float: left; background: #6cf; text-align: center; background: url(img/bg.png) no-repeat 100% 0; margin-left: ⑴5px; position: relative;/*确保z-index合理*/ } a{ color: #000; text-decoration: none; } </style> </head> <body> <ul> <li style="z-index: 5;"> <a href="#">首页</a> </li> <li style="z-index: 4;"> <a href="#">首页2</a> </li> <li style="z-index: 3;"> <a href="#">首页3</a> </li> <li style="z-index: 2;"> <a href="#">首页4</a> </li> <li style="z-index: 1;"> <a href="#">首页5</a> </li> </ul> </body> </html>
以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 (网站地图) 粤ICP备10235580号