关于网页导航栏制作的几种方法与常见问题解决(新人向)

 我来答
懂视生活
2023-07-27 · 百度认证:湖南福仁科技有限公司官方账号
懂视生活
向TA提问
展开全部

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题。(以css内部样式为例)

[注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css。故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><style>,再将css写入其中就行了。需要按键代码,可在最后看到。]

1.通过<li>标签设置浮动排列。

①使用方法:在css样式中加入float:left;属性。



②常见问题:当网页页面有调整时导航同时改变,排版变混乱。



③解决方法:⑴在笔者接触的网站学习中比较常见方法有对li标签进行绝对定位,然后调节left大小。



这种方式比较王道,利于单个修改。但是对于网页要求低的,可能偏麻烦。

⑵基于自身实验,笔者提出一个十分简单的方法

可以通过<div>标签设置格式,方法十分简单,只要把div的whith值设成等于或者大于网页最大长度即可。



2.第二种方法:

①利用<li>标签的display属性的inline属性值达到同行排列。同时可以通过对margin,padding值修改距离。



?②问题与解决方法与第一种相同。

3.第三种方法:

①完全使用绝对定位,适用于对按钮位置有特殊要求。(由于比较麻烦,而且一般导航都是一列,所以并不推荐,但是需要的朋友还是很好用的)



②一般不会出现排版问题

③优点:稳定,版面一般不会出问题,自由度高。缺点:不如前面的统一规整,相对麻烦,排版麻烦。

?

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式