阿里巴巴导航栏怎么做 一个导航栏怎么做

我们在做网站前端页面的时候,导航栏是必不可少的,我们如何才能用CSS做出漂亮的导航栏呢?接下来小编就教教你怎么做一个导航栏!

工具/原料

记事本或者DW等等自己常用的编辑器。

具体的步骤

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下:

下面我们通过CSS 来改变他的样式。

首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度,没有宽度就没法居中,这个的原因我就不用赘述了吧!

现在常用的网站宽度为960或980(当然也有其他的,一些网站会根据访客的显示器大小有不同宽度的样式,原因我就不在这多废话了)我们在这就用980吧。

方法是在之间加入如下代码来改变他的宽度。为了让结果明显,我们给它又加了一个边框。

接下来我们让他居中。我们在样式中加入以下代码。

.nav ul{

width:980px;/*设置元素宽度为980px*/

border:1px solid #000;/*设置一个颜色为#000,宽度为1px的边框*/

阿里巴巴导航栏怎么做 一个导航栏怎么做

margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/

}

因为我们要做的是横向的导航栏,所以现在我们要把它变成横向排列。我们在样式中加入以下代码。

.nav ul li{

float:left;/*让li元素左浮动*/

}

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素,就没有宽和高了,所以也就没法把边框撑起来了啊。(具体的原因想知道可以百度)当然稍后我们可以给ul或.nav加上高度。

接下来,我们通过给元素添加样式,让他更美观。加入以下代码。

.nav ul li a{

width:80px;/*设置元素宽为80px*/

height:28px;/*设置高度为28px*/

line-height:28px;/*设置行距为28px,让文字在每行的中间位置*/

background:red;/*设置元素的背景为红色*/

color:#FFF;/*文字颜色是白色*/

margin:5px 10px;

font-size:12px;/*用12号字*/

display:block;/*这个比较关键,因为a本身就是联级元素,本身不具有宽高,用这个把它变成块级元素,这样前面设置的宽和高就能起作用了*/

text-align:center;/*让文本居中*/

text-decoration:none; /*去掉下划线*/

}

我们再加入点互动,当访客鼠标放到某个元素上的时候,这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。

.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时,这个a元素的样式就按下面的代码执行*/

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

最后稍微整理一下代码

.nav ul{

width:980px;

margin:0px auto;

height:38px;

padding:0;

}

.nav ul li{

float:left;

}

.nav ul li a{

width:80px;

height:28px;

line-height:28px;

background:red;

color:#FFF;

margin:5px 10px;

font-size:12px;

display:block;

text-align:center;

text-decoration:none;

}

.nav ul li a:hover{

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#FFF;

}

思路就是这样的,其中还可以再加一些自己的元素,比如背景图片之类,效果就更好了。

  

爱华网本文地址 » http://www.413yy.cn/a/240961/148285530.html

更多阅读

阿里巴巴上市敲钟人 就做一个敲钟人

  我想为这个社会敲响警钟,让大家直面灾难,铭记痛苦,思考我们做得不好的地方,然后改善,只有这样,整个社会、整个人类文明才能不断进步。

小标本怎么做 一个小本投资的经典标本(三)

    第二件事是规范化,一个是店面设计布置的规范化,包括企业LOGO在内,一个是后台操作的规范化,包括厨房设备的采购、烧饼配料、制作土家烧饼的流程都进行了规范化,再一个是在管理上的规范化,制作管理手册、培训手册,等等。目的就是为

怎么做一个职业经理人 蒋干是个职业经理人

   读《三国演义》觉得有两个人物很奇怪,一个是徐庶、一个是蒋干。徐庶因为有把柄在曹操手中,所以不得不留在曹营,虽然其心系刘皇叔,可是却遵守职业道德,从不将曹营的消息透露,不做内线。从这个角度讲,徐庶是个合格的职业经理人。   

阿里巴巴是b2b还是b2c 一个阿里巴巴等于260个B2B电子商务网站

【摘要】:从网页被google收录的数量上来说,一个阿里巴巴等于260个同类B2B电子商务网站,而其实际价值可能远高于260个同类B2B网站。其原因在于,阿里巴巴网站被搜索引擎收录的网页质量都比较高,潜在用户通过google可以直接发现阿里巴巴

声明:《阿里巴巴导航栏怎么做 一个导航栏怎么做》为网友腹肌男分享!如侵犯到您的合法权益请联系我们删除