第十一-CSDN博客

本文链接：https://blog.csdn.net/Lin_Zhi/article/details/87366334

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习</title>
		<style type="text/css">
			div{
				margin: 5px;
				padding: 5px;
			}
			.no1{
				border: 1px black solid;
				float: left;
			}
			.no2{
				border: 1px black solid;
				float: right;
			
			}
			.no3{
				border: 1px black solid;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div class="juli">
			
		
		<div class="no1"><img src="img/photo-1.jpg" /></div>
		<div class="no2"><img src="img/photo-2.jpg" /></div>
		<div class="no3"><img src="img/photo-3.jpg" /></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ会员页面</title>
		<style>
			*{
				margin: 0px;
				padding: 0PX;
			}
			.no1{
				/*背景元素*/
				background-color:rgba(0,0,0,0.5) ;
				width: 100%;
				
			}
			img{
				padding-left:70px ;
			}
			.no2{
				padding-left: 50px;
			}
			li{
				list-style: none;
				padding-left: 20px;
				
				
			}
			img,.no2,li,.no3{
				display: inline-block;
				vertical-align: middle;
			}
			.no2 li a:link{
				text-decoration: none;
				color: #fff;
			}
			.no2 li a:hover{
				color: blue;
			}
			.no3{
				margin-left: 50px;
			}
			.beijing1{
				width: 70px;
				height: 30px;
				background-color: rgba(0,0,0,0.5);
				border: yellow 1px solid;
				line-height: 30px;
				border-radius: 15px;
				text-align: center;
				color: yellow;
			}
			.beijing2{
				width: 150px;
				height: 30px;
				background-color:yellow ;
				border:  rgba(0,0,0,0.5) 1px solid;
				line-height: 30px;
				border-radius: 15px;
				text-align: center;
				color:  rgba(0,0,0,0.5) ;
				font-weight: bold;
			}
			.no3 a:link{
				text-decoration: none;
			}
			.no3 a:hover div{
				color:rgba(0,0,0,0.5) ;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="no1">
			<!--w:290 h180-->
			<img src="img/logo.png" width="145px" height="90px"/>
			<div class="no2">
				<ul>
					<li><a href="#">功能特权</a></li>
					<li><a href="#">功能特权</a></li>
					<li><a href="#">生活特权</a></li>
					<li><a href="#">会员活动</a></li>
					<li><a href="#">成长体系</a></li>
					<li><a href="#">年费专区</a></li>
					<li><a href="#">超级会员</a></li>
				</ul>
			</div>
			<div class="no3">
				<ul>
					<li><a href="#" ><div class="beijing1">登录</div></a></li>
					<li><div class="beijing2">开通超级会员</div></li>
				</ul>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>京东登录</title>
		<style>
			*{
				margin: 0px;
				padding: 0PX;
			}
			.waibiankuang{
				border: 1px #000000 solid;
			}
			img{
				margin-left:150px;
			}
			.biaoti{
				font-size: 17px;
				font-weight: bold;
			}
			img,span{
				vertical-align: middle;
				padding-left:30px;
			}
			.no1{
				background-color: #e93854;
			}
			.no2{
				width: 990px;
				margin: 0 auto;
			}
			.no3{
				height: 475px;
				background: url(img/banner.png) no-repeat left top;
				margin-left:170px;
			}
			.biaoge{
				border: 1px #000000 solid;
				float: right;
				margin: 100px;
				
				background-color: #FFFFFF;
				width: 300px;
				height: 200px;
			}
			.wenzi1{
				line-height: 30px;
			}
			.wenzi2{
				padding-left: 150px;
				background-image: url(img/icon5.jpg);
				background-repeat: no-repeat;
				font-size: 14px;
			}
			.beijing1{
				background-image: url(img/icon1.jpg);
				background-repeat: no-repeat;
				padding-left: 30px;
			}
		</style>
	</head>
	<body>
		<header>
			<img src="img/logo.png" /><span class="biaoti">欢迎登入</span>
		</header>
		<article>
			<div class="no1">
				<div class="no1">
					<div class="no3">
						
							<div class="biaoge">
								<form action="#" method="post">
								<p class="wenzi1">京东会员<span class="wenzi2">立即注册</span></p>
							<div class="beijing1"><input  type="text" /></div>
							
							</div>
						</form>
					</div>
				</div>
			</div>
		</article>
		<footer>
			
		</footer>
	</body>
</html>