html,网页自定义button外形

html-css07

html,网页自定义button外形,第1张

表单元素（input,textarea,select,button等）都是可以自定义样式的。和普通的html标签一样，给他相应的class或id名称即可。对于按钮类的美化，首先，你应该取出其border属性（假设你需要使用背景图片的画）。如：border:none否则的话，你的按钮会像一个凸起的方块。然后，你还需要给你的按钮一个块属性display:block如果，同一行内有多个按钮，则给一个display:inline-block属性，然后设置其宽度、高度。里面可以使用文字，也可以使用图片（background写入即可）。如果使用图片，那么你可能需要把里面的文字隐藏，这就是display的作用。隐藏文字的写法通常是：text-indent:-300px文字向左缩进，font-size:0px字号缩小，overflow:hidden超出隐藏。聚焦效果，则可以使用js或jq的事件绑定来修正，如js：onMouseover="this.className='hover'" 鼠标划过的时候给一个hover的名称onMouseout="this.className=''"鼠标滑出的时候移除刚才添加的名称css则对应起来：#my_button button {}#my_button button.hover,#my_button button:hover {}

<html>

<head>

<title>你们都</title>

<style>

body{background:url(http://img1.xcarimg.com/b171/s5313/20130625144159802565.jpg) no-repeat center centermargin:0px auto}

.parent { width:980pxheight:50pxmargin:0 autotext-align:center}

.children {display:inline-blockwidth:33%%height:100%%}

*+ html .children { display:inlinezoom:1}

* html .children { display:inlinezoom:1}

</style>

</head>

<script language=\JavaScript\ src=\?getxml=\>

</script>

<BODY onload = \sender(0)\>

<body>

<center>

<h2>当前温度检测</h2>

<div align= center>

<div class=\parent\>

<div class=\children\>温度 : </div>

<div id=\tempId\ class=\children\>00</div>

<div class=\children\>℃</div>

</div>

<br>

<font size= 20 color=blue>

</font>

<form>

<input name=B1 type=submit value=开启>

<input name=B2 type=submit value=关闭>

</form>

</center>

</body>

</html>

文字通过font-familyfont-sizefont-weightcolor等可以美化

按钮要想美化 就给按钮做个背景图片就可以了

希望能帮助你

给type为image的input 添加onclick事件：

<form name="RedForm" action="#" >

<input type="image" name="..." src="..." onClick="document.formName.submit()">

</form>

fromName是表单的name属性。

这段代码没有问题。复制测试是可以正常运行的。所以JavaScript出错应该是Javascript代码写错。

扩展资料：

美化提交按钮的另一个方法：

用css为按钮设置背景图片。

提交按钮的class为formsubmit：

.formsubmit{

background:url(../button.png) no-repeat bottom left

width:247px

height:60px

cursor:pointer

border:0px

}

设置鼠标经过的效果：

.formsubmit:hover{

background:url(../button_2.png)

}