正文
css按钮链接样式,css外部链接样式
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
CSS可否改变设置按钮的样式？怎么做呢？菜鸟求教~
1、首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式。
2、按钮样式比较多，这样写让代码不整洁，可阅读性差，就要用style标签。
3、style type="text/css"/style样式表。style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。
4、把 样式表中的 button{}改成了.ui_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。
5、通过javascript动态修改样式，为了避免用户多次点击提交按钮重复提交信息，在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。
6、修改样式的其他方法：obj.style.cssText = "color:#E1E1E1;background-color:black;";cssText可以写多个样式样式属性。
7、修改样式的其他方法：obj.setAttribute("class", "style2");直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。
8、修改样式的其他方法：link href="css1.css" rel="stylesheet" type="text/css" id="css"/obj.setAttribute("href","css2.css");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。
用CSS做一个按钮，怎么添加链接？
用CSS做一个按钮，添加链接，首先给这个按钮一个id或者是class，然后我们在通过css的width，height来改变这个按钮的默认宽度和高度，在用一个a标签将这个按钮包裹起来，就能实现链接的添加，通过代码来理解下：
html
head
style
#but{
widht:220px;
height:300px;
}
/style
/head
body
a href='地址'
input type='button' id='but' value='我是一个链接'
/a
/body
/html
按钮式链接的CSS
首先:
遨游用的是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" ""
html xmlns=""
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
