需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml。
2、在indexhtml中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行indexhtml页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
直接给按钮定义背景样式或背景样式<input type=button style="background:red" value="按钮" />
或
<input type=button style="background:url(aajpg)" value="按钮" />
html页面如下：
<div class="wrapper">
<div id="focus">
<ul>
<li><a href=";
css样式：
<style type="text/css">
{margin:0; padding:0;}
body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}
clearfix:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}
clearfix {zoom:1;}
ul,li {list-style:none;}
img {border:0;}
wrapper {width:800px; margin:0 auto; padding-bottom:50px;}
/ qqshop focus /
#focus {width:800px; height:280px; overflow:hidden; position:relative;}
#focus ul {height:380px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
#focus btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus btn spanon {background:#fff;}
#focus preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/spritepng) no-repeat 0 0; cursor:pointer;}
#focus pre {left:0;}
#focus next {right:0; background-position:right top;}
</style>
你是想用css实现，还是js。
还有你代码写的不对最后一个<body>，应该是</body>
<button type="submit", id="d1" class="button item1" onclick="documentgetElementById('d1')stylebackground='#ffa200';documentgetElementById('d2')stylebackground='#0a56bb';documentgetElementById('d3')stylebackground='#0a56bb';">第一个按钮</button>
<button type="submit", id="d2" class="button item2" onclick="documentgetElementById('d2')stylebackground='#ffa200';documentgetElementById('d1')stylebackground='#0a56bb';documentgetElementById('d3')stylebackground='#0a56bb';">第二个按钮</button>
<button type="submit", id="d3" class="button item3" onclick="documentgetElementById('d3')stylebackground='#ffa200';documentgetElementById('d2')stylebackground='#0a56bb';documentgetElementById('d1')stylebackground='#0a56bb';">第三个按钮</button>
设置一个id，onclick是点击事件，点击后变色，其他回复原来颜色，每个点击事件有三个document,第一个是变色，后两个是恢复，如果不要他恢复就删掉。这只是简单js写法，适合初学但不实用，可以自己先研究一下，不明白的地方可以再问我单选按钮的样式是无法修改的，这是html固定的，跟其它控件不一样 如果你一定要用自己的样式觉得美观，你可以这样做： 自己做一张，左半边是单选按钮选中的样子，右半边是没选中的样子，利用js和css，只显示其中一半，当被点击时切换到另一半。HTML如何更改单选按钮圆圈里面的颜色
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）