HTMl中标签中li横向排列的实现示例游戏攻略

admin HTML/Xhtml 2022-02-04 21:55:37 li横向排列 HTMl横向排列"

大多数的导航栏都是横向排列如下图所示，那么这究竟是怎么实现的呢？其实它主要运用

1编写横向菜单的HTML代码架构


 Baidu.Com
 Jb51.net
 Yahoo.Com
 Google.Com

2 编写CSS代码

<1>设置公共样式

<3>链接悬停效果

<4>去掉最左边导航栏的右边框

3 完整的代码




	
	图片提示效果
	
    
 


    
        Baidu.Com
         Jb51.net
         Yahoo.Com
         Google.Com

在线运行

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片提示效果</title> <script src="../jquery-3.3.1.min.js"></script> <style type="text/css"> #menu { font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */ width: 100%; } #menu, #menu li { list-style:none; /* 将默认的列表符号去掉 */ padding:0; /* 将默认的内边距去掉 */ margin:0; /* 将默认的外边距去掉 */ float: left; /* 往左浮动 */ display: block; } #menu li a { display:inline-block; /* 将链接设为块级元素 */ width:150px; /* 设置宽度 */ height:30px; /* 设置高度 */ line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */ text-align:center; /* 居中对齐文字 */ background:#3A4953; /* 设置背景色 */ color:#fff; /* 设置文字颜色 */ text-decoration:none; /* 去掉下划线 */ border-right:1px solid #000; /* 在左侧加上分隔线 */ } #menu li a:hover { background:#146C9C; /* 变换背景色 */ color:#fff; /* 变换文字颜色 */ } #menu li a.last { border-right:0; /* 去掉左侧边框 */ } </style> </head> <body> <p>潘少俊衡</p> <ul id="menu"> <li><a href="https://www.iwyv.com/d/files/20220204/ylmo3h2te5t">Baidu.Com</a></li> <li><a href="https://www.jb51.net/www.jb51.net">Jb51.net</a></li> <li><a href="https://www.iwyv.com/d/files/20220204/nmvdeeiwewq">Yahoo.Com</a></li> <li><a href="http://www.google.com" class="last">Google.Com</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

总之，使其横向排列的最需要的是: 标签的主要样式为display:balock;

的主要样式为display:inline-balock,float：left,list-style:none;

到此这篇关于HTMl中标签中li横向排列的实现示例的文章就介绍到这了,更多相关HTMl li横向排列内容请搜素潘少俊衡以前的文章或下面相关文章，希望大家以后多多支持潘少俊衡！

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/HTML/70402.html

上一篇 : html表单控件禁用属性readonly VS disabled介绍游戏攻略

下一篇 : html 表格比较宽溢出的解决方法游戏攻略

留言与评论（共有 0 条评论）

1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

HTMl中标签中li横向排列的实现示例游戏攻略

版权声明

热门文章

最近发表

标签列表

| 桂ICP备2023010378号-4

Powered By EmpireCMS

HTMl中标签中li横向排列的实现示例 游戏攻略

版权声明

相关文章

热门文章

最近发表

标签列表

var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); | 桂ICP备2023010378号-4

Powered By EmpireCMS

HTMl中标签中li横向排列的实现示例游戏攻略

| 桂ICP备2023010378号-4