www.bifa88.com 8

CSS定位难题www.bifa88.com,纯CSS创设的导航菜单

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中,彰显效果如下:
www.bifa88.com 1

复制代码 代码如下:

格局2:使用jQuery 代码完成
代码如下:

打赏协理自个儿写出更加多好作品,多谢!

任选1种支付办法

www.bifa88.com 2
www.bifa88.com 3

1 赞 5 收藏
评论

<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>

你大概感兴趣的文章:

  • JQuery 写的特性导航菜单
  • 依附jquery落成导航菜单高亮显示(三种艺术)
  • jQuery弹性滑动导航菜单实现思路及代码
  • Jquery落成推动画作用的精粹二级导航菜单
  • 依靠jQuery的简约的列表导航菜单
  • jQuery落成的动态伸缩导航菜单实例
  • jQuery三级下拉列表导航菜单代码分享
  • Jquery+CSS 创制流动导航菜单 Fluid
    Navigation
  • jQuery完毕简洁的领航菜单成效
  • jQuery渐变发光导航菜单的实例代码
  • 享用十六个很酷的jQuery导航菜单插件
  • jQuery完成的背景动态变化导航菜单功用
  • 塑造jquery遮罩层效果导航菜单代码分享
  • jQuery落成简单美貌的Nav导航菜单作用

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(>=八)中的效果如下:

www.bifa88.com 4

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

www.bifa88.com 5

因为IE(<=7)不支持display品质(初叶关于display的解说)。

打赏帮忙小编写出越来越多好小说,多谢!

打赏小编

复制代码 代码如下:

复制代码 代码如下:

CSS定位难题(二):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"属性值。

www.bifa88.com 6

因为对块级成分设置display:inline-block的时候可以直达与float同等的意义。正是使块级成分末尾未有换行符。那么毕竟如哪天候利用float和如何时候利用display:inline-block呢?

许多时候float的面世是为着管理文字环绕。所以当大家为了促成文字环绕的时候利用float而管理非文字环绕的景象下,则以利用display:inline-block为主。

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

<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>

有关笔者:zhiqiang21

www.bifa88.com 7

做认为对的政工,假若大概是错的,那就做认为本人接受得起的工作!

个人主页 ·
小编的作品 ·
11 ·
     

www.bifa88.com 8

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

复制代码 代码如下:

办法一:直接编写代码落成
职能如下:
www.bifa88.com 9
代码如下:

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

<!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>

格局一:直接编写代码落成
效能如下:
www.bifa88.com 10
代码如下:

艺术二:使用jQuery 代码落成
代码如下:

<!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>