從實戰中學前端：html+css實現漂亮的按鈕

本篇是從實戰中學前端的第一篇，先來用css實現一些按鈕。大概樣式如圖：

按鈕初體驗

html表示中做爲按鈕的標籤有button和input

<!-- type="button"可省，省略時表示type="submit" -->
<button type="button">按鈕</button>

<!-- 也可爲type="submit" 此時主要用在表單提交中（如登陸時），此時type不能省略 -->
<input type="button" value="按鈕" />

咱們來看看默認的按鈕效果： <button>按鈕</button>或<input type="button" value="按鈕" /><!-- 爲了簡單，本篇就默認前一種 -->

默認的按鈕太醜了有木有？腫麼讓它變得好看點呢？此時就是css展現它的功法了。

css神奇初見

css全稱爲層疊樣式表，簡單說來就是實現網頁的效果，如按鈕美化。

<button style="width: 80px;height: 40px;background: #4CAF50;- border: none;">按鈕</button>

變漂亮點了對不對？讓咱們來解釋一下：

• style="" style翻譯成中文就是樣式，引號裏邊的內容就表示這個按鈕的樣式。 注：給Html元素設置css樣式有三種，此爲第一種，後面再介紹

• width: 80px;style裏邊的樣式格式爲： 屬性:值; 這裏表示寬度爲80個像素點，後邊的height就很容易明白表示高度爲40px了。

• background: #4CAF50;設置按鈕背景顏色爲#4CAF50（16進制），這裏你能夠設置爲任何你喜歡的顏色。

• border: none;取消按鈕的邊框

變化一下按鈕樣式

<button style="width: 80px;height: 40px;background: #4CAF50;border: none;color: white;font-size: 16px;">按鈕</button>
<button style="width: 80px;height: 40px;background: none;border: #4CAF50 solid 1px;">按鈕</button>

咱們發現左邊按鈕的文字顏色變了，大小也變了，怎麼實現的呢？ 很容易發現，我在style中設置了color: white;font-size: 16px;沒錯就是color和font-size，再看右邊一個按鈕，我設置了背景爲none，邊框border爲1像素，solid樣式，顏色值跟左邊背景色同樣。

css使用方式之二

有沒有發現上邊隨着style樣式加多，代碼會變得很長，爲了解決這個問題（固然此種方式目的不僅是這個），咱們使用第二種方式：

<!-- 首先在head中加入一下代碼 -->
<style>
			button{
				width: 80px;
				height: 40px;
				background: #4CAF50;
				border: none;
				color: white;
				font-size: 16px;
			}
		</style>

<!-- 第二步：按鈕代碼 -->
<button>按鈕</button>

最終效果：

腫麼樣，有木有很神奇？這樣子的按鈕代碼看起來就簡潔多了，這就是所謂的css第二種使用方式，即把它放在style標籤中，一般是放在head裏面。

第二種使用方式的：button稱之爲選擇器，任何html標籤均可以用做選擇器，除此以外還有不少其餘的選擇器，經常使用的有id選擇器和class選擇器：

#btnSubmit{…}
.btnCancel{…}

其中id和class都是html標籤的屬性，css的第一種用法的style就是一種屬性。

具體實例：

/*這裏邊是css中的註釋，瀏覽器會將其忽略*/
/*class*/
.btn{
    padding: 10px 20px;
    cursor: pointer;/*使鼠標放上邊顯示手指形狀*/
    font-size: 16px;
    margin: 4px 2px;
    text-align: center;/*文本居中顯示*/
    text-decoration: none;/*取消文本的默認修飾，如取消連接默認的下劃線*/
    display: inline-block;
}
/*id*/
#active_a{
    text-decoration: none;
    color: #4CAF50;
    font-weight: bold;
}

css第三種使用方式

另外創建一個xxx.css文件，將css代碼放在這個文件裏邊，而後在頁面中引入：

<link rel="stylesheet" href="xxx.css" />

注：放在單獨的css文件裏邊的css代碼不須要放入style標籤裏。

<!-- 直接相似於這樣就行 -->
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* 鼠標移上去後修改下拉菜單連接顏色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠標移上去後顯示下拉菜單 */
.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    height: 200px;
    min-width: 160px;
}

附完整的樣式及使用

button.css

.btn{
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin: 4px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.btn-disabled{
	opacity: 0.6;
	cursor: not-allowed;
}
.btn-default{
    border: 1px solid #e7e7e7;
}
.btn-green{
    border: 1px solid #4CAF50;
}
.btn-radius{
    border-radius:5px;
}
.btn-red{
    border: 1px solid #f44336;
}
.btn-default,.btn-green,.btn-red{
	border-radius:5px;
	background: none;
	z-index: 3000;
}
.btn-bg-green{
	background-color: #4CAF50;
}
.btn-bg-blue{
	background-color: #008CBA;
}
.btn-bg-red{
	background-color: #f44336;
}
.btn-bg-gray{
	background-color: #e7e7e7; 
	color: black;
	border: none;
}
.btn-bg-blank{
	background-color: #555555;
}
.btn-bg-pink{
	background-color: #FFC1C1;
}
.btn-bg-blue,.btn-bg-green,.btn-bg-red,.btn-bg-blank,.btn-bg-pink{
	border: none;
	color: white;
}

button.html部分

<h3>按鈕</h3>
		<button class="btn btn-default">默認</button>
		<button class="btn btn-bg-pink">粉色</button>
		<button class="btn btn-green">綠色</button>
		<button class="btn btn-bg-green">綠色</button>
		<button class="btn btn-bg-blue btn-radius">藍色</button>
		<button class="btn btn-bg-red">紅色</button>
		<button class="btn btn-bg-gray">灰色</button>
		<button class="btn btn-bg-blank">黑色</button>

效果見本篇開始的圖片。