css的进一步了解

最新推荐文章于 2024-09-22 16:48:29 发布

烟逝·寂火

最新推荐文章于 2024-09-22 16:48:29 发布

阅读量132

点赞数

分类专栏：个人笔记

本文链接：https://blog.csdn.net/lclsj479/article/details/99612663

版权

个人笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

css的进一步了解

1.遮罩

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这是一个登录页面</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#shadow{
			width: 100%;
			height: 100%;
			position: fixed;
			background:rgba(125,125,125,0.4);
			left: 0;
			top:0;
			display: none;
		}
		.login{
			width: 300px;
			height: 150px;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding: 30px;
			background: url(img/fengye.gif);
			font-size: 25px;
			color: white;
		}
	</style>
	<body>
		<a href="javascript:void(0);" onclick="login();">登录</a>
		<div id="shadow">
			<div class="login">
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" name="username"></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password"name="password"</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit" value="登录" />
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script>
		function login(){
			document.getElementById("shadow").style.display='block';
		};
	</script>
</html>

1.2 多行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			tr:nth-child(2n+1){
				background: pink;
				border: 3px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
			</tr>
			<tr>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
			</tr>
			<tr>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
			</tr>
			<tr>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
				<td>内容</td>
			</tr>
		</table>
	</body>
</html>

1.3相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.container{
				position: relative;
				width: 1000px;
				min-height: 600px;
				/*background: whitesmoke;*/
				background:white;
				margin: 0;
			}
			ul{
				list-style: none;
				float: right;
				margin-right: 0px;
				margin-bottom: 0px;
			}
			.big{
				width: 750px;
				height: 690px;
				border: 1px dashed gray;
				border-radius: 5px;
				box-shadow: 2px 2px 5px gray;
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			/*第一个big*/
			.first{
				/*z-index: 8888;*/
				display: block;
			}
			
			.small{
				width: 125px;
				height: 125px;
				border-radius: 50%;
				box-shadow: 5px 5px 10px gray;
				/*透明度*/
				margin: 20px;
				opacity: 0.3;
				
			}
			.container .small:hover+.big{
				display: block;
			}
			.one{
				opacity: 1.0;
			}
			.container ul:hover .small{
				opacity: 0.3;
			}
			.container ul li .small:hover{
				opacity: 1.0;
			}			
		</style>
	</head>
	<body>
		<div class="container">
			<ul>
				<li>
					<img src="img/fengye.gif" class="small one" />
					<img src="img/fengye.gif" class="big  first"/>
				</li>
				<li>
					<img src="img/huanghun.gif" class="small" />
					<img src="img/huanghun.gif" class="big"/>
				</li>
				<li>
					<img src="img/senlin.gif" class="small" />
					<img src="img/senlin.gif" class="big"/>
				</li>
				<li>
					<img src="img/xuehua.gif" class="small" />
					<img src="img/xuehua.gif" class="big"/>
				</li>
			</ul>
		</div>
	</body>
</html>