CSS浮動佈局與菜單欄設計

時間 2019-11-18

標籤 css 浮動佈局菜單設計欄目 CSS 简体版

原文原文鏈接

　　公司週六停電，終於能夠雙休了。用週五空餘時間再夯實一下css基礎，《CSS權威指南》概念性的內容看起來容易犯困，不如實踐來得快，動手操做吧。css

1、浮動佈局html

　浮動存在問題：浮動使元素脫離文檔流，致使下面的元素向上提。app

　佈局存在問題：因爲浮動元素寬度已設定，根據盒模型，對於有寬度的盒子添加padding border和magin致使盒子變大，從而擠出後面浮動元素，致使下移，稱做「浮動移滑」。ide

圍住浮動元素的三種方法：佈局

　　　　1爲父元素添加 overflow:hidden 強制包圍浮動元素spa

　　　　2同時浮動父元素後面的元素清除 clear:both設計

　　　　3 一、添加非浮動的清除元素 div 二、添加僞類： .class:after{conten:'.';display:'block';height:0;visibility:hidden;clear:both;}3d

　 解決「浮動移滑」方案：code

　　　　1.從設定的元素寬度中減去添加的外邊距，內邊距和邊框寬度和（一變化就容易出錯）；htm

　　　　2.給元素添加一個div，把內容放到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="../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="../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

2、菜單欄

　　1縱向列表：ul li a 將連接<a>嵌入在li內部並設置display：block ，從第二個開始爲<a>添加上邊框

　　html代碼

    <nav class="first_nav">
        <ul>
            <li><a href="#">first Nav</a></li>
            <li><a href="#">second Nav</a></li>
            <li><a href="#">third Nav</a></li>
            <li><a href="#">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="CSS/menu.css"/>
</head>
<body>
    <nav id="jd_nav">
        <li><a href="#">手機/運營商/數目</a></li>
        <li><a href="#">家居/傢俱/廚具</a></li>
        <li><a href="#">鞋靴/箱包/奢飾品</a></li>
        <li><a href="#">圖書、音像/電子商</a>
            <ul>
                <li><a href="#">少兒</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">科技</a>
                    <ul>
                        <li><a href="#">計算機與互聯網</a></li>
                        <li><a href="#">科普</a></li>
                        <li><a href="#">工業技術</a></li>
                        <li><a href="#">電子通訊</a></li>
                    </ul>
                </li>
                <li><a href="#">電子書</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';}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。