用户注册账户的页面：
对于上面的网页布局应该如何进行制作？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 700px;
border: 2px solid red ;
margin : 0 auto ;
}
</style>
</head>
<body>
<div>
<form method="GET" action="www.baidu.com">
<h3>用户注册</h3>
<!-- size属性的默认值就是20，可以通过size进行调节 -->
<!-- maxlength属性是输入字符内容长度的最大属性 -->
<p>姓名：<input type="text" size="20" maxlength="4"></p>
<p>密码：<input type="password"></p>
<p>
<!-- checked属性是默认属性，写在哪里哪里就是默认属性 -->
<!-- name属性值的相同，表示就只能单选 -->
性别：男<input type="radio" name="sex" checked>
女<input type="radio" name="sex">
</p>
<p>
<!-- name属性相同，表示的是同一组的按钮选项 -->
爱好：篮球<input type="checkbox" name="1">
足球<input type="checkbox" name="1">
排球<input type="checkbox" name="1">
乒乓球<input type="checkbox" name="1">
</p>
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<!-- 图片按钮 -->
<p><input type="button" id="tu" value="图片按钮"></p>
<p>上传照片：<input type="file"></p>
<!-- 当提交的时候，如果输入的是不正确的网址，就会提示你输入正确的网址 -->
<p>个人主页：<input type="url"></p>
<!-- 当提交的时候，如果输入的是不正确的邮箱的话，就是给出提示信息 -->
<p>电子邮箱：<input type="email"></p>
<!-- 电话输入错误的时候是不会给出提示的 -->
<p> 电话：<input type="tel" autofocus></p>
<input type="range" min="1" max="30">
<!-- number的属性有调节按钮 -->
<!-- min表示下限 max表示上限 step表示每一次增加或者减少多少 -->
年龄：<input type="number" name="number1" min="1" max="20" step="4">
<p>入学时间：<input type="date"></p>
<p>datetime <input type="datetime"></p>
<!-- 可以输入本地的时间 -->
<input type="datetime-local">
</form>
</div>
</body>
</html>
对于上图页面的设置，可以进行美观化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style >
*{margin: 0; padding: 0; }
form{
margin: 20px auto;
width: 500px;
height: 600px;
border: 1px solid orange;
box-shadow: 3px 3px 3px 3px olive;
}
h3{
margin: 12px auto;
text-align: center;
}
input{
margin: 8px;
}
input[id="tu"]{
background-image: url(images/see.jpg);
}
</style>
</head>
<body>
<form action="www.baidu.com" method="POST" autocomplete="on" >
<h3> 用户注册</h3>
姓名：<input type="text" size="18" maxlength="4" disabled><br>
密码：<input type="password" ><br>
性别：<input type="radio" name="female" checked>
<img src="images/m.jpg" width="40px">
<input type="radio" name="female" >
<img src="images/f.jpg" width="40px"><br>
爱好：<input type="checkbox" name="c1" >游泳
<input type="checkbox" name="c1">爬山
<input type="checkbox" name="c1">钓鱼<br>
<input type="submit">
<input type="reset">
<input type="button" value="按钮">
<input id="tu" type="button" value="图片按钮"><br>
上传照片：<input type="file"><br>
个人主页：<input type="url" autofocus><br>
电子邮箱：<input type="email" ><br>
电 话：
<input type="tel" autofocus><br>
<input type="range" min="1" max="30"><br>
年龄：<input type="number" name="number1" min="1" max="20" step="4" />
入学时间：<input type="date"><br>
datetime <input type="datetime"><br>
<input type="datetime-local"> <br>
</form>
</body>
</html>
用户的登录页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
width: 400px;
height: 400px;
border: 1px solid red;
border-radius: 1px solid red;
margin:auto;
margin-top: 150px;
padding-top: 50px;
padding-left: 53px;
}
div{
width: 340px;
height: 180px;
background: rgb(182, 182, 81);
/* text-align只能用于行内元素，块元素不行（行内块元素可以居中） */
text-align: center;
padding-top: 78px;
}
</style>
</head>
<body>
<form action="">
<img src="images/login.JPG" >
<div>
<p> 账户名：<input type="text" ></p>
<p>密 码：<input type="password"></p>
<!-- submit行内块元素 -->
<input type="submit" value="登录">
</div>
</form>
</body>
</html>
多学一点：
再看一种比较麻烦但是有效果的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.b{
width: 500px;
height: 300px;
margin: 20px auto;
border : 1px solid red;
}
div p:nth-child(1){
margin-left: 50px;
}
form{
width: 400px;
height: 200px;
background: rgb(230, 230, 103);
margin: 5px auto;
border: 1px solid gray;
}
div form p:nth-child(1){
margin: 50px 50px 20px;
border: 1px solid green;
}
div form p:nth-child(2){
margin: 20px 50px 20px;
border: 1px solid green;
}
div form p:nth-child(3){
margin: 20px 50px 50px;
border: 1px solid green;
text-align: center;
}
</style>
</head>
<body>
<div class="b">
<p> <img src="images/login.JPG" alt=""> </p>
<form action="" method="GET" name="forml">
<p>账户名: <input type="text" name="account" size="20"></p>
<p>密 码：<input type="password" name="pad" size="20"></p>
<p><input type="submit" name="login" value="登录"></p>
</form>
</div>
</body>
</html>
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
