2019獨角獸企業重金招聘Python工程師標準>>>

本篇是從實戰中學前端的第一篇，先來用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>

效果見本篇開始的圖片。

轉載于:https://my.oschina.net/yunduansing/blog/787756

總結

以上是生活随笔為你收集整理的从实战中学前端：html+css实现漂亮的按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。