好久沒寫博客了，主要是懶得呼氣都不想呼，上周分給我一個新的任務，就是自己新建一個系統，快速極限開發，雖然之前自己也做過小的系統，但畢竟是自己做，隨着自己的心意做，沒有做其他的限制等，現在呢是給公司做，所以在質量上是絕對要比自己一個人做着玩要高。上周算是把框架搭起來來，今天上午熟悉下需求，下午的時候把數據庫中關鍵的幾個表設計了一下，明天就要往框架里面搬磚了，華為那邊還說要兩周搞定，word 哥啊，壓力山大，不過這幾天學的東西也挺多的，之前做的項目是用webform做的，框架也是傳統的三層，現在的這個是采用MVC+EasyUI+Mysql,數據庫MySql、EasyUI之前也只算是了解，並沒真正意思的用到真實的項目中，用過類似的ligerui。所以還是有好多新的知識要學的，比如C#操作MySql、NPOI操作Excel、框架搭建等，不過還好同事們小伙伴們也都很熱情，也樂於分享知識，有好多問題都是小伙伴幫忙解決的。
------------------------------------------華麗分割線-----------------------------------------------------
一、為什么要寫這篇博客?
上面也說了，自己一個人搞一個網站，從前端到數據庫設計再到代碼實現，壓力不小，這幾天在家里也是在想項目的事情。明天有一個頁面就是要用到按鈕導航，之前也看了些視頻了解過ul、li的使用，沒想到明天還真用到了，所以今天記錄下來，明天也好快速實現。最主要的是華為黃區不能訪外網，頂多能使用博客園，正好記錄在博客園，一舉兩得吧。
二、具體實現
CSS
/* ul li以橫排顯示 */ /* 所有class為menu的div中的ul樣式 */ div.menu ul { list-style:none; /* 去掉ul前面的符號 */ margin: 0px; /* 與外界元素的距離為0 */ padding: 0px; /* 與內部元素的距離為0 */ width:auto; /*寬度根據元素內容調整*/ } /* 所有class為menu的div中的ul中的li樣式 */ div.menu ul li { float:left; /* 向左漂移，將豎排變為橫排 */ width:200px; } /* 所有class為menu的div中的ul中的a樣式(包括尚未點擊的和點擊過的樣式) */ div.menu ul li a, div.menu ul li a:visited { background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 邊框 */ color: #dde4ec; /* 文字顏色 */ display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 內部填充的距離 */ text-decoration: none; /* 不顯示超鏈接下划線 */ white-space: nowrap; /* 對於文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */ margin-left:10px; text-align: center; } /* 所有class為menu的div中的ul中的a樣式(鼠標移動到元素中的樣式) */ div.menu ul li a:hover { background-color: #bfcbd6; /* 背景色 */ color: #465c71; /* 文字顏色 */ text-decoration: none; /* 不顯示超鏈接下划線 */ } /* 所有class為menu的div中的ul中的a樣式(鼠標點擊元素時的樣式) */ div.menu ul li a:active { background-color: #465c71; /* 背景色 */ color: #cfdbe6; /* 文字顏色 */ text-decoration: none; /* 不顯示超鏈接下划線 */ }
Html
<!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> <title>橫向有立體感的CSS按鈕式菜單</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <style> </style> <body > <div class="menu"> <ul> <li><a href="javascript:void(0);">項目</a></li> <li><a href="javascript:void(0);">假設</a></li> <li><a href="javascript:void(0);">構建</a></li> <li><a href="javascript:void(0);">實驗</a></li> </ul> </div> </body> </html>
三、效果
四、問題
上面基本能實現導航按鈕，想着在導航按鈕下面添加一個div來放表單數據，但是問題出現了。
<body >
<div class="menu">
<ul>
<li><a href="javascript:void(0);">項目</a></li>
<li><a href="javascript:void(0);">假設</a></li>
<li><a href="javascript:void(0);">構建</a></li>
<li><a href="javascript:void(0);">實驗</a></li>
</ul>
</div>
<div style="background-color:red;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
從上面的圖可以看到，紅色的在導航按鈕的底部而不是下部。此時就需要用到另外的一個屬性.clear
<div style="background-color:red;clear:both;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
