威尼斯人线上娱乐

CSS定位难点,下拉菜单

21 4月 , 2019  

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

2016/04/27 · CSS ·
display,
float威尼斯人线上娱乐,,
定位

正文小编: 伯乐在线 –
zhiqiang21
。未经小编许可,禁止转载!
招待加入伯乐在线 专辑笔者。

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

这几个脾气用于定义建立布局时成分生成的显得框类型。对于 HTML
等文书档案类型,假如使用 display 不谨慎会很凶险,因为大概违反 HTML
中曾经定义的展现档次结构。对于 XML,由于 XML
未有放置的那种等级次序结构,全数 display 是纯属少不了的。

浏览器扶助:
全体主流浏览器都接济 display 属性。

讲授:任何版本的 Internet Explorer (包括IE8)都不扶助"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; /*CSS定位难点,下拉菜单。 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>

打赏帮助自个儿写出越多好文章,感谢!

任选1种支付办法

威尼斯人线上娱乐 7
威尼斯人线上娱乐 8

1 赞 5 收藏
评论

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