用html如何实现点击按钮变换按钮的样式？

2023-03-01 15:13:02html-css07

用html如何实现点击按钮变换按钮的样式？,第1张

html页面如下：

<ul>

</ul>

</div>

</div>

</body>

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 span.on {background:#fff}

#focus .preNext {width:45px height:100px position:absolute top:90px background:url(img/sprite.png) no-repeat 0 0 cursor:pointer}

#focus .pre {left:0}

#focus .next {right:0 background-position:right top}

</style>

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先，打开html编辑器，新建一个html文件，例如：index.html，填充问题基础代码。

2、其次，在index.html中的按钮标签中，输入样式代码：

style="width: 80pxheight: 40pxbackground-color: #e6b900border: 0pxborder-radius: 3px"

3、浏览器运行index.html页面，此时成功将提交按钮修改为黄色div样式。

1、打开Dreamweaver软件，鼠标左键选择新建【HTML】，在代码窗口上，修改网页title标签，比如表单中添加按钮，如下图所示。

2、接着，在【设计】窗口中，鼠标左键单击菜单【插入】下的【表单】，如下图所示。

3、在【设计】窗口上，左键单击菜单【插入】下的【表单】的【文本域】，并在弹出的而窗口中，设置文本的参数，如名称等，如下图所示。

4、接着，左键单击菜单【插入】下的【表单】的【按钮】，如下图所示。

5、然后，在弹出的按钮设置窗口上，设置按钮的参数，如按钮的名称等，如下图所示。

6、最后，鼠标左键单击【实时视图】窗口，可以看到制作好的添加按钮的表单，可以在表单中输入文字，单击按钮，查看显示效果，如下图所示。