按钮式链接的CSS

来源：百度知道 编辑：UC知道 时间：2024/05/30 22:55:21
按照书上的代码测试了一下，具体如下：

CSS部分：

a{font:18px Arial, Helvetica, sans-serif;
text-align:center;
margin:3px;}
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{
color:#ecd8db;
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;

首先:
遨游用的是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="