html中的导航条制作「建议收藏」

html中的导航条制作「建议收藏」在网页中一个这样的导航条该怎么做呢?用HTML中的无序列表(ul)做然后在给列表设置需要的样式即可:具体参考代码:<!DOCTYPEhtml><htmllang="en"><head> <metachar

大家好,又见面了,我是你们的朋友全栈君。

在这里插入图片描述
在网页中一个这样的导航条该怎么做呢?

用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.net/163149.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • BM3D图像去噪算法

    BM3D图像去噪算法一、引言          一种非局部去噪方法Non-localmethod[1],可以归类到spatialmethod中,另外用的比较多的还有transformmethod,基于transformmethod的方法在imagedenoise中也取得了很好的效果,不过理论阐述会比较繁琐,如BLS-GSM-Wavelet。        NLM去噪算法使用的是i

    2022年5月2日
  • namecheap mx记录配置邮箱

    namecheap mx记录配置邮箱

    2022年2月17日
  • expdp时遇到ORA-31693&amp;ORA-02354&amp;ORA-01466

    expdp时遇到ORA-31693&amp;ORA-02354&amp;ORA-01466

    2022年1月21日
  • HTML 表格表单代码实例(个人简介表)

    HTML 表格表单代码实例(个人简介表)<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metahttp-equiv=”X-UA-Compatible”content=”IE=edge”><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title&…

    2022年7月27日
  • mock测试概念「建议收藏」

    mock测试概念「建议收藏」mock测试概念:mock是在测试过程中,对于一些不容易构造/获取的对象,创建啊一个mock对象来模拟对象的行为mock对象使用范畴真实对象具有不可确定的行为。真实对象很难被创建。真实对象的某些行为很难触发。真实情况令程序运行速度很难。真实对象实际上并不存在。测试隔离的实现。mock有什么用?解除一些依赖关系,当测试部分接口实现,需要依赖于与其他接口与,而其他接口没完…

    2022年6月20日
  • python 6行代码搞定图片批量重命名「建议收藏」

    python 6行代码搞定图片批量重命名「建议收藏」importpandasaspdimportosf1=pd.read_excel(‘花.xlsx’,converters={‘name’:int,’rename’:str})如下图所示,为f1。读取’花.xlsx’文件,以整型的形式读取’nama’,以文本的形式读取’rename’。name为图片原始的命名。rename为图片重命名的结果。filelist…

    2022年9月5日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号