HTML5新增標籤H5重視語意化
塊級元素浮動之後就沒有寬度了,還要給它加寬度。
background:none;清除背景圖像;
定位:
position(定位):
static:靜態
fixed:固定定位(相對於瀏覽器進行更改)不保留自己的位置
fixed:固定定位(相對於瀏覽器進行更改)不保留自己的位置
定位(相對於自己改變)保留自己的位置,一般和絕對定位一起使用。
absolute:絕對定位(相對於父元素進行改變)不保留自己的位置,
left:20px/50%
top:20px/50%
bottom:20px/50%right201/50% 50%
一個元素進行絕對定位時,要給它的父元素設定相對定位。
在有定位的關係元素時,存在層疊關係。
z-index:設定層疊關係
z-index:-0 1 2 3 ...99999 (值越大越在上層顯示)
元素的顯示方式
display:block;/inline;/inline- block;/none
display:block 塊級元素的默認顯示方式
display:inline 行內元素的默認顯示方式
display:inline-block 行內塊級元素的默認顯示方式
display:none 隱藏標籤。不佔空間
visibility:hidden 隱藏佔空間
導航的下拉選單製作
下拉選單
<nav class="nav"> <ul> <li><a href="#">主页</a></li> <li><a href="#">新闻</a> <div> <p>本地</p> <p>国内</p> <p>国际</p> <p>政府</p> </div> </li> <li><a href="#">娱乐</a></li> <li><a href="#">军事</a></li> <li><a href="#">头条</a></li> </ul> </nav> li div{ display: none; position: absolute; background:darkgreen; } li:hover div{ display: block; } .nav ul{ position: relative; }