HTML导航栏的四种制作方法
HTML 导航 四种 制作方法
2023-06-13 09:11:25 时间
大家好,又见面了,我是你们的朋友全栈君。
1.首先,大家可以直接使用html5中的导航栏标签<nav></nav>
具体代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>
这是实际的效果,可以根据实际需要,去除下划线和颜色等等
2.接下来可以无序列表,去除它的默认样式设置浮动就可以了,具体的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
height: 100px;
width:100%;
list-style-type: none; //取消无序列表的固定样式
}
ul li{
float:left;
margin: 20px; //设置三个元素的外间距
}
</style>
</head>
<body>
<ul>
<li><a href="">首页<a></li>
<li><a href="">新闻<a></li>
<li><a href="">关于我们<a></li>
</ul>
</body>
</html>
这是实际的效果图。
3.设置超链接
在这里还想说的是,<ul>的子集元素只能是<li>,不可以是别的,HTML的语义很弱,标签的使用很重要,在实际的网页开发中,不同标签的语义,权重都不一样,所以,优化也不一样。
4.可以使用bootstrap,大家可以看一下具体的代码和详细的注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap的学习</title>
<!--导入基本样式-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.css">
<!--导入基本样式的压缩-->
<link style="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<!--导入主题样式 注意:顺序 不可变-->
<link style="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<!--类nav清除列表的默认样式 nav-tabs定义tabs的标题栏-->
<ul class="nav nav-tabs">
<li><a href="#tab2" data-toggle=tab">首页</a></li>
<li><a href="#tab2" data-toggle=tab">关注</a></li>
<li><a href="#tab2" data-toggle=tab">个人中心</a></li>
</ul>
</body>
</html>
实际效果如下
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/140088.html原文链接:https://javaforall.cn
相关文章
- vscode怎么html和php混编,vscode如何编译运行html文件[通俗易懂]
- 导航栏滚动渐变效果 html+css+js
- CSS+HTML 顶部导航栏实现「建议收藏」
- html导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]
- 用html做简单的日记,学习HTML日记[通俗易懂]
- 纯HTML CSS制作导航栏 下拉菜单
- HTML+CSS 简单的顶部导航栏菜单制作
- 图片下划线 html,HTML <U>下划线标签元素 HTML下划线标签「建议收藏」
- HTML导航菜单
- 图片中加入超链接html代码,html网页超链接代码 怎样用HTML代码在图片插入超链接…
- 你根本不懂Javascript(EP5 HTML事件捕获与冒泡)
- 每日分享html之两个input搜索框、两个button按钮、一个logo效果
- 用html设计一个动漫网站_HTML一个介绍的页面代码
- 设置HTML为桌面壁纸
- html表格空格符是什么,HTML中的空格符号是什么
- HTML制作网页_手机制作html网页
- Extjs4.2 window加载HTML,父子页面html传参
- Linux 开发HTML的简单技巧(linux开发html)
- 文件MySQL数据库存储HTML文件.(mysql存html)
- 用HTML操作MySQL数据库(html调用mysql)
- HTML 图像
- Linux环境下Web开发的HTML文件编辑(html文件 Linux)
- HTML连接Oracle利用JavaScript即可实现(html连接oracle)
- 关于HTML及UBB标记的闭合
- 用PHP生成静态HTML速度快类库
- asp去除html的函数代码分析附实例说明
- HTML服务器控件和WEB服务器控件的区别和联系介绍
- java清除html转义字符