按钮式链接的CSS
a:link:{color:#000};/*设置所有连接的颜色*/
a:visited:{color:#ccc};/*设置访问过的连接的颜色*/
a:hover:{color:#999};/*设置鼠标经过连接的颜色*/
a:active:{color:#333};/*设置鼠标点下连接的颜色*/
如不按照这个顺序，可能就不能达到你想要的效果。
遨游用的是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/html; charset=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>
代码没有问题，效果也没错，a标签你这么用就会有问题，如果你要达到这种按钮效果，可以把a的css属性display设成block，这样他就和div一样了，给你段代码你研究研究 ：
<!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/html; charset=gb2312" />
<title>无标题文档</title>
<style>
a{
font-size:18px;
font-family:Tahoma;
text-align:center;
width:100px;
float:left;
margin:3px;}
a:link,a:visited{
color:#a62020;
padding:5px;
background-color:#ecd8db;
text-decoration:none;
border:solid 1px red;
display:block;
}
a:hover{
color:red;
padding:5px;
background-color:#ecd8db;
text-decoration:none;
border:solid 1px green;
display:block;
}
</style>
</head>
<body>
<a href="#">首页</a>
<a href="#">心情日记</a>
<a href="#">学习心得</a>
<a href="#">工作笔记</a>
<a href="#">生活琐碎</a>
<a href="#">其他</a>
</body>
</html>
还有高度你一个秘密，ie和傲游是一样的，傲游用的是ie内核，你可以用ie和ff进行测试！
HTML中怎么写能可以 点一个按钮然后跳转另一个页面
按钮标签本身并不能添加超链接 所以我们需要给按钮标签外围加上一个a标签.如果需要跳转到别的网站地址,可以直接填入需要跳转的地址即可.点击跳转到百度 需要跳转到站内链接可以用下面这段代码 点击跳转到百度 参考资料:百度百科
Dreamweaver设计多彩文字链接
效果说明将鼠标置于文本上时，文本样式会发生改变，比如不会出现下划线，文字会闪动等。结合其他样式属性，还可以实现按钮式文字链接，效果如图 22-1 所示。创作构思Text-decoration 属性用来控制超级链接，结合 Border-Style 属性，还可以实现更加复杂的样式。操作步骤步骤一初级链接样式在 CSS 样式定义设置...
如何连接外部CSS样式
外部CSS样式是一个独立的CSS文件，当在网页中直接创建外部CSS样式时，该样式自动应用到网页中；当在创建空白网页时，通常可以附加已经存在的外部样式表。如果CSS样式文件已经存在，制作网页时可以通过【CSS样式】面板中的【附加样式表】按钮来链接，具体操作如下：（1）单击【附加样式表】按钮，在打开【链接...
css中的a:hover表示什么
CSS中的a:hover表示鼠标悬停在链接上时的样式效果。以下是 在CSS中，a代表超链接元素，而:hover是一个伪类选择器。当这两个结合使用时，即a:hover，它表示当用户将鼠标悬停在超链接上时，该链接所应用的样式效果。开发者可以通过此选择器定义鼠标悬停时的样式，如改变颜色、添加下划线、增大字体等。这...
如何将css与html连接起来
2、一行代码引入外部的CSS文件即可linkrel=stylesheethref=css\/style.css这样css文件就与HTML链接起来了。这里要注意的是html里的ID选择器和类选择器要对应上。3、首先打开DreamweaverCC2018软件新建一个html文件，在右上角点击CSS设计器，并在下方点击加号，然后选择创建新的CSS文件：在创建窗口中，点击浏览...
cursor:pointer
同时，该属性也可以应用于特定的元素上，如按钮、链接等需要用户点击操作的元素上。通过使用cursor:pointer属性，开发者可以确保用户知道这些元素是可以与之进行交互的，从而增强页面的可用性和用户体验。这一属性的应用广泛，是前端开发中不可或缺的一部分。此外，除了cursor:pointer之外，CSS还提供了其他多...
css网页的几种布局实例
如果未了解过flex布局请移至文末点击链接查看 阮一峰大神写的关于flex语法3、定位布局这边就不絮絮叨叨的讲一些基础的css定位知识了(ps:不会的请自行到w3c官网查阅),我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。第一:使用多个fixed时,注意自己需要基于什么定位,因为如果父级有用transform属性时,...
可以不可以直接用css去除input style=“botton”点击凹陷的效果呢
这样写了就没有了,就跟点击链接一样了。 huaidandj | 发布于2013-04-07 举报| 评论 2 8 这个没办法,css做不到。你可以这样,如果你实在喜欢button样式,你要么截图,设为其他标签的背景图来模拟,要么在button位置上覆盖一个遮罩层。点不到button就触发不了样式变化了 dxyqq28 | 发布于2013-04-07 ...
如何将css与html连接起来
3、首先打开Dreamweaver CC2018软件新建一个html文件，在右上角点击CSS设计器，并在下方点击加号，然后选择创建新的CSS文件：在创建窗口中，点击浏览按钮。dw怎么把html和css链接起来先启动DW软件，新建文档，文档类型选择【\/HTML】-【XHTML0】，然后点击【创建】。点击创建后，DW会为你创建一个HTML文件。
如何在html中把css链接进去
6、此时在html文件中的head标签中，就多了一行链接到CSS文件的代码。在顶部tab标签中也可以看到链接的样式表：7、接下来在html网页编辑页面，在body标签中输入一个div：8、然后在顶部tab标签中选择刚才创建的CSS样式表，并在样式表中写一个样式，命名为aaa，并按下快捷键Ctrl+S保存样式表：9、最后回到...
乌彬丹盛： a:link:{color:#000};/*设置所有连接的颜色*/ a:visited:{color:#ccc};/*设置访问过的连接的颜色*/ a:hover:{color:#999};/*设置鼠标经过连接的颜色*/ a:active:{color:#333};/*设置鼠标点下连接的颜色*/如不按照这个顺序,可能就不能达到你想要的效果.
淇滨区15857873892： 怎么给按钮添加CSS样式? - ？
乌彬丹盛： 给按钮添加css样式有以下三种方法: 1,直接在元素上定义style,如下: <input type=＂button＂ style=＂这里定义样式＂> 2,页面中内嵌样式,如下: <style> .btn{需要添加的样式} </style> <input type=＂button＂ class=＂btn＂> 3,外部引用css文件,如下: <link rel=＂stylesheet＂ type=＂text/css＂ href=＂这里是css文件的路径＂>
淇滨区15857873892： div class css3 按钮 链接 怎么使用方法 - ？
乌彬丹盛： class在页面其他地方定义,或者在css文件中定义了.你可以看看这个页面包含的文件,就已引入的css文件,可以找到class的定义.
淇滨区15857873892： css 按钮怎么链接 - ？
乌彬丹盛： 要么就把连接弄成按钮样式的 要么就用JS添加单击事件,让页面跳转 要么就把按钮放到form里,利用form的action实现跳转.
淇滨区15857873892： 如何在CSS按钮中加链接 - ？
乌彬丹盛： <input type=＂button＂ onclick=＂location.href='index.htm'＂> index.htm改成你的页面就行.
淇滨区15857873892： CSS 点击按钮下载文件的代码怎么写啊 - ？
乌彬丹盛： 代码如下: 这里先解说下——这里有A /B 两个按钮,分别链接a/b.css, 只要单击按钮就可以实现改变头部id为change_css 的css文件.当你希望change_css一开始没有css只是点击按钮的时候才有css的话,那么你给change_css这个id的链接 ...
淇滨区15857873892： 如何用 CSS 绘制按钮? - ？
乌彬丹盛： 一般有三种方法: <ol><li>Button标签直接使用CSS定义样式,优点是立体感、有按下状态,缺点是样式单一、各浏览器下显示效果不一致. </li><li>a标签+背景图片+滑动门技术,优点是可实现多种视觉效果,缺点是采用滑动门技术会导致背景图片过大. </li><li>a标签直接使用CSS3绘制,优点是在保证视觉效果的基础上大大减少了背景图片的使用,缺点是部分浏览器不兼容.</li></ol>
淇滨区15857873892： 求按钮的div+css代码 - ？
乌彬丹盛： <html><head><title>按钮超链接</title><style> <!-- a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; ...
淇滨区15857873892： 如何用ASP.NET+CSS实现当前页面的链接按钮样式？
乌彬丹盛： 比如 #a {color:blue;} #a:visted {color:red;}
淇滨区15857873892： 按钮怎样加CSS样式 - ？
乌彬丹盛： 引用(有人回答过了):.btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; ...
