Dreamweaver怎么用CSS制作圓角按鈕?
我要評論Dreamweaver想要制作一個網(wǎng)頁中的圓角按鈕，并添加鼠標經(jīng)過時變色的效果，該怎么制作呢？下面我們就來看看詳細的教程。
1、新建一個html文件，在body中先輸入一個a標簽，并插入一個空鏈接?！?lt;a class="btn-style" href="#">開始游戲</a>】，然后在title中插入引入內嵌樣式的代碼【<style type="text/css"></style>】。
2、然后我們給a標簽添加一個css樣式，命名為【btn-style】，并定義按鈕的寬、高、字體顏色、背景色、去掉下劃線。注意要加上disply:block，否則定義按鈕的寬高都不會生效。【width: 150px;height: 50px;color:#F8FF00;background: #FF0000;text-decoration:none;display: block;】然后在a標簽中引入btn-style樣式【class="btn-style"】。保存網(wǎng)頁后按F12在瀏覽器中查看，這時我們發(fā)現(xiàn)字體小，而且沒有在按鈕的中間位置。
3、我們繼續(xù)添加樣式，給按鈕定義字體水平居中、垂直居中、字體、字體大小。
line-height: 50px;text-align: center;font-size: 20px;font-family: "微軟雅黑";
保存網(wǎng)頁查看效果，按鈕的基本樣子就有了。
4、然后我們把按鈕的四個角設置成圓角，看起來就更像按鈕了?！綽order-radius: 100px;】。保存后查看效果，還可以把？
5、我們還可以把鼠標經(jīng)過按鈕時變換下顏色，這樣按鈕就比較明顯了，我們可以單獨給a標簽定義一個鼠標經(jīng)過后的顏色，把鼠標經(jīng)過后字體顏色由之前的黃色變?yōu)榘咨?strong>a:hover{color:#fff;}】
6、除了定義鼠標經(jīng)過時字體顏色，按鈕背景色也可以更改一下?！?strong>background: #B00000;】。
7、為了方便經(jīng)驗的朋友們觀察效果，我特意復制了一個一模一樣的按鈕，并把兩個按鈕之間加了外間距，并保存網(wǎng)頁，在網(wǎng)頁中可看到鼠標經(jīng)過下面按鈕時鼠標變色了，是不是很好呢？
8、我們也可以在DW中直接點擊頂部中間的【拆分】查看實時效果哦。是不是很簡單呢？
以上就是Dreamweaver制作鼠標經(jīng)過變色的圓角按鈕的教程，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
dreamweaver cs5怎么給網(wǎng)頁添加設置為主頁的按鈕?
相關文章
Dreamweaver cs6怎么設計一款簡單的網(wǎng)頁?
Dreamweaver cs6怎么設計一款簡單的網(wǎng)頁？Dreamweaver中想要設計一款簡單的網(wǎng)頁，該怎么設計呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-02-27
Dreamweaver怎么輸入文本并設置文本樣式？Dreamweaver設計網(wǎng)頁的時候，想要輸入文本并設置文本樣式，該怎么設置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-02-10
DreamWeaver中css代碼不換行顯示怎么實現(xiàn)?
DreamWeaver中css代碼不換行顯示怎么實現(xiàn)？DreamWeaver中css代碼是自動換行的，想要讓代碼一行顯示，不換行，該怎么實現(xiàn)呢？下面我們就來看看詳細的教程，需要的朋友可以參2018-02-10
Dreamweaver網(wǎng)頁怎么輸入文本內容？Dreamweaver設計網(wǎng)頁的時候需要輸入文本，該怎么輸入文本呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-02-10
Dreamweaver怎么制作動態(tài)導航? dw網(wǎng)頁添加動態(tài)導航的教程
Dreamweaver怎么制作動態(tài)導航？Dreamweaver設計網(wǎng)頁的時候，想要制作動態(tài)導航，該怎么制作呢？下面我們就來看看dw網(wǎng)頁添加動態(tài)導航的教程，需要的朋友可以參考下2018-02-10
Dreamweaver插入面板怎么顯示為水平插入欄？Dreamweaver中想要將面板中的插入面變其默認?？课恢米兂纱翱陧敳康乃轿恢茫撛趺丛O置呢？下面我們就來看看詳細的教程，需要2018-01-26
Dreamweaver網(wǎng)頁怎么添加文本字段？Dreamweaver設計帶有用戶名密碼的登陸頁面的時候，需要添加文本字段，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-26
Dreamweaver怎么實現(xiàn)一個網(wǎng)頁內包含多個頁面的效果?
Dreamweaver怎么實現(xiàn)一個網(wǎng)頁內包含多個頁面的效果？Dreamweaver設計網(wǎng)頁頁面的時候，想要一個網(wǎng)頁包含多個頁面，該怎么實現(xiàn)呢？我們可以使用框架實現(xiàn)，下面我們就來看看詳2018-01-26
Dreamweaver表單怎么設置6位數(shù)的密碼？Dreamweaver中出入的表單想要設置6位數(shù)的密碼，該怎么設置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-26
Dreamweaver網(wǎng)頁中怎么插入命名錨記鏈接?
Dreamweaver網(wǎng)頁中怎么插入命名錨記鏈接？Dreamweaver設計網(wǎng)頁的時候，想要插入命名錨記鏈接，該怎么使用命名錨記呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-01-16
