错误博客( cuowu.com )发布于 2019-06-05 12:00:21

CSS导航栏

CSS导航栏制作教程。

导航栏就是一个列表(ul标签),它的每一列(li标签)都是一个链接(a标签)。

例1:

<ul>

<li><a href=”#”>主页</a></li>

<li><a href=”#”>新闻</a></li>

<li><a href=”#”>体育</a></li>

<li><a href=”#”>视频</a></li>

<li><a href=”#”>音乐</a></li>

</ul>

例1效果比平时见得导航多了圆点、边距及下划线,下面我们要用CSS去掉圆点,将所有的边距设置为0,去掉下划线。

例2:

CSS代码:

ul.none {

list-style-type:none;

margin:0px;

padding:0px;

}

ul a:link{

text-decoration:none;

}

HTML代码:

<ul class=”none”>

例2的效果和平时所见的导航栏还是有所不同,我们需要把链接显示为块元素,可使整个区域可点击(不仅仅是文本),同时固定块元素宽度(块元素

默认占整行),同时给导航背景添加颜色(当然这里也可以添加背景图片)。

例3:

ul a {

display:block;

width:50px;

background-color:#f1f1f1;

}

例3的效果,可以看到文字没有居中很难看,我们可以再来一个居中效果。

例4:

ul li {

text-align:center;

}

例4的效果,还是和平时不同,我们可以设置鼠标移动至导航时,链接文字和背景颜色变色,及文字加粗效果。

例5:

ul a:hover {

text-decoration:none;

color:red;

background-color:pink;

}

例5给我们呈现出来的基本是平时我们见到的垂直导航栏。那么水平导航如何设置呢?使用float将li的元素块全部向一个方向浮动。

例6:

ul li {

float:left;

}

例6,一个比较完整的导航栏到此为止吧。当然还有一些其他的效果添加,自行尝试吧。

下面来介绍导航栏下拉菜单效果。

第一步:用DIV给导航栏的li标签用div括起来,方便写CSS样式,写好二级导航列表

<ul class=”none”>

<li><a href=”#”>主页</a></li>

<div class=”menu”>

<li>

<a href=”#”>新闻</a>

<ul>

<li><a href=”#”>国内</a></li>

<li><a href=”#”>国外</a></li>

<li><a href=”#”>热点</a></li>

</ul>

</li>

</div>

<li><a href=”#”>体育</a></li>

<li><a href=”#”>视频</a></li>

<li><a href=”#”>音乐</a></li>

</ul>

第二步,去除二级导航的列表样式(圆点)

.menu ul {

margin: 0;

padding: 0;

list-style: none;

}

第三步,将二级导航设置为不可见。

.menu ul {

margin: 0;

padding: 0;

list-style: none;

visibility:hidden;

}

第四步,我们利用li:hover ul来实现,当鼠标移动到一级导航li上时,ul属性为可见。

.menu li:hover ul {

visibility:visible;

}

第五步,二级导航的列表占用了一级导航的位置,这里设置二级导航的ul的position为绝对位置,使它脱离文档流。二级ul的绝对位置就是相对一级导

航li的。

.menu ul {

position:absolute;

}

第六步,此时,我们得到的是二级导航时横向的,如果把它变成垂直方向呢?这里是因为我们之前写过一个

ul li {

text-align:center;

float:left;

}

导致现在的二级导航的li向左浮动,那么我们直接清除浮动效果。

.menu li ul li {

clear:both;

}

到此呢,导航菜单基本就结束了,更多细节,自行尝试吧!

随机文章

小小课堂:熊掌号政务权威问答_政务熊掌号平台后又一绿通
小小课堂:熊掌号质量校验未通过,内容索引价值低,属于非优质内容
众人帮APP禁发违法
影响跳出率的因素
网上超市APP地推方案
什么是心理学?简述什么是心理学
DNF国服第一剑魂放弃全身增幅16-腰带升级后战力有望破400w!
dnf暗属性强化宝珠有哪些?

错误教程( cuowu.com )专注网推培训、SEO培训、抖音培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码