简约好看导航栏(HTML、CSS)

迷南。 2023-10-03 12:39 14阅读 0赞

### 简约好看导航栏(HTML、CSS) ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>padding案例</title>
        <style>
            .nav {
        
                height: 41px;
                border-top: 3px solid #ff8500;
                border-bottom: 1px solid #edeef0;
                background-color: #fff;
                line-height: 41px;
            }
    
            .nav a {
        
                /*   此时的a为行内元素 修改高无效 需要将a转换为行内块元素 它既可以有宽度 又可以有高度*/
                display: inline-block;
                height: 41px;
                padding: 0 20px;
                /* 上下为0  左右为20px */
                font-size: 12px;
                color: #4c4ac4;
                text-decoration: none;
            }
    
            .nav a:hover {
        
                background-color: #eee;
                color: #ff8500;
            }
        </style>
    
    </head>
    
    <body>
        <div class="nav">
            <a href="#">新浪导航</a>
            <a href="#">手机新浪网</a>
            <a href="#">移动客户端</a>
            <a href="#">微博</a>
        </div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关二级导航栏

简介：本文通过HTML与CSS相集合的方式，来实现二级导航菜单。 HTML构建骨架 <body> <ul class="nav1">

我会带着你远行/ 2024年04月01日 18:55/ 0 赞/ 121 阅读

相关 Android：快速上手好看简约的轮播图

> 创作不易，点个赞再走吧，谢谢！目录前言一、如何引入二、使用步骤 1、我们首先在xml文件中引入布局，设置我们喜欢的样式，大小，下面我给出示例： 2、然后

红太狼/ 2024年03月16日 20:09/ 0 赞/ 21 阅读

相关简约好看侧边栏(HTML、CSS)

简约好看侧边栏(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head> <m

不念不忘少年蓝@/ 2023年10月03日 12:54/ 0 赞/ 19 阅读

相关简约好看导航栏(HTML、CSS)

简约好看导航栏(HTML、CSS) <!DOCTYPE html> <html lang="en"> <head> <m

迷南。/ 2023年10月03日 12:39/ 0 赞/ 15 阅读

相关 css导航栏_使用CSS的导航栏

css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing

系统管理员/ 2023年03月05日 10:59/ 0 赞/ 32 阅读

相关 CSS简约垂直导航工具条

[下载地址][Link 1]简约的垂直样式导航工具条样式，hover悬停黑色竖直的图标导航工具栏，悬停冒泡文字提示效果。可用于功能性网页工具栏ui布局特效。 ![163156

水深无声/ 2022年09月12日 04:41/ 0 赞/ 217 阅读

相关 Bootstrap导航栏

1.表格导航或标签：创建一个标签式的导航菜单 ![这里写图片描述][20160612152626775] 以一个带有class.nav的无序列表开始

客官°小女子只卖身不卖艺/ 2022年08月23日 08:42/ 0 赞/ 282 阅读

相关导航栏

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）： 1 下拉菜单栏： <!DOCTYPE html>

深藏阁楼爱情的钟/ 2022年05月25日 10:58/ 0 赞/ 405 阅读

相关 Bootstrap 导航栏

一、导航元素 1、导航标签并添加标签页注意 .nav-tabs 类依赖 .nav 基类。 <div class="container">

妖狐艹你老母/ 2022年04月23日 08:02/ 0 赞/ 391 阅读

相关导航栏

今天做一个百度首页的导航栏 ![在这里插入图片描述][20190716200535505.png] <!DOCTYPE html> <html>

「爱情、让人受尽委屈。」/ 2021年12月07日 11:55/ 0 赞/ 523 阅读