背景视频设置
<video src="img/图片名称及格式"
autoplay="autoplay"(自动播放)
loop="loop"(循环播放)
muted="muted"(静音)> 视频标签
</video>
css选择器:
1.id选择器:#id的值{}
2.标签选择器: 标签名{}
3.类选择器:.class的值
divmargin用于调整位置
<head>
<style>
body{ 去掉默认白边
margin: 0px;
}
.abc{
border-radius:25px;(圆角)
font-size:30px; (设置字体大小)
color(设置颜色)
background-color: rgba(255,255,255,0.6);(设置整体颜色为白色0.6的透明度)
z-index: -1;(优先级为-1,默认背景)
}
</style>
</head>
<input class="abc" placeholder="请输入提示信息"/>
综合练习代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin: 0px;
}
#d1{
width: 500px;
height: 350px;
background-color: rgba(255,255,255,0.6);
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -250px;
border-radius: 25px;
}
#v1{
position: absolute;
z-index: -1;
}
#fist{
width:500px ;
height:40px ;
font-size: 25px;
white-space: 500px;
}
#second{
height:260px ;
white-space: 500px;
}
.f1{
font-size:25px ;
color: brown;
}
.inputs{
height: 25px;
width: 170px;
font-size: 20;
border-radius: 10px;
}
.f2{
height: 30px;
width: 60px;
font-size:20px ;
}
.f3{
height: 30px;
width: 30px;
background-color:goldenrod;
}
</style>
</head>
<body>
<video id="v1" src="img/千反田的笑_爱给网_aigei_com.mp4"
autoplay="autoplay" loop="loop" muted="muted" ></video>
<div id="d1">
<div id="fist">
<center>登录</center>
</div>
<div id="second">
<form action="register.html">
<table >
<tr>
<td width="40" height="100"></td>
<td width="60" ><img src="img/用户-角色-用户名-单人_jurassic.png" class="f3"></td>
<td width="80" class="f1">用户:</td>
<td width="180"><input type="txt" name="name" placeholder="请输入名字" class="inputs" /></td>
<td width="40"></td>
</tr>
<tr>
<td height="40"></td>
<td> <img src="img/密码.png" class="f3"></td>
<td class="f1">密码:</td>
<td><input type="password" name="pwd" placeholder="请输入密码" / class="inputs"></td>
<td></td>
</tr>
<tr>
<td height="100"></td>
<td ><img src="img/登录.png" class="f3" /></td>
<td><input type="submit" value="登录" class="f2" /></td>
<td ><center><a href="register.html"><input type="button" value="注册" class="f2"/></a></center></td>
<td></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
register.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
#r1{
width: 400px;
height: 600px;
background-color: rgba(255,255,255,0.6);
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -200px;
border-radius: 25px;
}
#vs1{
position: absolute;
z-index: -1;
}
#dl{
height: 60px;
width: 400px;
font-size:30px;
}
.r4{
width: 200px;
height: 20px;
font-size: 16px;
background-color: beige;
border-radius: 10px;
}
.xl{
width: 100px;
height: 35px;
font-size: 20px;
}
.r6{
font-size: 20px;
}
.zc{
width: 60px;
height: 35px;
font-size: 20px;
}
</style>
</head>
<body>
<video id="vs1" src="img/千反田的笑_爱给网_aigei_com.mp4"
autoplay="autoplay" loop="loop" muted="muted" ></video>
<div id="r1">
<div id="dl">
<center>登录</center>
</div>
<div id="r3">
<form action="index.html">
<table align="center" >
<tr>
<td></td>
<td height="60" class="r6">用户名</td>
<td ><input type="text" name="name" class="r4" placeholder="请输入用户名"/></td>
</tr>
<tr>
<td></td>
<td height="60" class="r6"> 密码</td>
<td ><input type="password" name="pwd" class="r4" placeholder="请输入密码" /></td>
</tr>
<tr>
<td></td>
<td height="60" class="r6">性别</td>
<td><input type="radio" value="1" name="sex"checked="checked" />男
<input type="radio" value="2" name="sex" />女</td>
</tr>
<tr>
<td></td>
<td height="60" class="r6">兴趣</td>
<td><input type="checkbox" value="1" name="like" />唱
<input type="checkbox" value="2" name="like" />跳
<input type="checkbox" value=3" name="like" />rap
<input type="checkbox" value="4" name="like" />篮球</td>
</tr>
<tr>
<td></td>
<td height="60" class="r6">座右铭</td>
<td><textarea rows="6" cols="30s" name="zym" style="resize: none;"></textarea></td>
</tr>
<tr>
<td width="30"></td>
<td height="60" class="r6">学历</td>
<td ><select name="edu" class="xl">
<option value="1">大专</option>
<option value="1">本科</option>
<option value="1">研究生</option>
</select></td>
</tr>
<tr>
<td height="60" colspan="3"><center><input type="submit" value="注册" class="zc"/></center></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
效果: