练习(一)
一、HTML练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML作业</title>
</head>
<body>
<div>
<h2>请注册</h2>
<p>
<span>已有账号?</span>
<a href="#">登录</a>
</p>
<form action="#">
<label for="user">用户名</label>
<input type="text" placeholder="请输入用户名" id="user" name="user"><br>
<label for="phone">手机号</label>
<select name="prePhone" id="prePhone">
<option value="+86" selected>+86</option>
</select>
<input type="text" placeholder="请输入手机号" name="phone" id="phone"><br>
<label for="pwd">密 码</label>
<input type="password" placeholder="请设置登录密码" name="pwd" id="pwd"><br>
<label for="code">验证码</label>
<input type="text" placeholder="请输入验证码" name="code" id="code">
<input type="button" value="获取验证码"><br>
<input type="checkbox" name="isAgree" id="isAgree">
<label for="isAgree">阅读并接受协议</label><br>
<input type="submit" value="注册">
</form>
</div>
</body>
</html>
总结:标题、链接、输入框、下拉框、用户体验、按键、换行符
二、CSS1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS第一次作业</title>
<style>
div{
width: 400px;
height: 470px;
border: 1px solid grey;
border-radius: 12px; //边框弧度 50%就成了圆
margin: 50px auto;
padding: 0px 30px 0px 20px; // 内边距 上右下左
}
span{
font-size: 14px;
color: grey;
}
a{
font-size: 14px;
}
.ipt1{
width: 341px;
height: 40px;
border: 1px solid grey;
border-radius: 6px;
}
.ipt2{
margin: 20px 0px;
width: 274px;
height: 40px;
border: 1px solid grey;
border-radius: 6px;
}
.cell{
height: 40px;
width: 60px;
border-radius: 6px;
}
.cod{
margin: 20px 0px;
height: 40px;
width: 220px;
border: 1px solid grey;
border-radius: 6px;
}
.btn1{
width: 115px;
height: 40px;
border: 1px solid grey;
border-radius: 6px;
background: url("images/yanzhengma1.jpg") center/115px 40px; // 背景是为图片,大小居中
vertical-align: middle; // 调节位置到中间
}
.lab1{
font-size: 14px;
color: grey;
}
.btn2{
width: 400px;
height: 40px;
margin: 20px 0px;
background: #a2ddff;
border: 1px solid lightgrey;
border-radius: 6px;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<div>
<h2>请注册</h2>
<p>
<span>已有账号?</span>
<a href="#">登录</a>
</p>
<form action="#">
<label for="user">用户名</label>
<input type="text" placeholder="请输入用户名" id="user" name="user" class="ipt1"><br>
<label for="phone">手机号</label>
<select name="prePhone" id="prePhone" class="cell">
<option value="+86" selected>+86</option>
</select>
<input type="text" placeholder="请输入手机号" name="phone" id="phone" class="ipt2"><br>
<label for="pwd">密 码</label>
<input type="password" placeholder="请设置登录密码" name="pwd" id="pwd" class="ipt1"><br>
<label for="code">验证码</label>
<input type="text" placeholder="请输入验证码" name="code" id="code" class="cod">
<input type="button" class="btn1"><br>
<input type="checkbox" name="isAgree" id="isAgree" style="vertical-align: middle">
<label for="isAgree" class="lab1">阅读并接受协议</label><br>
<input type="submit" value="注册" class="btn2">
</form>
</div>
</body>
</html>
总结:
1、标题、链接、输入框、下拉框、用户体验、按键、换行符
2、外边距(margin)
3、微调width、height
4、边框角度
5、对齐方式
三、 CSS2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS第二次作业</title>
<link rel="stylesheet" href="css/reset.css">
<style>
div{
width: 600px;
height: 400px;
border: 1px solid grey;
margin: 100px auto;
position: relative;
}
.pic{
position: absolute;
left: 0;
top: 0;
}
.pic img{
width: 600px;
height: 400px;
}
.jt li:hover{
background: floralwhite;
}
.left{
width: 30px;
height: 30px;
left: 0;
text-align: center;
line-height: 30px;
background: grey;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.right{
width: 30px;
height: 30px;
right: 0;
text-align: center;
line-height: 30px;
background: grey;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.tab{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.tab li{
width: 10px;
height: 10px;
border: 1px solid grey;
border-radius: 50%;
float: left;
margin: 3px;
background: grey;
cursor: pointer;
}
.tab li:hover{
background: white;
}
</style>
</head>
<body>
<div class="slide">
<ul class="pic">
<li><img src="images/oneplus1.jpg" alt="图片出错了"></li>
</ul>
<ul class="jt">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
总结:
1、箭头
2、箭头位置
3、小圆圈
4、小圆圈位置的实现
5、相对位置
6、划入、划出效果