怎样用 CSS + JS 美化网页中的 select 下拉框?

html-css020

怎样用 CSS + JS 美化网页中的 select 下拉框?,第1张

1、首先我们来看一下效果图,横向下拉菜单。

2、接下来我们看一下w3c的菜单,和小编的菜单对比一下。两者内容相同,但w3c的菜单不支持下拉,缺乏动态效果,显得死板。选中效果也不明显。不过他的网页是框架式结构,菜单相对来说还是导向性很明确的。而且将信息分成几大块,每大块有分为几小块,这样的排版很整齐,也简洁。

3、代码分析,这是代码中唯一的一点js,作用是更改下面菜单的class,配合样式表(CSS)可以达到动态效果,比如下拉菜单的下拉功能、选中显示,都是这样做到的。可以说,整个菜单主要部分都是DIV+CSS。而不是JS

4、这是所有的css部分,通过css的继承属性,来让代码达到利用率最大化。通过子类覆盖父类的属性,来让总属性利用率增加,但缺点是代码结构模糊,对新手来说难度较大。

5、接下来是HTML,这里给出两段结构,也就是两列下拉菜单,其他的格式是一样的,就不在全部截图了。链接我涂掉了,百度经验不让带链接。菜单链接你做的肯定跟我不一样,看链接也没用。如图,那个id:nav十分重要,不能丢!!它相当于整个div容器,虽然标签不是div,但思想一样。

6、最后再来看一下效果图吧!

单纯的 CSS 是做不了网站的 它一般配合div一起用,当然也可以和table一起用 我想你问这个问题,应该会用 table 做网页吧 CSS 只是控制样式的,并非你指的“做网站” 打个比如 你写一个table 让它在页面居中 <table align="center"><tr><td></td></tr></table> 而用div + css <!-- 这段代码放到title里,如果做到外链CSS更好 --><style type="text/css">.mainBody {margin:0 auto} </style><!-- 这段代码放到body里 --><div class="mainBody"></div>这样能做到表现和结构的分离,也就是把一些控制整个页面的代码都放到 CSS 里,而页面只放一些网站的框架和内容。这样容易维护 当然,DIV+CSS 还有很多优点。这里就不和你说了,我想你要的就是上面我说的而已