笔记本样式表单

来源：互联网发布：知乎提问该问题已存在编辑：程序博客网时间：2024/05/22 01:50

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.note{
margin: 100px auto;
width: 450px;
height: 550px;
border:1px solid silver;
border-radius: 0 10px 10px 0;
box-shadow: 3px 0px 3px;
}

.body{

position: relative;
top:-400px;
left: 140px;

}
input{
display: block;
margin: 40px 0px;
border:1px solid transparent;
border-bottom-color: silver;
outline: none;
}

.side span{
position: relative;
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
border:1px solid silver;
margin-top:30px;
left: 20px;
box-shadow: 2px 0px 3px inset;
}
#submit{
background-color: white;
font-size: 18px;
font-weight: bolder;
margin: 0 auto;
width: 100px;
}
</style>
<body>
<div class="note">
<div class="side">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="body">
<form>
<table>
<tr><td><span >Name:</span></td><td><input type="text" id="name" /></td></tr>
<tr><td><span>Mail:</span></td><td><input type="text" id="mail" /></td></tr>
<tr><td><span>Address:</span></td><td><input type="text" id="address"/></td></tr>
</table>
<input type="submit" id="submit" value="SUBMIT" />
</form>
</div>
</div>

</body>
</html>

0 0