实例代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.div_box{
background-color:#f1f1f1;
padding:10px;
width:600px;
border-radius:5px ; /*圆角边框*/
}
input[type=text],select{
width:100%;
margin:8xp 0px;
padding:12px 20px;
display:inline-block; /*内联块*/
border:1px solid #ccc;
border-radius:4px;
box-sizing:border-box; /*border-box 定义总宽度和总高度大小*/
}
input[type=submit]{
width:100%;
background-color:#4caf50;
color:white;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:4px;
cursor:pointer;/* 改变鼠标指针样式*/
}
input[type=submit]:hover{
background-color:#45a049;
}
</style>
</head>
<body>
<h1>Using CSS to style an HTML Form</h1>
<div class="div_box">
<form action="action_page.php" >
<table for="fsname">First Name:</table>
<input id="fsname" name="firstname"placeholder="Your name.." type="text"></input>
<table for="laname">Last Name:</table>
<input id="laname" name="lastname"placeholder="Your last name.." type="text"></input>
<table for="country" >Country: </table>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="china">China</option>
<option value="canada">Canada</option>
</select>
<input type="submit" value="Submit"></input>
</form>
</div>
</body>
</html>
运行效果：
评论