首页
关于我们
网站建设
经典案例
网络推广
技术中心
建站指导
联系我们
网站套餐 Package
最新推荐 Recommended  
  您现在的位置: 天诚世纪 >> 技术中心 >> 网页设计 >> Dreamweaver教程 >> 正文
dreamweaver中美化按钮
作者:天诚世纪 更新时间:2009-6-17 10:43:45 来源:天诚世纪
     1.样式一 平面按钮



代码如下:

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

<input type="text" name="textfield" class=sa>
<input type="submit" name="Submit" value="平面按钮" class=sa>

2.样式二



代码如下:

<style type="text/css">
input.a1{background:#ffffff;border-bottom-color:#6699FF; 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.b1{BACKGROUND: #6699FF; border:1 solid #6699FF; COLOR: #ffffff; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
</style>

<input type="text" name="textfield" class=a1>
<input type="submit" name="Submit" value="彩色按钮" class="b1">

3.样式三



代码如下:

<style type="text/css">
input.a2{background:#ffffff;border-bottom-color:#CC0000; 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.b2{BACKGROUND: #CC0000; border:3 solid #DEE3E7; COLOR: #ffffff; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal}
</style>

<input type="text" name="textfield3" class="a2">
<input type="submit" name="Submit3" value="^^^^^" class="b2">

4.样式四



代码如下:

<INPUT name="submit" type=submit class=so style="BACKGROUND-COLOR: #e86000; COLOR: #ffffff; HEIGHT: 20px; WIDTH: 58px" value= 登 录 >

5.样式五:button元素,以下效果要有IE5.5+支持



代码如下:

<style>
.btn {
BORDER-LEFT: #ff9966 1px solid;/*左边框*/
BORDER-RIGHT: #ff9966 1px solid;/*右边框*/
BORDER-TOP: #ff9966 1px solid;/*上边框*/
BORDER-BOTTOM: #ff9966 1px solid;/*下边框*/
PADDING-LEFT: 2px;/*左间隙*/
PADDING-RIGHT: 2px; /*右间隙*/
PADDING-TOP: 2px;/*上间隙*/
PADDING-BOTTOM: 2px;/*下间隙*/
FONT-SIZE: 12px;/*字号*/
CURSOR: hand;/*光标类型*/
COLOR: #000000;/*字色*/
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ff9966);/*滤镜*/
}
</style>

<button class=btn title="这是一个按钮"> 这是一个按钮</button>

本文链接:http://www.tc-21.com/ITCenter/200906/20090617104345.html

  • 上一篇文章:
  • 下一篇文章:
  •   更多关于Dreamweaver教程的新闻
      相关文章
    用DW设计限时自动关闭的网页
    在DW中调整网页表格
    Dreamweaver设计一个自动关闭的网页
    Dreamweaver 8中设置段落格式
    在Dreamweaver 中加入竖直线教程
    Dreamweaver 制作可控横向滚动
    用Dreamweaver制作浮动广告
    在Dreamweaver 中制作可拖动的表格