导航菜单1（div+css）

最新推荐文章于 2024-10-26 15:37:31 发布
原创 最新推荐文章于 2024-10-26 15:37:31 发布 · 320 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#导航 #鼠标 #前端

本文分享了作者用2小时完成一个简单导航菜单的经验，包括布局技巧、样式调整等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为刚开始做实例和看视频不同会碰到很多实战问题，我用了2个小时做了一个简单的导航菜单，以下是相关知识点和效果图

1.无需标签ul li 放它们放进一个div 

2.给div做个背景色#ab0

3.给li加个border-right: 2px solid #aba;

4.可以使用padding来调整文字在div里的上下距离

5.加一个锚伪类 ul li:hover{background-color:#CFC;}鼠标移到菜单上就会显示填充颜色.

6.cursor:pointer;光标显示


多做少说
关注
div+css制作的几款好看的导航栏
11-07
网页特效，几款好看的导航栏，鼠标点击变斜体导航栏目网页特效，利用了div+css制作而成
js+div+css下拉导航菜单完整代码分享
11-28
效果预览：...js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
div+css实现的导航栏
二进制天堂
01-08 1046
css文件：.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }.channel ul { list-style:none; margin:0px;}.channel li { float:left; padding-left:8px; }.cha
css+div纵向导航菜单及二级弹出菜单
WinBing的博客
04-06 2643
功能介绍，当鼠标放在一级菜单那里时，弹出二级菜单。结尾有效果图。 本功能重点1（二级菜单的位置）： 首先需要一级菜单的li里写position: relative;做一个相对定位二级菜单。 然后，在二级菜单里面写position: absolute;此时二级菜单的盒子的位置是与一级菜单重叠。所以，要做一个绝对定位，并设置其左边距为26px（一级菜单的宽度为26px） 本功能重点2（二级菜单显示）： 首先，默认情况将不显示二级菜单，display:none; #menu ul li:hover ul{ dis
div+css创建导航栏
MRWisme的博客
10-31 1937
1、准备一个html页面代码 导航栏           2、为导航栏创建一个div块以及添加相应的css，以及导航栏元素（ul、li）                       主页         生活大小事         公告         校园美景         个人主页               .dt{
css+div实现导航栏
L_Y_J_21的博客
10-08 4945
css+div实现导航栏 把页面分成两个部分，用div装起来 &lt;body&gt; &lt;div class="one1"&gt; &lt;h1&gt;SYROS&lt;/h1&gt; &lt;/div&gt; &lt;div class="one2"&gt; &lt;/div&gt; 用&lt;link rel=&q
DIV+CSS实现的懒人图库导航菜单demo
05-19
在这个"DIV+CSS实现的懒人图库导航菜单demo"中，我们可以深入探讨如何利用这两种技术创建一个响应式且用户友好的图库导航菜单。 首先，`<div>`是HTML中的一个容器元素，它没有特定的语义，但可以通过CSS进行样式...
css.rar_css_div+css导航_菜单
09-24
1. `nav.css` 是样式表文件，包含了实现导航菜单所需的所有CSS代码。CSS规则会定义`div`元素的布局、颜色、字体、边距等属性，以及动态效果如悬停时的背景变化、过渡动画等。 2. `bt_quickNav.gif`、`nav_hover.gif`...
div+css纵向导航如何实现且为导航添加超链接
12-12
以下代码实现纵向导航功能，并为导航添加了超链接（用#不可用的超链接代替），如下图所示 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
左侧导航菜单div+css样式
11-03
在创建左侧导航菜单时，我们通常会用到以下CSS属性和技巧： 1. **布局定位**：使用`position`属性（如`relative`、`absolute`或`fixed`）来确定菜单在页面上的位置。对于左侧导航，通常使用`position: fixed`使其...
CSS+DIV制作导航条
05-02
<body> <div class="cd"> <ul><!--导航条--> <li><a href="#">A</a></li> <!---------------------------------------------> <li><a href="#">B</a><!--二级--> <ul> <li><a href="#">B1</a><!--3级--> <ul> <li><a href="#">B12</a></li> </ul> </li> <li><a href="#">B2</a> <ul> <li><a href="#">b22</a></li> </ul> </li> </ul> </li><!--二级结束--> <!---------------------------------------------> <li><a href="#">C</a></li> </ul><!--导航条结束--> </div> </body> </html>
CSS+DIV之导航菜单实例
weixin_34321753的博客
11-20 552
2019独角兽企业重金招聘Python工程师标准>>> ...
DIV+CSS 二级菜单实现
qq_42758330的博客
05-01 5950
DIV+CSS实现二级菜单 在网页制作中我们经常会用到的这样的导航栏+二级菜单布局 实现效果如下： 设计思路就是通过 ul li 的双重嵌套来实现二级菜单，l利用display:none将二级菜单默认隐藏，li:hover鼠标悬浮时再将其显示出来。 需要注意的是： 1.需要清除掉网页的原始属性 以防止二级菜单错位*{margin:0;padding:0;} 2.在一级菜单中使用display: block; float:left 使其横向显示 3.使用绝对对位 然后使二级菜单默认隐藏position:a
经典DIV+CSS下拉菜单
热门推荐
在线格式化与开发工具大全
07-27 7万+
符合WEB标准的CSS下拉导航菜单布局及css下拉菜单模板   HTML代码如下 &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="###"&gt;div+css&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="###"&gt;CSS
详解学习DIV+CSS之二-导航栏实例
chenshizero的专栏
10-10 785
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" c
23种实用Div+CSS导航栏设计技巧与代码示例
最新发布
weixin_42613018的博客
10-26 1755
本文还有配套的精品资源，点击获取 简介：Div+CSS布局技术在网页设计中被广泛应用于提高页面的可维护性和可访问性。本资源包详细介绍了23种经典导航栏设计的CSS代码实现，包括基础布局、响应式设计、下拉菜单、滑动效果、视觉样式、文字处理、边距控制、圆角与阴影、布局技术（如Flexbox和Grid）、悬停与动画效果以及无障碍性设计等方面。通过这些示例，读者可以深入理解并掌握导...
利用css和DiV怎样创建导航条,cssdiv做导航条（Cssdiv makes navigation bars）.doc
weixin_42188512的博客
08-03 327
cssdiv做导航条(Cssdiv makes navigation bars)cssdiv做导航条(Cssdiv makes navigation bars)In fact, do this navigation very easy, you just need to move the mouse knock on the keyboard, with KwooJan do it, ha ha[...
利用 CSS + DIV 打造高效网页布局：技巧与实战指南
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
通过div+css做出好看的横排导航栏
u014340533的专栏
12-18 1万+
第一次写博客，希望大家支持，如果有什么不严谨或者写错的地方，望大家批评矫正。希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！ 1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下： 无标题文档 标题1 标题2 标题3 子标题1 子标题2 标题4 标
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值