您的位置：首页 > Web前端 > > 正文

css导航栏特效（CSS导航栏及弹窗示例代码）

更多时间：2022-01-21 00:25:10 类别：Web前端浏览量：921

css导航栏特效

CSS导航栏及弹窗示例代码

最近整理了CSS导航栏及弹窗，具体如下：

CSS导航

先来看下效果：

css导航栏特效（CSS导航栏及弹窗示例代码）

<!doctype html>  
<html>  
    <head>  
        <title>Insert your title</title>  
        <meta charset="utf-8">  
        <style>  
            body{  
                font-size:12px;  
            }  
              
            #discuss{  
                width:990px;  
                margin:0 auto;  
            }  
            #mt{  
                /*高度：30px，边框，上边框，背景颜色*/  
                height:30px;  
                border:1px solid #ddd;  
                border-top:2px solid #9d9d9d;  
                background:#F7F7F7;  
            }  
            #discuss-content{  
                border-bottom:1px solid #ddd;  
                padding-bottom:2px;  
            }  
  
            #discuss-datas{  
                width:990px;  
            }  
  
            #discuss-datas thead td{  
                /*加粗，上下内边距，下边框，文本居中对齐*/  
                font-weight:bold;  
                padding:5px 0;  
                border-bottom:1px solid #ddd;  
                text-align:center;  
                color:#666;  
            }  
  
            /*处理 .col1 的样式 (每行第一列的效果)*/  
            #discuss-datas td.col1{  
                width:620px;  
                text-align:left;  
            }  
              
            /*内容行中所有的列*/  
            #discuss-datas tbody td{  
                /*虚线下边框，上下内边距，文本水平居中对齐，文本颜色*/  
                border-bottom:1px dotted #ddd;  
                padding:5px 0;  
                text-align:center;  
                color:#9c9a9c;  
            }  
  
            /*处理所有超链接*/  
            #discuss a{  
                color:#005aa0;  
                text-decoration:none;  
            }  
            #discuss a:hover{  
                text-decoration:underline;  
            }  
  
            /*晒，论 两幅图*/  
            #discuss-datas b{  
                /*宽度，高度，背景属性*/  
                padding-left:21px;  
                padding-bottom:2px;  
                padding-top:3px;  
                background-image:url(../Images/iconlist_1.jpg" alt="css导航栏特效（CSS导航栏及弹窗示例代码）" border="0" />

最后效果图：

css导航栏特效（CSS导航栏及弹窗示例代码）

商城导航：

css导航栏特效（CSS导航栏及弹窗示例代码）

<!doctype html>  
<html>  
    <head>  
        <title>Insert your title</title>  
        <meta charset="utf-8">  
        <style>  
            #nav{  
                /*宽度，高度，背景颜色，水平居中对齐*/  
                width:990px;  
                height:40px;  
                background-color:#E64346;  
                margin:0 auto;  
            }  
            #nav p{  
                /*取消默认margin，宽度，高度，背景颜色*/  
                margin:0;  
                width:210px;  
                height:40px;  
                background-color:#CD2A2C;  
            }  
            #nav>p>a{  
                /*左浮动，高度，行高，文字：加粗，大小，颜色，取消下划线*/  
                float:left;  
                height:40px;  
                line-height:40px;  
                font-weight:bold;  
                font-size:14px;  
                color:#fff;  
                text-decoration:none;  
                padding-left:15px;  
            }  
            #nav>p>b{  
                /*右浮动，宽度，高度，背景，位置*/  
                float:right;  
                width:20px;  
                height:20px;  
                background:url(../Images/iconlist_2.jpg" alt="css导航栏特效（CSS导航栏及弹窗示例代码）" border="0" />

导航列表弹框效果：

初始状态：

css导航栏特效（CSS导航栏及弹窗示例代码）

鼠标悬停时：

css导航栏特效（CSS导航栏及弹窗示例代码）

<!doctype html>  
<html>  
    <head>  
        <title>Insert your title</title>  
        <meta charset="utf-8">  
        <style>  
            #my_jd{  
                width:100px;  
                height:30px;  
                text-align:center;  
                line-height:30px;  
                border:1px solid #000;  
                background-color:#fff;  
                /*相对定位：配合 #menu 的绝对定位*/  
                position:relative;  
                cursor:pointer;  
            }  
            #menu{  
                width:400px;  
                height:100px;  
                background-color:#fff;  
                border:1px solid #000;  
                /*绝对定位*/  
                position:absolute;  
                top:30px;  
                left:-1px;  
                /*隐藏*/  
                display:none;  
                  
            }  
            #my_jd:hover #menu{  
                display:block;  
            }  
            #my_jd:hover #line{  
                width:100px;  
                position:absolute;  
                border-top:1px solid #fff;  
            }  
        </style>  
    </head>  
    <body>  
        <li id="my_jd">  
            我的京东  
            <!-- 弹出菜单 -->  
            <li id="menu">  
                模拟我的京东弹出菜单  
            </li>  
            <li id="line"></li>  
        </li>  
    </body>  
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

标签：导航栏弹窗 css

上一篇：mac的mysql连接问题如何解决（MAC 中mysql密码忘记解决办法）

下一篇：dedecms文章点击量（Dedecms文章标题及文章摘要长度修改的方法）

您可能感兴趣

css导航栏特效（CSS导航栏及弹窗示例代码）

css导航栏特效

热门推荐

排行榜