【筆記】浮動屬性float的應用05——使用列表浮動下一個和後一個按鈕
第1步 - 從一段文字和一個列表開始
在本練習中,我們希望向左浮動一個“後退”按鈕,在右側浮動一個“下一步”按鈕。我們可以使用兩個div,但為了簡單起見,我們將使用兩個列表項。
我們將從一段文字和一個簡單列表開始。UL使用ID選擇器(id =“navigation”)設定樣式,並且兩個LI使用類選擇器(class =“left”和class =“right”)設定樣式。在本教程中,使用了明顯的名稱來幫助說明這一點,但可以使用任何名稱。但是,最好根據它們的含義來命名類和id,而不是它們的外觀。
程式碼如下所示:
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <p> Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 </p> <ul id="navigation"> <li class="left"><a href="#">Back</a></li> <li class="right"><a href="#">Next</a></li> </ul> </body> </html>
效果圖如下:
第2步 - 刪除子彈
要刪除HTML列表專案符號,請將“list-style-type”設定為“none”。
程式碼如下所示:
<!DOCTYPE html> <html> <head> <style type="text/css"> ul { list-style-type:none;/*new codes*/ } </style> </head> <body> <p> Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 </p> <ul id="navigation"> <li class="left"><a href="#">Back</a></li> <li class="right"><a href="#">Next</a></li> </ul> </body> </html>
效果圖如下:
第3步 - 刪除填充和邊距
標準HTML列表具有一定量的左縮排。每個瀏覽器的金額各不相同。有些瀏覽器使用填充(Mozilla,Netscape,Safari),其他瀏覽器使用邊距(Internet Explorer,Opera)來設定縮排量。
要在所有瀏覽器中一致地刪除此左縮排,請將“UL”的填充和邊距都設定為“0”。
程式碼如下所示:
<!DOCTYPE html> <html> <head> <style type="text/css"> ul { list-style-type:none; margin:0;/*new codes*/ padding:0;/*new codes*/ } </style> </head> <body> <p> Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 </p> <ul id="navigation"> <li class="left"><a href="#">Back</a></li> <li class="right"><a href="#">Next</a></li> </ul> </body> </html>
效果圖如下:
第4步 - 浮動列表項
現在添加了兩個規則以使列表項移動到頁面的邊緣。在“後退”按鈕上使用“float:left”,在“下一步”按鈕上使用“float:right”。浮動元素時也需要寬度 - 除非它是影象。
對於此示例,使用寬度為5em。float:right list專案看起來好像沒有浮動到包含框的右邊緣。這是因為它在5em寬的盒子內對齊。我們很快就會解決這個問題。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul .left {/*new codes*/
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第5步 - 在列表上方新增一行
要在浮動列表上方新增一行,請使用簡寫規則“border-top:1px solid#666;”。Netscape 4不喜歡這個規則,所以它應該使用“ @import ” 隱藏在瀏覽器中。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
border-top:1px solid #666;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第6步 - 線上下新增填充
該行非常靠近兩個列表項的頂部。這可以通過調整UL填充來修復。在這種情況下,我們將使用規則“padding:.5em 0;”將.5em新增到UL的頂部和底部,而不是側面。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;/*new codes*/
border-top:1px solid #666;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第7步 - 顯示塊
要為列表項提供翻轉效果,需要使用應用於“a”元素的“display:block”將其轉換為塊。
當超連結轉換為塊級別時,Mac / Opera6會將下劃線放在超連結的單詞上方而不是在它們下面,Win / Opera將根本不顯示下劃線。這些渲染問題將在以下步驟中處理。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {/*new codes*/
display: block;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第8步 - 移動寬度
除非將寬度新增到“a”元素,否則Win / IE5和Win / IE6將不會將整個塊識別為活動連結。因此,我們從兩個浮動規則中刪除寬度並將其應用於“a”元素。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第9步 - 新增背景顏色
要新增背景顏色,請將其設定為“a”狀態。還添加了顏色以使文字可讀。在這個階段沒有翻滾狀態。這將很快新增。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;/*new codes*/
background-color:#036;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第10步 - 新增填充
將填充新增到“a”狀態中的列表項。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第11步 - 文字修飾和對齊
此時,您可能希望刪除文字下劃線。通常的做法是導航不要有下劃線,因為它們的位置和其他反饋機制使它們更明顯地成為連結。但是,您應該知道修改標準超連結行為(例如下劃線)可能會讓某些使用者感到困惑,他們可能沒有意識到該項是連結。
我們還將使用“text-align:center”將文字置於框中。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;
text-align:center;/*new codes*/
text-decoration:none;/*new codes*/
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下:
第12步 - 新增懸停狀態
使用“a:hover”將第二種背景顏色設定為翻轉狀態。如果您現在滾動列表,您將看到翻轉工作。
程式碼如下所示:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:.5em 0;
border-top:1px solid #666;
}
ul li a {
display: block;
width:5em;
color:#fff;
background-color:#036;
padding:.2em 0;
text-align:center;
text-decoration:none;
}
ul li a:hover {/*new codes*/
color:#fff;
background-color:#69c;
}
ul .left {
float:left;
width:5em;
}
ul .right {
float:right;
width:5em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。
</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
效果圖如下: