html+css 横向导航栏

最新推荐文章于 2024-05-19 09:58:49 发布
最新推荐文章于 2024-05-19 09:58:49 发布
阅读量1.4w 收藏 117
点赞数 22
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wfqiong_123/article/details/106769338
版权

总体使用列表和超链接，横向导航栏主要使用float:left

1.html

	<body>
	<!--大框架-->
			<div class="box">
				<div class="nav1">
			        <!--横向导航栏-->
			        <ul>  
			            <li><a href="#"> 项目1 </a></li>
			            <li><a href="#"> 项目2 </a></li>
			            <li><a href="#"> 项目3 </a></li>
			            <li><a href="#"> 项目4 </a></li>
			            <li><a href="#"> 项目5 </a></li>
			        </ul>
			    </div>
			<div>
	</body>

2.css代码

	ul{
			list-style-type: none; /*清除无序列表前的小点*/
			width: auto;
			height: 50px;
			background: #3b3753;
			margin: 0px;
			padding-left: 20%;/*左边距，使li看起来在中间*/
			/*position: relative;*/
			text-align: center;
		}
	li{
			float: left;
			width: 130px;
			height: 100%;
			padding: 0px;
			margin-right: 1%;  /*两个li之间的距离*/
		}
	a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
			display: block;
			color: #FFFFFF;
			background-color: #3b3753;
			text-align: center;
			line-height: 30px; /*li行高*/
			padding: 10px;
			text-decoration: none; /*去下划线*/
		}
	a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
			background-color: #111;
		}

3.效果

在这里插入图片描述
如有问题，欢迎指出。

寸京
关注
  • 22
    点赞
  • 踩
  • 117
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【个人向】横向网页导航栏 常用样式一
csdn_491407692的博客
03-28 1155
网页导航栏，有下拉效果的html和css
html中关于侧边导航栏和导航栏的编写
xxxmou的博客
02-04 7608
关于侧边导航栏和下拉菜单纯css编写
【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-16 4632
一、横向导航栏实现核心要点 1、固定定位下面的布局设置 2、设置横向导航栏弹性布局 3、弹性布局主轴和侧轴设置 4、二倍精灵图 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
html实现导航栏
最新发布
studyinstall的博客
05-19 1045
【代码】【无标题】
HTML横向导航菜单
10-10
使用HTML实现的横向导航菜单，仅供参考
HTML5网页设计小案例：网页导航栏的设计
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
html实现好看的多种风格导航菜单(附源码)
热门推荐
xcLeigh
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
html制作精美导航栏
m0_62237068的博客
07-18 7737
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
html+css实现简单导航栏
qq18__的博客
05-06 996
实现一个简单的导航栏，当鼠标移动到某个链接时改变背景颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用行内块元素做一个导航栏</title> <style type="text/css"> a { disp...
用html和CSS绘制网页的导航栏
IT_lifestyle的博客
07-01 1918
导航栏是页面重要的一部分，本节向大家展示双行导航栏的编写，基于该模板可以DIY自己的导航栏，改变内容、颜色、背景等。
HTML导航栏
m0_51700376的博客
09-01 2万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏</title> <style type="text/css"> *{ margin:0 auto; padding: 0; } .nav { width: 1200px; height: 50px; } ul li { list-style: none
用HTML来做导航栏
qq_59080175的博客
06-29 1万+
text-decoration : none 用于清除 a 标签的下划线； list-style : none 用于清除 li 前面的小圆点； padding ：0px 因为导航栏里的文字并不是字数相等，所以为了美观，我们不去直接设置 盒子的宽度，而是用一个内边距给它撑开； float ：left 一浮都浮，使得所有盒子在一行显示； ul li a: hover 用来设置鼠标滑过的效果。 让我们看看最后的效果吧...
HTML制作导航栏
m0_75264894的博客
06-09 5576
<img src="./img/西工商.png" alt=""></div><div><img src="./img/西工商.png" alt=""></div><div><img src="./img/西工商.png" alt=""></div><div><img src="./img/西工商.png" alt="">人才济济</li><li>学校简介</li><li>学校领导
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-05 8855
一、盒子测量及样式 1、总体盒子测量及样式 2、左侧盒子测量及样式 3、中间盒子测量及样式 4、右侧盒子测量及样式 二、横版导航栏代码示例 1、HTML 标签结构 2、CSS 样式 3、显示效果
导航栏html代码
qq_55299191的博客
10-11 2万+
效果如下 html 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航制作</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/public.css"> </head>.
HTML+CSS制作导航栏
qq_64867440的博客
10-13 4559
1.1效果展示。
CSS 导航栏
梁辰兴的博客
09-20 2234
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
CSS之导航栏
Fancymeng的博客
09-01 2421
今天接着谈谈CSS CSS除了简单的文字背景样式外，还有着多样的格式本篇文章笔者将谈一谈导航栏 今天这篇会涉及HTML和VUE哦~ ~ ~
HTML设计一个水平导航栏，完成水平导航栏下拉列表交互效果的实现。
2301_76652768的博客
06-09 6998
完成水平导航栏下拉列表交互效果的实现，（1）使用无序列表ul及嵌套的子列表ul做该导航菜单结构；（2）使用浮动实现主菜单项的水平排列； （3）使用:hover伪类选择器为主菜单项添加鼠标悬停效果（可自定义） （4）使用display 或 visibility 或opacity 属性隐藏子列表菜单 （5）使用:hover伪类选择器添加鼠标悬停时显示子菜单效果 （6）使用:hover伪类选择器添加鼠标悬停在子菜单选项时显示背景颜色和字体颜色改变效果。
html与css制作一个横向导航栏
05-20
可以使用HTML的`<nav>`标签和CSS的`display: flex;`属性来制作一个简单的横向导航栏。 HTML代码： ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> ``` CSS代码： ```css nav { background-color: #333; /* 导航栏背景色 */ } ul { display: flex; /* 将导航项水平排列 */ list-style: none; /* 去除列表默认样式 */ margin: 0; /* 去除列表默认外边距 */ padding: 0; /* 去除列表默认内边距 */ } li { margin-right: 20px; /* 导航项之间的间距 */ } a { color: #fff; /* 导航项文字颜色 */ text-decoration: none; /* 去除下划线 */ padding: 10px; /* 导航项内边距 */ display: inline-block; /* 转换为块级元素 */ } ``` 以上代码实现了一个简单的横向导航栏，并且可以通过CSS来自定义样式。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值