CSS製作簡單的橫向選單

阿新 • • 發佈：2018-10-31

1.先寫一個列表，建立選單的結構

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><div class="menu">
  <ul>
    <li><a href="#">網站首頁</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
  </ul>
</div></span></span></span>

2.隱藏標籤li的預設樣式

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu ul {list-style-type:none;}
</style></span></span></span>

3.使選單列表橫向，需要加入一個非常重要的屬性“float:left”，這是選單橫向的關鍵所在

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu ul {list-style-type:none;}
.menu ul li {float:left;}
</style></span></span></span>

4.調整外部DIV和選單標籤li的寬度，並且取消連結的下劃線，使選單ul和外部的DIV的邊界屬性值為0

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%;}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px;}
.menu ul li a {text-decoration:none;}
</style></span></span></span>

5.大多數瀏覽器對於連結樣式的字型顏色為藍色，我們可以設定為自己喜歡的顏色。之後我們可以設定選單的整體樣式，將選單背景色設定為紅色，字型顏色設定為白色，字型大小設為14px，字型型別根據自己的喜好

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px; height:35px; line-height:35px;}
.menu ul li a {text-decoration:none; color:#fff;}
</style></span></span></span>

效果圖如下：

可以看出字型沒有居中，加入text-align:center使字型居中

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff;}
</style></span></span></span>

6.最後，我們所要設定的就是滑鼠移入選單（:hover）、滑鼠點選選單（:active）、滑鼠選中選單（:focus）的樣式，這就需要用到CSS的偽類

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style></span></span></span>

效果圖如下：

有木有覺得選單選中的樣式很醜，所以我們需要在標籤a的樣式表中加入一個重要的屬性display:block

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff; display:block;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style></span></span></span>

最終效果如下：

7.最終的程式碼

<span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>橫向選單</title>
<style>
.menu {width:100%; background:#FF0000; height:35px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff; display:block;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="#">網站首頁</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
    <li><a href="#">一級選單</a></li>
  </ul>
</div>
</body>
</html></span></span></span>

CSS製作簡單的橫向選單

1.先寫一個列表，建立選單的結構 <span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><div class="men

CSS製作簡單的縱向選單

1.先寫一個列表，建立選單的結構 <span style="font-size:14px;"><span style="font-size:14px;"><div class="menu"> <ul> <li&g

CSS控制的橫向列表選單

純css製作導航下拉選單

轉載文章，覺得作者思路很好 <nav> <ul>

製作一個簡單的選單動畫效果

CSS3過渡屬性屬性描述 CSS transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 transition-property 規定應用過渡的 CSS 屬性的名稱。 transition-duration 定義過渡效果花費的時間。預設是 0。 trans

如何用一簡單的CSS製作響應式HTML網頁

在這篇文章中，我將教你如何使用CSS網格來建立一個超級酷的影象網格，它隨著螢幕的寬度而改變列的數量。最讚的一點就是：這個響應式效果只需要新增一行CSS。這意味著我們不必給HTML取很亂的類名（即col-sm-4，col-md-8），或者為每一個螢幕大小建立媒體查詢。現在讓我們開始吧！設定對於本文，我們將繼續使

用CSS加HTML製作簡單的百度首頁

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

用html和css製作一個簡單的頁面

原始碼：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>簡單頁面</title> <meta name="v

HTML+CSS實現簡單下拉選單

HTML+CSS實現下拉選單使用Html+css實現簡單的下拉選單程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

css製作抽獎輪盤效果/扇形選單

先上效果圖附上程式碼： <!DOCTYPE html> <html><head><meta charset="utf-8" /><title>輪盤</

css+js製作簡單的輪播圖效果

各大電商網站首頁一般都離不開輪播圖，下面將通過css+javascript完成一個簡單的輪播圖效果。 slide.html程式碼： <!DOCTYPE html> <html> <head> <meta charset="

純css製作三級下拉選單

css本身的功能就挺強大的，尤其是css3出來之後，大部分特效只用css3就能完成了，無需再費心思去想js怎麼怎麼做jQuery怎麼怎麼做，程式碼簡潔質量輕巧。下面是本人用純css製作的三級下拉選單效果：思路很簡單，三級選單直接用三層巢狀的ul佈局：

CSS：簡單的Loader

images ack out bsp lin calc lol child 技術 body { margin: 0; padding: 0; background:#3498db; } .cs-loader { position: absolute

HTML+CSS+JS簡單實現支付寶付款界面效果

6.5 body pre -c css brush ges line col HTML+JS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css一些簡單的例子

加載加載順序 http purple 20px adding expire sheet 傳輸協議 1.http協議 1 一：HTTP協議：hypertext transport protocol(超文本傳輸協議) 2 特點： 3 1.請求

css 最簡單的垂直居中

-c 彈性布局 content gdi 垂直 body play justify gpo 利用彈性布局進行垂直居中,要垂直的元素如果很多,可以用一個大的div包裹,然後 bigDiv { display: flex; justify-content: center; //水

css基礎 font-family 設置字體與CSS Unicode 簡單示例

中間宋體如果 type 學習 oct chrome doc mic 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

[譯] 使用CSS製作球體

原文連結：cssanimation.rocks/spheres/ 使用border-radius屬性，我們可以實現帶圓角的形狀和圓形。可以新增一些漸變效果來使他們變成圓球。讓我們嘗試一下，並且可以新增一些動畫效果來賦予他們活力。平面設計我們可以通過兩種方式用css來製作圓球。第一種方式是通過使用

純CSS程式碼實現翻轉選單的炫酷效果

1、思路分析滑鼠移入選單出現並翻轉滑鼠移出收回選單 2、完整程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta char

CSS的下拉選單被擋住，修改Z-INDEX也不成功

CSS的下拉選單被擋住，修改Z-INDEX也不成功做了一個滑鼠放上去就出現的下拉選單，但是這個下拉的內容被擋住了。 Z-INDEX 是設定不同塊的層次的，我修改了問題還是有。後來發現是必須要把該便籤的父標籤的 position 屬性設定為 absolute 具體原

CSS製作簡單的橫向選單

相關推薦