导航栏的布局

最新推荐文章于 2023-04-10 11:36:18 发布
最新推荐文章于 2023-04-10 11:36:18 发布
阅读量962 收藏 10
点赞数 1
分类专栏： Web前端 文章标签： html css css3 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kokomo_tender/article/details/119276769
版权

做导航栏的步骤及方法：

目标：

1.布局，画图

2.编写Html文档及代码

  • 布局：一个div盒子里面放置一个无序列表
  • 具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="menu">
    <ul>
        <li><a id="current" href="#">首页</a></li>
        <li><a href="#">网页版式</a>
            <ul>
                <li><a href="#">自适应宽度</a></li>
                <li><a href="#">固定宽度</a></li>
            </ul>
        </li>
        <li><a href="#">web教程</a>
            <ul>
                <li><a href="#">新手入门</a></li>
                <li><a href="#">视频教程</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </li>
        <li><a href="#">web实例</a></li>
        <li><a href="#">常用代码</a></li>
    </ul>
</div>
</body>
</html>

效果如下：

3.我们去对写的html利用css进行布局，修饰。

首先分析html代码，从body进行布局，然后从最大的div开始，首先是div的高度和宽度开始，

  • css代码修饰：
body {
    font-family: Verdana;
    font-size: 12px;
    line-height: 1.5;
}
#menu {
    width: 435px;
    height: 28px;
    margin: 0 auto;
    border-bottom: 3px solid #E10001;
     background-color: #61BFFF;
}

解释：对该div上面的id选择器进行布局：这里给个背景就是为了方便观看，最后只需要去掉背景色就可以了，利用 margin: 0 auto;对该div进行水平居中，并且在div的下部给个边框 border-bottom: 3px solid #E10001;效果如下图：

4.接下来对该无序列表进行横行排列

并且去掉该无序列表前面的圆点：

css代码：

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    float: left;
}

解释：利用后代选择器进行修饰： list-style: none;去除圆点，float: left;使得无序列表横向。效果如下图：

5.利用后代选择器对a标签进行修饰：

css代码：

a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #F00;
}

#menu ul li a {
    display: block;
    width: 87px;
    height: 28px;
    line-height: 28px;
    text-align: center;
     font-size: 14px;
    background: url("../images/bg.png") 0 -30px no-repeat;
   
}
#menu ul li a:hover {
    background: url("../images/bg.png") 0 -56px no-repeat;
}

解释:

  • 首先单纯的对a标签进行修饰： color: #000;给a标签的字体给个颜色， text-decoration: none;去掉a标签下面的下划线。
  • 然后我们通过伪类选择器进行修饰，a:hover {color: #F00;}效果是使得鼠标点击的时候，字体的颜色为 #F00。
  • 其次是通过后代选择器#menu ul li a对a标签进行布局， display: block;就是将元素显示为块级元素。这样使得a标签变成块元素。
  • 然后给a标签设置大小:width: 87px;height: 28px;。对a标签里面的文字进行垂直和水平居中：text-align: center;line-height: 28px;。
  • 设置字号：font-size: 14px;这个就是设置字号，，。。。。
  • 通过复合属性background: url("…/images/bg.png") 0 -30px no-repeat;设置背景，通过0 -30px 对一张图片进行移动。（*注意不要习惯的去用background-image: ;**url("…/images/bg.png") 0 -30px no-repeat;*里面有多个属性值，必须的要去用符合属性，所以你不能一个人去拥有多个妻子，这是不正确的，不合法的）

6.最后一步:利用伪类选择器对鼠标悬停上面的样式做修饰。

#menu ul li a:hover {
    background: url("../images/bg.png") 0 -56px no-repeat;
}
#menu ul li a#current {
    background: url("../images/bg.png") 0 0 no-repeat;
    font-weight: bold;
    color: #fff;
}

解释：

  • #menu ul li a:hover {
    background: url("…/images/bg.png") 0 -56px no-repeat;}还是和前面的原理一样，通过移动，进行背景的设置。
  • font-weight: bold;和color: #fff;对字体进行加粗，并且设置字体的颜色。

效果如下：

6.最后，去除背景色，完成了。。。。。

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="menu">
    <ul>
        <li><a id="current" href="#">首页</a></li>
        <li><a href="#">网页版式</a>
            <ul>
                <li><a href="#">自适应宽度</a></li>
                <li><a href="#">固定宽度</a></li>
            </ul>
        </li>
        <li><a href="#">web教程</a>
            <ul>
                <li><a href="#">新手入门</a></li>
                <li><a href="#">视频教程</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </li>
        <li><a href="#">web实例</a></li>
        <li><a href="#">常用代码</a></li>
    </ul>
</div>
</body>
</html>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    line-height: 1.5;
}
#menu {
    width: 435px;
    height: 28px;
    margin: 0 auto;
    border-bottom: 3px solid #E10001;
    background-color: #61BFFF;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    float: left;
}
#menu ul li a {
    display: block;
    width: 87px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: url("../images/bg.png") 0 -30px no-repeat;
    font-size: 14px;

}
a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #F00;
}
#menu ul li a:hover {
    background: url("../images/bg.png") 0 -56px no-repeat;
}
#menu ul li a#current {
    background: url("../images/bg.png") 0 0 no-repeat;
    font-weight: bold;
    color: #fff;
}

附加：

导航栏中的下拉菜单：

在上面的基础上继续添加：

1.首先编写html代码：

<ul>
        <li><a id="current" href="#">首页</a></li>
        <li><a href="#">网页版式</a>
            <ul>
                <li><a href="#">自适应宽度</a></li>
                <li><a href="#">固定宽度</a></li>
            </ul>
        </li>
        <li><a href="#">web教程</a>
            <ul>
                <li><a href="#">新手入门</a></li>
                <li><a href="#">视频教程</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </li>
        <li><a href="#">web实例</a></li>
        <li><a href="#">常用代码</a></li>
    </ul>

注：在以前的无序列表ul中，继续进行嵌套。在没有css代码进行修饰的时候，布局就会打乱，我们后面进行布局就好了，先不要着急。。。。出现的效果如下：

2.用css将上面的html文档进行修饰

#menu ul li ul {
    border: 1px solid #ccc;
    display: none;
    position: absolute;
}
#menu ul li ul li {
    float: none;
    width: 87px;
    background: #eee;
    margin: 0;
}

注： 对该列表进行一个固定定位 position: absolute;我们前面就已经有一个相对定位作为父容器了。并对该列表进行浮动，设置背景。效果如下：

3.对列表进行隐藏，伪类修饰

#menu ul li ul li a {
    background: none;
}
#menu ul li ul li a:hover {
    background: #333;
    color: #fff;
}
#menu ul li:hover ul {
    display: block;
}
#menu ul li.sfhover ul {
    display: block;
}

注：利用伪类选择器：在鼠标点击时,使得下拉列表显示出来，并设置一个点击时，字体的颜色。

完整代码：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="menu">
    <ul>
        <li><a id="current" href="#">首页</a></li>
        <li><a href="#">网页版式</a>
            <ul>
                <li><a href="#">自适应宽度</a></li>
                <li><a href="#">固定宽度</a></li>
            </ul>
        </li>
        <li><a href="#">web教程</a>
            <ul>
                <li><a href="#">新手入门</a></li>
                <li><a href="#">视频教程</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </li>
        <li><a href="#">web实例</a></li>
        <li><a href="#">常用代码</a></li>
    </ul>
</div>
</body>
</html>

css：


body {
    font-family: Verdana;
    font-size: 12px;
    line-height: 1.5;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: white;
}

#menu {
    width: 445px;
    height: 28px;
    margin: 0 auto;
    border-bottom: 3px solid #E10001;
}

#menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#menu ul li {
    float: left;
    margin-left: 2px;
}

#menu ul li a {
    display: block;
    width: 87px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: url(../images/bg.png) 0 -30px no-repeat;
    font-size: 14px;
}

#menu ul li a:hover {
    background: url(../images/bg.png) 0 0 no-repeat;
}

#menu ul li a#current {
    background: url(../images/bg.png) 0 0 no-repeat;
    font-weight: bold;
    color: #fff;
}

#menu ul li ul li {
    float: none;
}

#menu ul li ul li a {
    background: none;
}

#menu ul li ul {
    border: 1px solid #ccc;
}

#menu ul li ul li {
    float: none;
    width: 85px;
    background: #eee;
    margin: 0;
}
#menu ul li ul li a {
    background: none;
}
#menu ul li ul li a:hover {
    background: #333;
    color: #fff;
}
#menu ul li ul {
    display: none;
    border: 1px solid #ccc;
}
#menu ul li:hover ul {
    display: block;
}
#menu ul li.sfhover ul {
    display: block;
}



虽然简单，但是是为了记录整个过程，希望这个过程能够帮助你，代码不是固定的，但是分析过程是个人的一个建议，因为这个样式在好多导航栏都适用，只要学会，导航栏对你很简单，这也是个人自己的理解，希望能够帮到屏幕前你。。。。。。。。

效果如下：使劲戳我：[nav.xiaoyinwh.cn](http://nav.xiaoyinwh.cn)
Lazy_idle
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS仿淘宝首页导航条布局效果
10-31
CSS仿淘宝首页导航条布局效果
Android 利用ViewPager+GridView实现首页导航栏布局分页效果
09-01
用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
html+css侧边伸缩导航栏
01-26
【html+css】侧边伸缩导航栏
切换整体背景导航栏布局
04-03
切换整体背景导航栏布局，根据网上的demo修改的，可改变整体的背景图片以及布局中的局部布局的背景图片，退出应用后再次打开仍保留上次操作。
左侧下拉导航栏.html
02-17
左侧竖直下拉菜单，点击能够收缩和展开
HTML网页入门练习——导航栏布局设计
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
【纯前端实现页面总结一】-- 导航栏布局以及点击展示不同界面+iframe标签引入的页面自适应高度（在html中引入另一个html文件）【已解决】
hannah2233的博客
10-23 5013
说明：jQuery实现， 点击导航栏变换iframe标签引入的页面 默认展示首页，css样式默认应用于“首页”导航栏 点击切换页面，并且导航栏样式改变 一、 页面切换效果如下： 小声逼逼：关于录屏软件的推荐：这篇博客里面有的哦，没有水印哒~ 二、 html文件中的内容如下（代码可粘贴运行）： homePage.html文件中放置页面主要内容，头部，尾部，导航栏… 首页.html放置首页的展示内容 展示一.html放置展示一的展示内容 其余同理 1、 homePage.html文件(内含cs.
实现左侧导航栏点击，右侧显示对应页面的布局
热门推荐
engineer_hzl
01-19 5万+
简单介绍下面js代码的意思： $(function() { var height=document.documentElement.clientHeight; document.getElementById('iframe-page-content').style.height=height+'px'; }); var menuClick = function(menuUrl) { $("#ifr
HTML5 学习
fvcvv的博客
10-27 1174
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。—HTML5是构建Web前端开发的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
html导航栏所有页面通用,在所有页面中包含HTML导航栏
weixin_39668527的博客
06-03 2369
我有一个导航栏,我希望在一个单独的html文件中,然后在我所有其他页面中使用.我觉得它会使代码看起来更整洁,更有条理.但是,我遇到了一些麻烦.我开始尝试修复主页,这就是我所拥有的:Home Page 这是一个单独的html文件中的导航栏,但与我所有其他html文件位于同一个目录中.这是navigation.html文件,如果它可以帮助任何事情:Home Page World Congress C...
vue实现中部导航栏布局功能
10-16
主要介绍了vue实现中部导航栏布局功能，本文图文并茂，代码实例相结合介绍的非常详细，需要的朋友参考下吧
前端笔记HTML5+CSS3——导航栏navigator
志存高远，亦须循序渐进
01-06 1602
仅CSS的区别
前端笔记：html,css实现导航条的界面展示
weixin_44158539的博客
07-30 311
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航条</title> <link rel="stylesheet" href="./reset.css"&
html实现导航栏全局应用（使用ifrname）
weixin_47251021的博客
04-10 1188
使用ifrname实现html导航栏全局化
HTML5实现一种很常见的网页布局设计（导航栏在左侧）
weixin_44520259的博客
05-16 3万+
一、代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>页面布局2</title> <style type='text/css'> /*下面的星号让素有元素内外边距都为0，不留空隙*/ *{ pa...
html中 导航条置顶的代码,如何让我的导航栏保持在每个HTML页面的顶部（避免复制相同的代码）...
weixin_42373088的博客
05-31 471
您可以为您的应用程序创建一个......然后在基地的每一个孩子的状态可以将内容添加到命名视图“内容”。与ui-sref-active="active"很容易突出显示当前活动的链接。请看看下面的演示或此fiddle。angular.module('demoApp', ['ui.router'])\t .config(routeConfig);function routeConfig($urlRout...
html多个页面加载导航,html – 当前页面的导航栏高亮显示
weixin_39699070的博客
06-03 637
我想知道如何添加在当前页面上的导航栏上添加高亮框的功能.你知道所以人们知道他们的页面.这是导航栏的CSS：/*TOP NAV BAR SECTION*/*{margin: 0px;padding: 0px;}#nav_bar {background-color: #a22b2f;Box-shadow: 0px 2px 10px;height: 45px;text-align: center;}#n...
Django里HTML页面共用导航栏和底部申明栏
qq_38175040的博客
06-17 2259
页面如下，顶部和底部是公用的 要实现公用，需要用到Django里的block 贴一下这个页面的源代码： <html > <head> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> {% block title%}<title>列表页</title>{% endblock
侧边导航栏（抽屉式设计）界面 (html + css)
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
android 导航栏 布局
最新发布
05-14
Android 导航栏通常有两种布局方式：底部导航栏和顶部导航栏。下面是两种布局方式的实现方法： 1. 底部导航栏布局： 使用 `BottomNavigationView` 控件可以很方便地实现底部导航栏布局。在 XML 布局文件中添加 `BottomNavigationView` 控件并设置菜单项，如下所示： ```xml <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_navigation_menu" /> ``` 在代码中为 `BottomNavigationView` 设置菜单项的点击事件： ```java BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation); bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_home: // 处理点击首页菜单项的事件 break; case R.id.action_discover: // 处理点击发现菜单项的事件 break; case R.id.action_me: // 处理点击我的菜单项的事件 break; } return true; } }); ``` 2. 顶部导航栏布局： 使用 `Toolbar` 控件可以很方便地实现顶部导航栏布局。在 XML 布局文件中添加 `Toolbar` 控件并设置标题和菜单项，如下所示： ```xml <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:title="My App"> <Menu android:id="@+id/menu" app:showAsAction="never" app:menu="@menu/toolbar_menu" /> </androidx.appcompat.widget.Toolbar> ``` 在代码中为 `Toolbar` 设置菜单项的点击事件： ```java Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.action_search: // 处理点击搜索菜单项的事件 break; case R.id.action_settings: // 处理点击设置菜单项的事件 break; } return true; } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值