首页 > 代码库 > CSS浮动布局与菜单栏设计

CSS浮动布局与菜单栏设计

2024-08-20 21:13:13   220人阅读

　　公司周六停电，终于可以双休了。用周五空余时间再夯实一下css基础，《CSS权威指南》概念性的内容看起来容易犯困，不如实践来得快，动手操作吧。

一、浮动布局

　 浮动存在问题：浮动使元素脱离文档流，导致下面的元素向上提。

　 布局存在问题：由于浮动元素宽度已设定，根据盒模型，对于有宽度的盒子添加padding border和magin导致盒子变大，从而挤出后面浮动元素，导致下移，称作“浮动移滑”。

  围住浮动元素的三种方法：

　　　　1为父元素添加 overflow:hidden   强制包围浮动元素

　　　　2同时浮动父元素   后面的元素清除 clear:both

　　　　3  /1添加非浮动的清除元素 div     /2添加伪类 ： .class:after{conten:‘.‘;display:‘block‘;height:0;visibility:hidden;clear:both;}

　 解决“浮动移滑”方案：

　　　　1.从设定的元素宽度中减去添加的外边距，内边距和边框宽度和（一变化就容易出错）；

　　　　2.给元素添加一个iv，把内容放到div中。

　　　　3 使用box-sizing:border-box  添加边距使内容收缩，而不是盒子变大。 ie6/ie7不支持。

  三栏固定宽带布局（用到浮动和清除）

　　　　HTML代码

技术分享 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="http://www.mamicode.com/CSS/threeLayout.css" type="text/css"/>
 7 </head>
 8 <body>
 9     <header>浮动与三栏固定宽度布局</header>
10     <div id="wrapper">
11         <nav>这是导航栏</nav>
12         <article>这是中间栏</article>
13         <aside>这是右边栏</aside>
14     </div>
15     <footer>这是角标</footer>
16 </body>
17 </html>
html代码

　　CSS代码：　　

技术分享 
 1 body{
 2     text-align: center;
 3 }
 4 header {
 5     background: #f00;
 6 }
 7 footer{
 8     backgroud:#000;
 9 }
10 nav{
11     width:150px;
12     float: left;
13 }
14 article{
15     width:600px;
16     float: left;
17     background: #ffed53;
18 }
19 aside{
20     width: 210px;
21     float: left;
22     background: #3f7ccf;
23 }
24 footer{
25     clear: left;
26     background: #000;
27 }
css代码

 

　　三栏-中栏流动布局/圣杯布局/双飞翼布局

三栏-中栏流动1负外边距实现

　　1.设计思路：一个div包围左中右三栏，一个div包围左中两栏，利用负边距实现。

“ 三栏中的右栏是 210像素宽。为了给右栏腾出空间，中栏 article 元素有一个 210 像素的右外边距。当然，光有这个外边距只能把右栏再向右推 210 像素。别急，包围左栏和中栏的两栏外包
 装上 210 像素的负右外边距，会把右栏拉回 article 元素右外边距（在两栏外包装内部右侧）创造的空间内。中栏 aticle 元素的宽度是 auto，因此它仍然会力求占据浮动左栏剩余的所有空间。
 可是，一方面它自己的右外边距在两栏外包装内为右栏腾出了空间，另一方面两栏外包装的负右外边距又把右栏拉到了该空间内。”————引自《CSS权威指南》

 html代码：　

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href=http://www.mamicode.com/"../CSS/threeLayout.css" type="text/css"/>
</head>
<body>
<div id="main_wrapper">
    <header>浮动与三栏流动布局</header>
    <div id="three_wrapper">
        <div id="thow_wrapper">
            <nav id="left">这是导航栏</nav>
            <article id="center">这是中间栏</article>
        </div>
        <aside id="right">这是右边栏</aside>
    </div>
    <footer>这是底标</footer>
</div>
</body>
</html>
三栏流动布局

CSS:中间栏：  margin-right: 210px;  包围左栏和中栏的div： margin-right: -210px;　　

技术分享 
body{
    margin: 0;
    text-align: center;
}
header {
    padding: 5px 10px;
    background: #b7c19f;
    height: 50px;
}
#three_wrapper{
    float: left;
    width: 100%;
}
#thow_wrapper{
    float: left;
    width:100%;
    margin-right: -210px;
}
nav{
    width:150px;
    float: left;
    height: 50px;
    background: #60ff1c;
}
article{
    width:auto;
    height:50px;
    background: #ffed53;
    margin-left: 150px;
    margin-right: 210px;;
}
aside{
    width: 210px;
    height:50px;
    float: left;
    background: #3f7ccf;
}
footer{
    clear: left;
    background: #ff2dc9;
}
负边距实现

 

 2利用CSS3单元格 table-cell　

技术分享 
<body>
    <header>浮动与三栏流动布局</header>
    <nav id="left">这是导航栏</nav>
    <article id="center">这是中间栏</article>
    <aside id="right">这是右边栏</aside>
    <footer>这是底标</footer>
</body>
View Code

　　CSS　　

技术分享 
 1 nav{
 2     display: table-cell;
 3     width:150px;
 4     height: 50px;
 5     background: #60ff1c;
 6 }
 7 article{
 8     display: table-cell;
 9     width:74%;
10     height:50px;
11     background: #ffed53;
12 }
13 aside{
14     display: table-cell;
15     width: 210px;
16     height:50px;
17     background: #3f7ccf;
18 }
利用display：table-cell

 

二、菜单栏

　　1纵向列表：ul li a   将链接<a>嵌入在li内部并设置display：block ，从第二个开始为<a>添加上边框

技术分享

 

　　html代码

技术分享 
    <nav class="first_nav">
        <ul>
            <li><a href=http://www.mamicode.com/"#">first Nav</a></li>
            <li><a href=http://www.mamicode.com/"#">second Nav</a></li>
            <li><a href=http://www.mamicode.com/"#">third Nav</a></li>
            <li><a href=http://www.mamicode.com/"#">last Nav</a></li>
        </ul>
    </nav>
View Code

      css代码

技术分享 
*{
    margin:0;
    padding:0;
}
nav{
    margin: 50px;
    width:150px;
}
.first_nav ul{
    border:1px solid #f00;
    border-radius: 3px;
    padding: 5px 10px 3px;
  }

.first_nav li{
    list-style-type: none;
}

.first_nav  li+li a{
    border-top: 1px solid #f00
}

.first_nav a{
    display: block;
    text-decoration: none;
    padding: 3px 10px;
    font:20px Exo,helvetica,arial,sans-serif;
    font-weight:400;
    color:#000;
    background: #ffed53;
}
.first_nav a:hover{
    color:#069;
}
View Code

　　

　　2横向列表：html代码不变，使li浮动，并且强制ul包围浮动元素

　　技术分享

　　CSS代码　　

技术分享 
 1 .first_Nav a{
 2     display: block;
 3     padding:3px 10px;
 4     text-decoration: none;
 5     font: 20px Exo,helvetica,arial,sans-serif;
 6     font-weight: 400;
 7     color: #000;
 8     background-color: #ffed53;
 9 }
10 .first_Nav li+li a{
11     border-left: 1px solid #f00;
12 }
13 .first_Nav a:hover{
14     color: #069;
15 }
16 .first_Nav li{
17     float: left;
18     list-style-type: none;
19 }
20 .first_Nav ul{
21     overflow: hidden;
22 }
View Code

 

　　2下拉菜单

技术分享

 

 html代码：

　　

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>www.jd.com</title>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/CSS/menu.css"/>
</head>
<body>
    <nav id="jd_nav">
        <li><a href="http://www.mamicode.com/#">手机/运营商/数目</a></li>
        <li><a href="http://www.mamicode.com/#">家居/家具/厨具</a></li>
        <li><a href="http://www.mamicode.com/#">鞋靴/箱包/奢饰品</a></li>
        <li><a href="http://www.mamicode.com/#">图书、音像/电子商</a>
            <ul>
                <li><a href="http://www.mamicode.com/#">少儿</a></li>
                <li><a href="http://www.mamicode.com/#">教育</a></li>
                <li><a href="http://www.mamicode.com/#">科技</a>
                    <ul>
                        <li><a href="http://www.mamicode.com/#">计算机与互联网</a></li>
                        <li><a href="http://www.mamicode.com/#">科普</a></li>
                        <li><a href="http://www.mamicode.com/#">工业技术</a></li>
                        <li><a href="http://www.mamicode.com/#">电子通信</a></li>
                    </ul>
                </li>
                <li><a href="http://www.mamicode.com/#">电子书</a></li>
            </ul>
        </li>
    </nav>
</body>
</html>
下拉菜单HTML
 

CSS:

技术分享 
/*添加视觉样式*/
#jd_nav{
    font:1em helvetica,arial,sans-serif;
}
#jd_nav a{
    display: block;
    color:#555;
    background-color: #eee;
    padding:.2em 1em;
    border-width: 3px;
    border-color: transparent;
}
#jd_nav a:hover{
    color: #fff;
    background-color: #aaa;
}
#jd_nav a:active{
    color:#ccc;
    background: #fff;
}
/*添加功能样式*/
#jd_nav *{
    margin:0;
    padding:0;
}
#jd_nav ul{
    float: left;
}
#jd_nav li{
    float: left;
    list-style-type: none;
    /*为子菜单提供上下文*/
    position: relative;
}
#jd_nav li  a{
    border-right-style: solid;
    background-clip: padding-box;
    text-decoration: none;
}
#jd_nav li :last-child a{
    border-right-style: none;
}
#jd_nav li li a{
    border-right-style: none;;
    border-top-style: solid;
}
/*二级菜单功能样式*/
#jd_nav li ul {
    width: 9em;
    display: none;
    position: absolute;
    left:0;
    top:100%;
}
#jd_nav li li {
    clear:left;
}
#jd_nav li li ul{
    display: none;
}
#jd_nav li:hover>ul {
    display: block;
}
/*三级菜单*/
#jd_nav li li ul{
    position:absolute;
    left:100%;
    top:0;
}
下拉菜单CSS

以下是一些CSS选择器操作：
CSS选择器：
上下文选择器：
　　标签1 标签2 {声明} -->标签1后代的标签2元素应用次样式
子选择器
　　标签1>标签2 {}--> 标签1的儿子元素标签2 应用样式。
同胞选择器(兄弟选择器)
　　紧邻同选择：
　　　　　　标签1+标签2 {}-->标签1的紧跟的所有叫标签2的兄弟元素
　　一般同胞选择：
　　　　　　标签1~标签2 {}-->选择标签1的同胞标签2
通用选择符： *          p * {color:red}    把标签p包含的所有元素的文本变成红色。
类选择  .类名{}  id选择 #id{}  属性选择器：标签名[属性名]
链接伪类： a:link ;    a:visited;    a:hover:   a:active
结构化伪类：  ：first-child    :last-child     :nth-child(n)
伪元素 
　　 p::first-letter p段落的第一个字母
    p::first-line   p段落的第一行
 　　::before/::after  在特定元素前面/后面添加特殊内容
　　　　　　　　　　　　 p::before{content:‘age‘;}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>www.jd.com</title>
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"CSS/menu.css"/>
</head>
<body>
    <nav id="jd_nav">
        <li><a href=http://www.mamicode.com/"#">手机/运营商/数目</a></li>
        <li><a href=http://www.mamicode.com/"#">家居/家具/厨具</a></li>
        <li><a href=http://www.mamicode.com/"#">鞋靴/箱包/奢饰品</a></li>
        <li><a href=http://www.mamicode.com/"#">图书、音像/电子商</a>
            <ul>
                <li><a href=http://www.mamicode.com/"#">少儿</a></li>
                <li><a href=http://www.mamicode.com/"#">教育</a></li>
                <li><a href=http://www.mamicode.com/"#">科技</a>
                    <ul>
                        <li><a href=http://www.mamicode.com/"#">计算机与互联网</a></li>
                        <li><a href=http://www.mamicode.com/"#">科普</a></li>
                        <li><a href=http://www.mamicode.com/"#">工业技术</a></li>
                        <li><a href=http://www.mamicode.com/"#">电子通信</a></li>
                    </ul>
                </li>
                <li><a href=http://www.mamicode.com/"#">电子书</a></li>
            </ul>
        </li>
    </nav>
</body>
</html>

CSS浮动布局与菜单栏设计


联系
我们