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

2023-03-02 22:20:01html-css08

用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>

1、打开htm1软件，打开工作区空间，选择需要进行操作的文件夹，点击上方的新建文件选项。

2、在弹出的文本框中给html文件命名，文件后缀名要以html结尾，文件命名为round，html，建议使用功能性的文件命名方式。

3、在新建的html文件中输入设置圆角矩形按钮彩虹条CSS代码。

4、在代码的空白区域右击在弹出的选项卡中选择Open，In，Default，Browser选项。

5、点击运行之后，在浏览器网页中显示出制作的圆角矩形彩虹条的效果。

点击一个按钮要实现按F11全屏的效果。在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。

在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +,

safri5.1+,firfox10+,IE11支持