尽管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助。
我们先来看一个菜单的例子,最终效果是:
然后我们来详细讲解步骤
我们先建立一个无序列表,来建立菜单的结构。代码是:
<ul>效果是:
因为看起来不是很好看,菜单通常都不需要li默认的圆点,我们给UL定义一个样式来消除这些圆点。
当然,为了更好的控制整个菜单,我们把菜单放在一个div里。页面代码变成:
<div class="test"> <ul>CSS定义为:
.test ul{list-style:none;}说明:“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。
现在的效果是没有圆点了:
这里是菜单变成横向的关键,我们给li元素加上一个“float:left;”属性,让每个li浮动在前面一个li的左面。
CSS定义为:
.test li{float:left;}效果是:
看,菜单变横向了。就这么简单!下面需要做的就是优化细节了。
菜单都挤在一起不好看怎么办?我们来调节li的宽度。
在CSS中添加定义width:100px指定一个li的宽度是100px,当然你可以根据你的需要调整数值:
.test li{float:left;width:100px;}效果是:
石家庄网站建设的优点:我们是专属定制,制作符合您公司业务、风格的网站,这就做到给您制作的网站是网络上独一无二的网站,这样更有利于搜索引擎的收录。如果您喜欢网络上某个风格的网站或者网站模板,我们是只仿制而不直接套用,我们会对其中的结构和样式做增减优化,做…
竞价排名营销是一种通过 竞价购买搜索引擎中关键词或关键短语的广告方式。竞价排名营销分为两种类型。 第一种,直接为真正的搜索引擎结果的排名付费,也就是说付的钱越多,网页所获得的排名名也就越高。 第二种则更类似于普通的广告。这种竞价排名营销方式通过…
网站优化对网站来说是非常重要的,直接决定和影响着网站所起到的作用,以及在各个地方当中的排名。在进行seo优化的过程中,我们必须要坚持一定的原则,真正的把这些事情做得更好,才可以确保最终的结果,这对于我们来说是非常重要的事。 SEO优化主要分为8小步: …