css选择器及练习

最新推荐文章于 2024-06-18 17:22:31 发布

瑟瑟发抖的萌新学徒

最新推荐文章于 2024-06-18 17:22:31 发布

阅读量537

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/m0_56420338/article/details/128005422

版权

背景视频设置

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

综合练习代码：
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>

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

效果：