<html>
<head>
<style>
#but{
widht:220px
height:300px
}
</style>
</head>
<body>
<a href='地址'>
<input type='button' id='but' value='我是一个链接'>
</a>
</body>
</html>
1、在DW中实现效果：打开DW编辑器，在body中输入编辑按钮代码：如下
<button id="feedback" type="button" style="margin-right:30px">草稿</button>
2、给按钮加一个超链接，链接到另一个页面最简单的方法就是用a标签给包含进去；如下
3、效果实现页面：
点击后：
首先:遨游用的是IE的内核,你在IE里看到的效果跟遨游应该是完全一样的.
其次:
DW不是所见即所得.所以一切以浏览器为准.
第三:
a:hover{ =>表示鼠标经过的时候.
color:#ecd8db=>表示字体的颜色
padding:4px 10px=>表示内容和边框之间的距离.
background-color:#ecd8db=>表示背景的颜色.
你没注意到字体的颜色跟背景的颜色一样吗?当然看不到字.
解决办法:把color:#ecd8db删了或改其他颜色
第四:
没仔细研究为什么出不来效果.
不过可以这样解决.
把上面的
a{font:18px Arial, Helvetica, sans-serif
text-align:center
margin:3px}
修改成:
a{font:18px Arial, Helvetica, sans-serif
text-align:center
margin:3px
float:left
display:block
width:100px
}
完整代码如下(直接复制进DreamWeaver就可以了)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style>
a{font:18px Arial, Helvetica, sans-serif
text-align:center
margin:3px
float:left
display:block
width:100px
}
a:link,a:visited{
color:#a62020
padding:4px 10px
background-color:#ecd8db
text-decoration:none
border-top-width: 1px
border-right-width: 1px
border-bottom-width: 1px
border-left-width: 1px
border-top-style: solid
border-right-style: solid
border-bottom-style: solid
border-left-style: solid
border-top-color: #eeeeee
border-right-color: #717171
border-bottom-color: #717171
border-left-color: #eeeeee
}
a:hover{
padding:4px 10px
background-color:#ecd8db
text-decoration:none
border-top-width: 1px
border-right-width: 1px
border-bottom-width: 1px
border-left-width: 1px
border-top-style: solid
border-right-style: solid
border-bottom-style: solid
border-left-style: solid
border-top-color: #717171
border-right-color: #eeeeee
border-bottom-color: #eeeeee
border-left-color: #717171
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">心情日记</a>
<a href="#">学习心得</a>
<a href="#">工作笔记</a>
<a href="#">生活琐碎</a>
<a href="#">其他</a>
</body>
</html>
