-
HTML中三大布局方式
標準流（文檔流）
浮動
定位
其中標準流存兩種元素：
塊級元素（div、table、H1~H6、有序無序列表（ol、ul、li）、p）
內聯元素（a、span、image、input）
查看全部 -
側邊導航欄筆記，并且有居中left和top為50%時margin-top：-的一半處理居中的問題
查看全部 -
position定位屬性，相對定位，絕對定位，固定定位，及z-index查看全部
-
<!DOCTYPE?html><html><head><meta?charset="UTF-8"><title>側邊欄導航跟隨案例</title><style>*{padding:?0;margin:0;}body{height:?3000px;background:?pink}.nav?li{list-style:?none;cursor:pointer;}.nav{position:fixed;left:?0;top:?50%;transform:translateY(-50%);width:160px;height:auto;text-align:center;}.first{line-height:?40px;background:?#666;}.first>li{position:relative;}.first>li:hover?>.second{display:?block;}.second>li:hover?>.third{display:?block;}.second{display:?none;position:absolute;top:0;left:160px;}.second>li{position:?relative;width:160px;line-height:?40px;background:?#666;}.third{display:?none;position:absolute;top:0;left:160px;}.third>li{width:160px;line-height:?40px;background:?#666;}</style></head><body><div?class="nav"><ul?class="first"><li>菜單一<ul?class="second"><li>二級菜單1<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li><li>二級菜單2<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li><li>二級菜單3<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li></ul></li><li>菜單二<ul?class="second"?><li>二級菜單1<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li><li>二級菜單2<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li><li>二級菜單3<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li></ul></li><li>菜單三<ul?class="second"><li>二級菜單1<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li><li>二級菜單2<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li><li>二級菜單3<ul?class="third"><li>三級菜單1</li><li>三級菜單2</li><li>三級菜單3</li></ul></li></ul></li></ul></div></body></html>查看全部 -
Dffff查看全部
-
position參數設置top left，元素以左上角為原點，向右以及向下移動。 position參數設置right bottom，元素以左上角為原點，向左以及向上移動。查看全部
-
后寫的position層級大于先寫的查看全部
-
標準流:按元素的特性，不做其他修改。查看全部
-
absolute relative查看全部
-
沒高度查看全部
-
固定定位不受制于父級元素查看全部
-
z-index可以設置元素的疊加順序
z-index大的元素覆蓋z-index小的元素
z-index為auto的元素不參與層級比較
z-index為負值，元素被普通流中的元素覆蓋
查看全部 -
position可以設置參數如下：
static：默認值，元素按照標準流排列。
relative：相對定位，元素仍是按照標準流排列，但可以使用left、right、top、bottom來改變位置。
absolute：絕對定位，元素脫離正常的文檔流，可以通過left、right、top、bottom來改變位置，參照物符元素的定位屬性，如果父元素都沒有定位屬性，則參考窗口定位。注意問題：由于脫離文檔流，可能導致容器高度為0；
fixed：固定定位，元素脫離正常的文檔流，可以通過left、right、top、bottom來改變位置，固定定位不少限制與父級元素，無論父級元素是否帶有定位屬性。
inherit：繼承，繼承父類元素的定位屬性。
查看全部 -
css定位與鼠標移動效果查看全部
-
好好好查看全部
舉報
0/150
提交
取消