简单的一个百度注册界面

简单的一个百度注册界面

通过这两天对css的学习,做一个简单的百度登录界面,代码如下:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			#i1{
      
				background: url(img/reg_bg_min.jpg);
				
			}
			#i2{
      
				width: 400px;
				height: 450px;
				background-color: #F0F8FF;
				opacity: 0.8;
				border-radius: 15px;
				padding: 20px;
				float: right;
				margin-right: 100px;
				margin-top: 100px;
			}
			#i3{
      
				font-size: 30px;
				font-weight: bold;
			}
			.c1{
      
				width: 250px;
				height: 25px;
			}
			.c2,.c3{
      
				height: 25px;
			}
			.i5{
      
				margin: 30px;
		         margin-left: auto;
		         margin-right: auto;
		         text-align: center;
			}
			
			#i6{
      S
				border: 1px solid;
				color: #F0F8FF;
				background-color: #0000FF;
				height: 40px;
				width: 318px;
				border-radius: 15px;
				margin-left: auto;
				margin-right: auto;
			
			
			}
			.c3{
      
				border: 0;
				height: 40px;
			}
			.c4{
      
				border: 0;
				background-color: #0000FF;
				color: #F0F8FF;
				text-align: center;
				width: 38px;
				height: 20px;
			}
			#i7{
      
				font-size: 10px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
			}
			#box1{
      
				float: left;
				margin-left: 100px;
				margin-top: 100px;
			}
			#box2{
      
				color: aliceblue;
				font-size: 30px;
				float: left;
				margin-top: 350px;
				letter-spacing: 10px;
				line-height: 10px;
				}
			#box3{
      
				color:#F0F8FF;
				font-size: 15px;
				letter-spacing: 5px;
				float: left;
				position: relative;
				top: 120px;
				left: 100px;
				}
			a{
      
				text-decoration: none;
			}
		    a:hover{
      
				color: crimson;
			}
			#a1{
      
				color: #F0F8FF;
			}
			#a1:hover{
      
				color: crimson;
			}
			}
		style>
	head>
	<body id="i1">
		<div id="i2">
			<div id="i3">欢迎注册div>
			<div id="i4">已有账号?<a href="">登录a> div>
			<div class="i5">用户名   <input class="c1" type="text" placeholder="请设置用户名"/> div>
			<div class="i5">手机号   <input class="c1" type="text" placeholder="可用于登录和找回密码"/> div>
			<div class="i5">      <input class="c1" type="password" placeholder="请设置登录密码"/> div>
			<div class="i5">验证码   <input class="c2" type="text" placeholder="请输入验证码" />
			             <input class="c3" type="button" value="获取验证码" /> div>
			<div class="i5"><input id="i6" type="submit" value="登录" />div>
			<div id="i7"><input  type="checkbox" />阅读并接受<a href="">《百度用户协议》a><a href="">《百度隐私权保护声明》a> div>
		div>
		<div id="box1" ><img src="./img/baidu.png"/>div>
		<div id="box2" >
			<h2>用科技h2>
			<p>让复杂的世界更简单p>div >
		<div id="box3">帮助中心a> | <img src="./img/service-hover-2x.png" />  2020@百度 div>
		div >
	
	body>
html>

上述代码实现结果如下图所示:

你可能感兴趣的:(css)