在本篇教程中，我們將學(xué)習(xí)如何使用Dreamweaver來(lái)制作一個(gè)帶有圓角和鼠標(biāo)經(jīng)過(guò)變色效果的按鈕。下面我將分享給大家一些經(jīng)驗(yàn)。 新建HTML文件并插入鏈接 首先，我們需要新建一個(gè)HTML文件，并在

在本篇教程中，我們將學(xué)習(xí)如何使用Dreamweaver來(lái)制作一個(gè)帶有圓角和鼠標(biāo)經(jīng)過(guò)變色效果的按鈕。下面我將分享給大家一些經(jīng)驗(yàn)。

新建HTML文件并插入鏈接

首先，我們需要新建一個(gè)HTML文件，并在body標(biāo)簽中插入一個(gè)a標(biāo)簽，并設(shè)置空鏈接。

lt;a class"btn-style" href"#"gt;開(kāi)始游戲lt;/agt;

然后，在title標(biāo)簽中引入內(nèi)嵌樣式表的代碼。

lt;style type"text/css"gt;lt;/stylegt;

添加CSS樣式

接下來(lái)，我們給a標(biāo)簽添加一個(gè)CSS樣式，并命名為btn-style。我們可以定義按鈕的寬度、高度、字體顏色、背景色以及去除下劃線等屬性。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
}

注意，要加上display:block屬性，否則定義的寬度和高度將不會(huì)生效。

最后，在a標(biāo)簽中引入btn-style樣式。

lt;a class"btn-style" href"#"gt;開(kāi)始游戲lt;/agt;

進(jìn)一步樣式設(shè)置

我們可以繼續(xù)添加樣式，使按鈕文字水平居中、垂直居中，并定義字體和字體大小。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: "微軟雅黑";
}

添加圓角效果

我們可以將按鈕的四個(gè)角設(shè)置成圓角，使其更像一個(gè)按鈕。

.btn-style {
  width: 150px;
  height: 50px;
  color: #F8FF00;
  background: #FF0000;
  text-decoration: none;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: "微軟雅黑";
  border-radius: 100px;
}

鼠標(biāo)經(jīng)過(guò)效果

為了使按鈕更加明顯，我們可以在鼠標(biāo)經(jīng)過(guò)時(shí)改變按鈕的顏色。我們可以單獨(dú)給a標(biāo)簽定義鼠標(biāo)經(jīng)過(guò)后的顏色，將字體顏色從之前的黃色改為白色。

.btn-style:hover {
  color: #fff;
}

除了字體顏色，我們還可以改變按鈕的背景色。

.btn-style:hover {
  color: #fff;
  background: #B00000;
}

調(diào)試和實(shí)時(shí)預(yù)覽

為了方便觀察效果，我們可以復(fù)制一個(gè)完全相同的按鈕，并給兩個(gè)按鈕之間添加外邊距。保存網(wǎng)頁(yè)后，在瀏覽器中查看，當(dāng)鼠標(biāo)經(jīng)過(guò)按鈕時(shí)，按鈕的顏色會(huì)改變，非常好看。

此外，在Dreamweaver中，我們還可以直接點(diǎn)擊頂部工具欄中間的"拆分"按鈕，以實(shí)時(shí)查看編輯后的效果。

以上就是使用Dreamweaver制作圓角按鈕的教程，是不是很簡(jiǎn)單呢？希望對(duì)大家有所幫助！