css选择器及练习

背景视频设置

<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>

效果:

 

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值