下拉菜单,纯CSS塑造的导航菜单

CSS定位难点(二):float 和 display 的运用

2016/04/27 · CSS ·
display,
float,
定位

正文小编: 伯乐在线 –
zhiqiang21
。未经小编许可,禁止转发!
迎接加入伯乐在线 专辑撰稿人。

display 属性规定成分应该改换的框的花色。

其1脾性用于定义建立布局时成分生成的来得框类型。对于 HTML
等文书档案类型,假设应用 display 不严峻会很危急,因为恐怕违反 HTML
中曾经定义的显得层次结构。对于 XML,由于 XML
没有松手的那种层次结构,全数 display 是纯属少不了的。

浏览器辅助:
装有主流浏览器都扶助 display 属性。

表明:任何版本的 Internet Explorer (包含IE八)都不扶助"inherit""inline-table""run-in""table""table-caption""table-cell""table-column""table-column-group""table-row"、以及
"table-row-group"属性值。

亚洲必赢官网 1

因为对块级成分设置display:inline-block的时候能够高达与float一律的功效。正是使块级成分末尾未有换行符。那么毕竟如哪天候利用float和如何时候利用display:inline-block呢?

多数时候float的现身是为着处理文字环绕。所以当大家为了促成文字环绕的时候使用float而拍卖非文字环绕的情状下,则以使用display:inline-block为主。

方式一:直接编写代码完成
效果如下:
亚洲必赢官网 2
代码如下:

方式1:直接编写代码完毕
职能如下:
亚洲必赢官网 3
代码如下:

<!Doctype html>

1.1float福寿绵绵的导航条

XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>floatNav</title> <style
type=”text/css”> body, ul{margin:0;padding:0;} #body-div{
background-color:#eaebea; height:40px;
/*设置当浏览器窗口变短时li换行展现*/ overflow:hidden;
/*此间关键是让父级div跟据内容自动伸长*/ float:left; } ul li {
list-style:none; float:left; border-right:1px solid #d2d5d2;
line-height:40px; padding: 0 10px; } ul li a{ text-decoration:none; }
a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;}
</style> </head> <body> <div id=”body-div”>
<ul> <li><a href=””>首页</a></li>
<li><a href=””>内容1</a></li> <li><a
href=””>内容2</a></li> <li><a
href=””>内容3</a></li> <li><a
href=””>内容4</a></li> <li><a
href=””>内容5</a></li> <li><a
href=””>内容6</a></li> <li><a
href=””>内容6</a></li> </ul> </div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floatNav</title>
    <style type="text/css">
    body, ul{margin:0;padding:0;}
        #body-div{
            background-color:#eaebea;
            height:40px;
            /*设置当浏览器窗口变短时li换行显示*/
            overflow:hidden;
            /*这里主要是让父级div跟据内容自动伸长*/
            float:left;
        }
        ul li {
            list-style:none;
            float:left;
            border-right:1px solid #d2d5d2;
            line-height:40px;
            padding: 0 10px;
        }
        ul li a{
            text-decoration:none;
        }
        a:link, a:visited{color:#3f3b3c;}
        a:hover{color:#fd687f;}
    </style>
</head>
<body>
    <div id="body-div">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
            <li><a href="">内容6</a></li>
            <li><a href="">内容6</a></li>
        </ul>
    </div>
</body>
</html>

在chrome和firefox还有IE中,展现效果如下:
亚洲必赢官网 4

复制代码 代码如下:

复制代码 代码如下:

<html>

1.2display:inline-block落到实处的导航条

XHTML

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>inlineNav</title> <style
type=”text/css”> body, ul{margin:0;padding:0;} #body-div{
background-color:#eaebea; height:40px;
/*那里根本是让父级div跟据内容自动伸长*/ display:inline-block;
/*安装当浏览器窗口变短时li换行呈现*/ overflow:hidden; margin:0 auto; }
ul li { list-style:none; display:inline-block; border-right:1px solid
#d2d5d2; line-height:40px; padding:0 10px; } ul li a{
text-decoration:none; } a:link, a:visited{color:#3f3b3c;}
a:hover{color:#fd687f;} </style> </head> <body>
<div id=”body-div”> <ul> <li><a
href=””
target=”_blank”>首页</a></li> <li><a
href=””>内容1</a></li> <li><a
href=””>内容2</a></li> <li><a
href=””>内容3</a></li> <li><a
href=””>内容4</a></li> <li><a
href=””>内容5</a></li> <li><a
href=””>内容6</a></li> <li><a
href=””>内容7</a></li> </ul> </div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inlineNav</title>
    <style type="text/css">
    body, ul{margin:0;padding:0;}
        #body-div{
            background-color:#eaebea;
            height:40px;
            /*这里主要是让父级div跟据内容自动伸长*/
            display:inline-block;
            /*设置当浏览器窗口变短时li换行显示*/
            overflow:hidden;
            margin:0 auto;
        }
        ul li {
            list-style:none;
            display:inline-block;
            border-right:1px solid #d2d5d2;
            line-height:40px;
            padding:0 10px;
        }
        ul li a{
            text-decoration:none;
        }
        a:link, a:visited{color:#3f3b3c;}
        a:hover{color:#fd687f;}
    </style>
</head>
<body>
    <div id="body-div">
        <ul>
            <li><a href="http://www.baidu.com" target="_blank">首页</a></li>
            <li><a href="">内容1</a></li>
            <li><a href="">内容2</a></li>
            <li><a href="">内容3</a></li>
            <li><a href="">内容4</a></li>
            <li><a href="">内容5</a></li>
            <li><a href="">内容6</a></li>
            <li><a href="">内容7</a></li>
        </ul>
    </div>
</body>
</html>

那段代码在chrome和firefox,IE(>=8)中的效果如下:

亚洲必赢官网 5

在IE(<=⑦)的功效如下:

亚洲必赢官网 6

因为IE(<=7)不支持display特性(初阶关于display的表达)。

打赏协助自个儿写出越来越多好小说,多谢!

打赏笔者

<html>
<head>
<title>无需表格的美食做法</title>
<style>
<!–
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不突显档次标识 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 增多下划线 */
}
#navigation li a{
display:block; /* 区块呈现 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左侧的粗红边 */
border-right:1px solid #711515; /* 左边阴影 */
width:175px; /* xg_超连接以外的一些也触发CSS样式效果 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改换背景观 */
color:#ffff00; /* 改造文字颜色 */
}
–>
</style>
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Sports</a></li>
<li><a href=”#”>Weather</a></li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div>
</body>
</html>

<html>
<head>
<title>无需表格的菜系</title>
<style>
<!–
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不出示档次标记 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 加多下划线 */
}
#navigation li a{
display:block; /* 区块展现 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右边阴影 */
width:175px; /* xg_超连接以外的①对也触发CSS样式效果 */
下拉菜单,纯CSS塑造的导航菜单。}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 退换背景观 */
color:#ffff00; /* 退换文字颜色 */
}
–>
</style>
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Sports</a></li>
<li><a href=”#”>Weather</a></li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div>
</body>
</html>

  <head>

打赏支持本身写出越多好小说,多谢!

任选一种支付格局

亚洲必赢官网 7
亚洲必赢官网 8

1 赞 5 收藏
评论

措施二:使用jQuery 代码完成
代码如下:

办法2:使用jQuery 代码完毕
代码如下:

    <meta charset=”utf-8″>

有关作者:zhiqiang21

亚洲必赢官网 9

做以为对的事情,若是可能是错的,那就做认为本身承受得起的政工!

个人主页 ·
笔者的篇章 ·
11 ·
     

亚洲必赢官网 10

复制代码 代码如下:

复制代码 代码如下:

    <title>下拉菜单</title>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html>
<head>
<title>伸缩的菜系,用toggle()重写</title>
<style>
<!–
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不展现档次标记 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 加多下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块展现 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左侧的粗红边 */
border-right:1px solid #711515; /* 右边阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li
> a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改动背景象 */
color:#ffff00; /* 改动文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
–>
</style>
<script language=”javascript”
src=”jquery.min.js”></script>
<script language=”javascript”>
$(function(){
$(“li”).find(“ul”).prev().click(function(){
$(this).next().toggle();
});
$(“li:has(ul)”).find(“ul”).hide();
});
</script>
</head>
<body>
<div id=”navigation”>
<ul id=”listUL”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a>
亚洲必赢官网 ,<ul>
<li><a href=”#”>Lastest News</a></li>
<li><a href=”#”>All News</a></li>
</ul>
</li>
<li><a href=”#”>Sports</a>
<ul>
<li><a href=”#”>Basketball</a></li>
<li><a href=”#”>Football</a></li>
<li><a href=”#”>Volleyball</a></li>
</ul>
</li>
<li><a href=”#”>Weather</a>
<ul>
<li><a href=”#”>Today’s Weather</a></li>
<li><a href=”#”>Forecast</a></li>
</ul>
</li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html>
<head>
<title>伸缩的菜系,用toggle()重写</title>
<style>
<!–
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不出示档次标记 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 加多下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块突显 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 右侧的粗红边 */
border-right:1px solid #711515; /* 左侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li
> a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改动背景象 */
color:#ffff00; /* 退换文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
–>
</style>
<script language=”javascript”
src=”jquery.min.js”></script>
<script language=”javascript”>
$(function(){
$(“li”).find(“ul”).prev().click(function(){
$(this).next().toggle();
});
$(“li:has(ul)”).find(“ul”).hide();
});
</script>
</head>
<body>
<div id=”navigation”>
<ul id=”listUL”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a>
<ul>
<li><a href=”#”>Lastest News</a></li>
<li><a href=”#”>All News</a></li>
</ul>
</li>
<li><a href=”#”>Sports</a>
<ul>
<li><a href=”#”>Basketball</a></li>
<li><a href=”#”>Football</a></li>
<li><a href=”#”>Volleyball</a></li>
</ul>
</li>
<li><a href=”#”>Weather</a>
<ul>
<li><a href=”#”>Today’s Weather</a></li>
<li><a href=”#”>Forecast</a></li>
</ul>
</li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</div>
</body>
</html>

    <style>

在意:该代码必须加载了jquery.min.js 文件,并且所写的CSS 只幸而Firefox
浏览器中正常展现。

只顾:该代码必须加载了jquery.min.js 文件,并且所写的CSS 只可以在Firefox
浏览器中健康显示。

      *{

效果如下: 代码如下:
复制代码 代码如下: html head title无需表格的美食做法/title style !– body{
background-color:#ffdee0;…

您或许感兴趣的稿子:

  • JQuery 写的秉性导航菜单
  • 遵照jquery完成导航菜单高亮突显(二种办法)
  • jQuery弹性滑动导航菜单完结思路及代码
  • Jquery完毕拉动画功用的特出二级导航菜单
  • 依照jQuery的轻易的列表导航菜单
  • jQuery完结的动态伸缩导航菜单实例
  • jQuery三级下拉列表导航菜单代码分享
  • Jquery+CSS 创立流动导航菜单 Fluid
    Navigation
  • jQuery完毕简洁的导航菜单功效
  • jQuery渐变发光导航菜单的实例代码
  • 享受14个很酷的jQuery导航菜单插件
  • jQuery实现的背景动态变化导航菜单成效
  • 创设jquery遮罩层效果导航菜单代码分享
  • jQuery达成轻松赏心悦目的Nav导航菜单成效

        margin:0;

        padding:0;

      }

      ul{

        list-style:none;

        overflow:hidden;

        background-color:#333;

}

      li{

        float:left;

}

      li a,.dropbtn{

          text-decoration:none;

          font-size:20px;

          font-weight:bolder;

          padding:14px 16px;

          color:white;

          display:inline-block;  

}

        li a:hover,.dropdown:hover{

          background-color:black;

}

        .dropdown{

          display:inline-block;

}

       .dropdown-menu{

           display:none;

           position:absolute;

           min-width:150px;

           background-color:#b9def0;

}

      .dropdown-menu a{

            padding:12px 14px;

            text-decoration:none;

            display:block;

            color:black;

}

      .dropdown-menu a{

            background-color:gainsboro;

}

      .dropdown:hover
.dropdown-menu{亚洲必赢官网 11

          display:block;

}

    </style>

  </head>

  <body>

    <ul>

      <li>< a href=”#”>主页</a></li>

      <li>

        <div class=dropdown>

            <a href=”#”
class=”dropbtn”>手艺分享</a>

        <div class=”dropdown-menu”>

            <a href=”#”>HTML</a>

            <a href=”#”>CSS</a>

            <a href=”#”>Javascript</a>

        </div>

    </ul>

  </body>

</html>

网站地图xml地图