-
display:none;元素不顯示
.nav-li hover:ul{
display:block鼠標移動到某元素時，取代之前的display:none
查看全部 -
所有具有定位屬性的元素有層級，先寫的元素會被后寫的覆蓋
z-index（層級）只作用于帶有定位屬性的元素
z-index受制于父元素
查看全部 -
脫離文檔流
對聯(lián)廣告
登陸彈窗
不受制于父元素，即使父元素帶有定位屬性
查看全部 -
絕對定位：脫離文檔流
查看全部 -
<!DOCTYPE?html><html><head>??<meta?charset="UTF-8">??<title>Document</title>??<style>????*{margin:?0px;padding:?0px;}????.container{??????width:?100%;??????height:?6731px;??????background:?url(img/1.png)?no-repeat?center?top;????}????.nav{??????width:?160px;??????height:?205;??????position:?fixed;??????left:?0;??????top:?50%;??????margin-top:?-103px;??????font-family:?"微軟雅黑";????}????.nav-li{??????width:?160px;??????height:?auto;??????border-bottom:?1px?solid?#FFF;??????background:?#333;??????text-align:?center;??????color:?#FFF;??????font-size:?16px;??????line-height:?40px;??????cursor:?pointer;????}??.nav-li?ul{????width:?160px;????height:?auto;????background:?#fff;????display:?none;??}??.nav-li?ul?li{????width:?160px;????height:?40px;????border-bottom:?1px?dashed?#666;????color:#333;text-align:?center;line-height:?40px;?position:?relative;?}.nav-li?ul?li:hover?.list-3{??display:?block;}.tit{??width:?160px;??height:?40px;}.nav-li:hover?ul{??display:?block;}.list-3{??width:?160px;??height:?auto;??position:?absolute;??left:?160px;??top:?0px;??display:?none;}.list-3Dom{??width:?160px;??height:?40px;??background:?#444;??border-bottom:?1px?solid?#FFF;??text-align:?center;??line-height:?40px;??color:?#FFF}??</style></head><body>??<div?class="container">????<div?class="nav">??????<div?class="nav-li">????????<div?class="tit">慕課網(wǎng)的標題</div>????????<ul>??????????<li>二級欄目????????????<div?class="list-3">?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>????????????</div></li>???????????<li>二級欄目</li>????????????<li>二級欄目</li>????????</ul>??????</div>?????????<div?class="nav-li">????????<div?class="tit">慕課網(wǎng)的標題</div>????????<ul>??????????<li>二級欄目????????????<div?class="list-3">?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>????????????</div></li>???????????<li>二級欄目</li>????????????<li>二級欄目</li>????????</ul>??????</div>???<div?class="nav-li">????????<div?class="tit">慕課網(wǎng)的標題</div>????????<ul>??????????<li>二級欄目????????????<div?class="list-3">?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>????????????</div></li>???????????<li>二級欄目</li>????????????<li>二級欄目</li>????????</ul>??????</div>???<div?class="nav-li">????????<div?class="tit">慕課網(wǎng)的標題</div>????????<ul>??????????<li>二級欄目????????????<div?class="list-3">?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>?????????????<div?class="list-3Dom">???????????????三級欄目?????????????</div>????????????</div></li>???????????<li>二級欄目</li>????????????<li>二級欄目</li>????????</ul>??????</div>????</div>??</div></body></html>查看全部 -
Repeat 平鋪查看全部
-
position:inherit;繼承父元素的定位類型
查看全部 -
position:fixed;固定定位? 原來的位置會被后面的元素占用
不管它有沒有父元素，父元素是否定位，它都只會以瀏覽器窗口的四個角為原點定位，x、y軸的正方向和相對定位、絕對定位一樣
查看全部 -
1、position:relative; 相對定位 原先的位置不會被后面的元素占用
（1）若設置了top和left的值，則它以它的父元素的（若沒有父元素就以它自己的）左上角為原點，向右向下為x軸、y軸的正方向，移動相應的距離
（2）若設置了top和right的值，則它以它的父元素的（若沒有父元素就以它自己的）右上角為原點，向左向下為x軸、y軸的正方向，移動相應的距離
（3）若設置成負值，則原點不變，正方向變?yōu)橄喾吹姆较?/p>
以此類推……
2、position:absolute; 絕對定位 原先的位置會被釋放，然后被后面的元素占用
（1）若設置了top和left的值，則它以它的最近的定位了的父元素的（否則以當前可視瀏覽器窗口的）左上角為原點，向右向下為x軸、y軸的正方向，移動相應的距離
（2）若設置了top和right的值，則它以它的最近的定位了的父元素的（否則以當前可視瀏覽器窗口的）右上角為原點，向左向下為x軸、y軸的正方向，移動相應的距離
（3）若設置成負值，則原點不變，正方向變?yōu)橄喾吹姆较?/p>
以此類推……
（4）若以瀏覽器窗口的右下角為原點，且bottom設置為負值時，則它會向瀏覽器下方移動，這時可能會移動到瀏覽器的下一屏
查看全部 -
量大元素:塊級元素，內聯(lián)元素
查看全部 -
css中position
查看全部 -
html中的三種布局方式
1、標準流
2、浮動
3、定位
position（解釋：定位、位置）定位屬性的意義，通過改變正常的標準流，以非正常的方式迫使元素脫離標準流。
position（解釋：定位、位置）屬性決定了元素將如何定位
通過top（解釋：頂部）、right（解釋：右邊）、bottom（解釋：底部）、left（左邊）實現(xiàn)位置
position（解釋：定位、位置）中有五個可選的參數(shù)
static是position（解釋：定位、位置）中的默認值，元素按照標準流的方式進行正常的排列。
relative是指相對定位，使用了relative元素讓處于正常的文檔流中。但是我們可以通過left（左邊）、top（解釋：頂部）、right（解釋：右邊）、bottom（解釋：底部）來改變元素的位置。
查看全部 -
html可以分為兩大元素
1、塊級元素（div、h1-h6標題、有序無序列表「ol、ul、li」、table表格、p段落、···）
區(qū)別：獨占一行。
2、內聯(lián)元素（a超鏈接、span文字、img圖片、input控件、）
區(qū)別：內聯(lián)元素和相鄰內聯(lián)元素在同一行，如果一行內寬度不夠時才會被擠到另一行去。
這兩種元素的排列方式呢，是在沒有特殊屬性的干擾下，在正常的標準流中所表現(xiàn)出來的正常特性。
查看全部 -
position:inherit 可以繼承他父元素中的定位屬性 前提是他父元素中有定位屬性
查看全部 -
hover .list{ display:block }鼠標到達才顯示查看全部
舉報