CSS 3之美化表格样式(二)

美化表格样式(二)

  • 1. 美化提交按钮

1. 美化提交按钮

在定义表单元素边框时,可采用 border-styleborder-widthborder-color及其衍生属性;
若要对表单元素设置背景色,可采用 background-color 属性,其中将值设置为 transparent(透明色)是最常用的一种方式;
代码如下所示:

background-color:transparent;	/*背景透明色*/

例子 1:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素边框设置title>
		<style type="text/css">
			form{
				margin: 0px;
				padding: 0px;
				font-size: 16px;
			}
			input{
				font-size: 16px;
				font-family: 楷体;
			}
			.n{
				border-bottom: 1px solid #006;
				color:#006 ;
				border-top: 0px;
				border-left: 0px;
				border-right: 0px;
				background-color: transparent;
			}
			.m{
				background-color: transparent;
				border: 1px;
			}
		style>
	head>
	<body>
		<center>
			<h2>签到表h2>
			<form action="" method="post">
				签到:<input id="name" class="n" />
				<input type="submit" value="提交" class="m" />
			form>
		center>
	body>
html>

CSS 3之美化表格样式(二)_第1张图片

你可能感兴趣的:(web,前端学习,#,CSS,css,前端,javascript)