html button怎么设置按钮形状_随笔

可以通过样式来设置：你可先给你的按钮设置一个class,比如：class="btn"；方法有3种：1.如果有你外链样式表你可以在样式表征.btn{width:200pxheight:50px}2.如果没有连接你直接上头部加上<style type="text/css">.btn{width:200pxheight:50px}</style>3.你可以直接在按钮上加比如：<button style="width:200pxheight:50px">按钮</button>

参考如下：

<!DOCTYPE html >

<head>

<title>更换单选按钮显示样式</title>

<style>

input[type='radio'].radio {opacity:0 display:inline-block height:20px }

label.radio {background:url(imgs/radio_check.png) no-repeat height:20px padding-left:25px}

input[type='radio'].radio:checked + .radio {background:url(imgs/radio_checked.png) no-repeat}

</style>

</head>

<body>

</body>

</html>

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>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7169179.html

html button怎么设置按钮形状

发表评论

评论列表（0条）