• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] CSS改變文本框與按鈕樣式教學—- 其他教程




    教學主題: CSS改變文本框與按鈕樣式教程

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: CSS改變文本框與按鈕樣式教程

    這教學的重點為這幾點 [ 樣式,教程,按鈕,文本,改變,效果,插入,我們,網頁,實現, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    我們怎麼樣才能改變文本框與按鈕的模樣呢?那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考,第一種是文本框與按鈕無立體感,只是有線 條顏色與填充顏色的,這種效果大家可能在很多網站上都看見過,給人一種特別的感覺.

    一、先看看在網頁中經常出現的按鈕與文本框的本來面目吧!

    CSS改變文本框與按鈕樣式教學  
      對照上圖,我們怎麼樣才能改變文本框與按鈕的模樣呢?那在下面我為大家提供兩種文本框與按鈕樣式作為例子參考,第一種是文本框與按鈕無立體感,只是有線 條顏色與填充顏色的,這種效果大家可能在很多網站上都看見過,給人一種特別的感覺,很不錯的,第二種效果就比較特殊了,是將文本框做成一種類似於下劃線的 效果並且是彩色的,同時按鈕的景色也不再是灰色,而是彩色的,可以說這是一種非常酷的效果,好了,下面我就來說說這兩種效果實現的詳細操作步驟吧。   二、無立體效果的文本框與按鈕

      那我們就通過在DW3中網頁的編輯操作為例來進行說明,首先我們已經在網頁中插入了相應的表單對象,比如插入一個文本框與一個按鈕,此時,我們在按下 [F10]鍵,顯示出網頁源代碼編輯窗口,那我們在網頁的<head>與</head>標籤之間插入這個樣式表:

    <style type="text/css">
    input.smallInput{border:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
    </style>

    好了第一步就完成了,下一步我們就分別在文本框與按鈕的htm語句中加上這一句代碼:
      class=smallInput
      比如在<input type="text" name="textfield" class=smallInput>與
      <input type="submit" name="Submit" value="平面按鈕" class=smallInput>
      這個文本框與按鈕的htm語句中加入了這句代碼。最後的效果如下圖:

    CSS改變文本框與按鈕樣式教學  

      怎麼樣,比起前面那張圖中的標準按鈕來說是不是美觀多了,要實現起來其實也不是太難吧。

    三、帶顏色的下劃線式文本框與按鈕效果

      同樣,我們也需要樣式表的幫助來實現這個效果,和第一種效果的操作步驟一樣在網頁的<head>與</head>標籤之間插入樣式表:

    <style type="text/css">
    input.smallInput{background:#ffffff;border-bottom-color:#ff6633; border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
    input.buttonface{BACKGROUND: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
    </style>

    大家從上面的樣式表中可以看出,這個效果的實現是通過兩個樣式來實現的,一個是文本框 的,一個是按鈕的,所以在文本框與按鈕的htm語句中就需要插入兩句不同的代碼,在文本框中插入的是class=smallInput代碼。
      如例子 <input type="text" name="textfield" class=smallInput>,
      在按鈕語句中插入的是 class="buttonface"代碼如例子
      <input type="submit" name="Submit" value="彩色按鈕" class="buttonface">
      其實這就對應了樣式表中文本框與按鈕的樣式,最後的效果如下圖所示:

    CSS改變文本框與按鈕樣式教學  

      看看上面的效果,還會不會讓您想起那單調的文本框與按鈕呢?以上兩種效果的方法都是通過樣式表來實現的,使用方法也十分的簡單。

    進入論壇參與討論: http://www.missyuan.com/thread-427073-1-1.html

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 CSS改變文本框與按鈕樣式教程 這教學會喜歡

    文章標題: 骨子愛創意- CSS改變文本框與按鈕樣式教程–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 樣式,教程,按鈕,文本,改變,效果,插入,我們,網頁,實現,

    本文永久連結 :CSS改變文本框與按鈕樣式教程

    本文轉載自 :VIA