html中的导航条制作「建议收藏」
HTML 建议 收藏 制作 导航条
2023-06-13 09:12:43 时间
大家好,又见面了,我是你们的朋友全栈君。
在网页中一个这样的导航条该怎么做呢?
用HTML中的无序列表(ul)做。。
然后在给列表设置需要的样式即可:
具体参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css"> *{
padding: 0px; margin: 0px; } .nav{
list-style: none; background-color: #6495ed;/*给整个列表设置蓝色背景*/ width: 1200px; /*height: 45px;*/ margin: 20px auto; overflow: hidden; zoom: 1; } .nav li{
float: left; width: 25%; } .nav a{
width: 100%; display: inline-block; text-align: center; padding: 5px 0px; text-decoration: none; color: white; font-weight: bold; } .nav a:hover{
background-color: red; } </style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163149.html原文链接:https://javaforall.cn
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- HTML+CSS实现炫酷的登录界面「建议收藏」
- HTML中设置背景图的两种方式「建议收藏」
- html页面调用高德地图,html前端使用高德地图入门教程「建议收藏」
- html 下拉导航栏源码,html导航栏下拉菜单怎么制作?这里有详细的代码实例「建议收藏」
- 用html做简单的日记,学习HTML日记[通俗易懂]
- html 输入框输入事件,input输入框事件「建议收藏」
- 图片下划线 html,HTML <U>下划线标签元素 HTML下划线标签「建议收藏」
- HTML简单音乐播放器「建议收藏」
- DOCTYPE声明的作用及用法详解 – DOCTYPE HTML PUBLIC官方的定义「建议收藏」
- jsp中<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” 。。的重要性「建议收藏」
- html 的scor属性,scrollheight属性「建议收藏」
- 图片中加入超链接html代码,html网页超链接代码 怎样用HTML代码在图片插入超链接…
- html设置ie9兼容性视图,ie9浏览器设置兼容性视图在哪里设置「建议收藏」
- html文本框鼠标离开事件,html鼠标事件_文本框事件「建议收藏」
- html中如何写系统时间,在HTML页面获取当前系统时间
- html左侧浮动广告代码,网站侧边栏广告固定浮动效果的实现「建议收藏」
- html表格空格符是什么,HTML中的空格符号是什么
- 分享 15 个 HTML 新特性,大多数人可能不知道,建议尽早使用上
- Linux 开发HTML的简单技巧(linux开发html)
- 文件MySQL数据库存储HTML文件.(mysql存html)
- 从 HTML 页面访问 MySQL 数据库.(html访问mysql)
- 标签使用MySQL过滤HTML标签(mysql过滤html)
- Linux环境下Web开发的HTML文件编辑(html文件 Linux)
- python发送邮件的实例代码(支持html、图片、附件)
- JavaScript动态改变HTML页面元素例如添加或删除