纯CSS创设的领航菜单,CSS定位难点

CSS定位难题(2):float 和 display 的使用

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

本文我: 伯乐在线 –
zhiqiang21
。未经小编许可,禁止转载!
接待出席伯乐在线 专辑小编。

display 属性规定成分应该转换的框的品类。

那个天性用于定义建立布局时成分生成的显得框类型。对于 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为主。

主意1:直接编写代码完成
意义如下:
美高梅开户网址 2
代码如下:

主意一:直接编写代码达成
功能如下:
美高梅开户网址 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(>=八)中的效果如下:

美高梅开户网址 5

在IE(<=柒)的法力如下:

美高梅开户网址 6

因为IE(<=7)不支持display脾性(早先关于display的分解)。

打赏协理小编写出更加多好文章,多谢!

打赏小编

<html>
纯CSS创设的领航菜单,CSS定位难点。<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样式效果 */
}
#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 收藏
评论

方式2:使用jQuery 代码达成
代码如下:

主意二:使用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渐变发光导航菜单的实例代码
  • 享用十多少个很酷的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地图