CSS简单练习02

实现百度注册界面

代码实现


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style type="text/css">
			* {
      
				margin: 0px;
				padding: 0px;
			}
			#box {
      
				background-image: url(img/reg_bg_min.jpg);
				background-repeat: no-repeat;
				width: 2880px;
				height: 1600px;
			}

			#Nei {
      

				border-radius: 20px;
				width: 850px;
				height: 1100px;
				background-color: white;
				opacity: 0.9;
				position: relative;
				left: 1800px;
				top: 300px;
			}

			.th1 {
      
				font-weight: 200;
				font-size: 35px;
				color: #333;
				line-height: 170px;
				padding-left: 50px;
				text-align: left;
				font-weight: 30;
			}

			h1 {
      
				font-size: 100px;
				text-align: left;
				padding-left: 50px;
				padding-top: 50px;
			}

			h3 {
      
				font-size: 30px;
				text-align: left;
				color: gray;
				padding-left: 50px;
				padding-bottom: 40px;
			}

			.th2 {
      
				font-weight: 200;
				margin-left: 20px;
				width: 550px;
				height: 60px;
				padding-left: 10px;
				border-radius: 10px;
				font-size: 35px;
				opacity: 0.4;
				border: 1px solid #E0E0E0;
			}
			
			.Yan {
      
				font-weight: 200;
				margin-left: 20px;
				width: 320px;
				height: 60px;
				padding-left: 10px;
				border-radius: 10px;
				font-size: 35px;
				opacity: 0.4;
				border: 1px solid #E0E0E0;
			}

			.YanZheng {
      
				background-color: #FFFFFF;
				font-weight: 200;
				margin-left: 10px;
				width: 220px;
				height: 70px;
				border-radius: 10px;
				font-size: 25px;
			}

			.th3 {
      
				margin-left: 90px;
				width: 650px;
				height: 80px;
				padding-left: 10px;
				border-radius: 10px;
				font-size: 40px;
				opacity: 0.4;
				background: #BDCEFC;
				color: white;
				font-weight: 700;
			}

			.YueDu {
      
				padding-top: 30px;
				text-align: center;
				font-size: 20px;
				padding-bottom: 20px;
			}

			.Choose {
      
				width: 18px;
				height: 18px;
			}
			a{
      
				text-decoration: none;
			}
			.KeFu a {
      
				text-decoration: none;
				color: white;
			}

			.BaiDu {
      
				position: absolute;
				left: 200px;
				top: 150px;
			}

			.Text h1 {
      
				position: absolute;
				left: 300px;
				top: 500px;
				color: white;
				font-size: 130px;

			}

			.Text h2 {
      
				position: absolute;
				left: 350px;
				top: 720px;
				color: white;
				font-size: 50px;
				letter-spacing: 3.81px;
				font-weight: 300;
			}
			.KeFu{
      
				position: absolute;
				left: 150px;
				top: 1420px;
				color: white;
				font-size: 30px;
				letter-spacing: 3.81px;
				font-weight: 300;
			}
		style>
	head>
	<body>
		<div id="box">

			<div id="Nei">
				<div>
					<h1>欢迎注册h1>
					<h3>已有账号?<a href="">登录a>h3>
				div>
				<div>
					<label for="用户名" class="th1">用户名label>
					<input class="th2" type="text" id="用户名" placeholder="请设置用户名" />
				div>
				<div>
					<label for="手机号" class="th1">手机号label>
					<input class="th2" type="text" id="手机号" placeholder="可用于登录和找回密码" />
				div>
				<div>
					<label for="密码" class="th1">密 码label>
					<input class="th2" type="password" id="密码" placeholder="请设置登录密码" />
				div>
				<div>
					<label for="验证码" class="th1">验证码label>
					<input type="text" class="Yan" placeholder="请输入验证码" />
					<input class="YanZheng" type="button" value="获取验证码" />
				div>
				<div>
					<input type="button" value="注册" class="th3" />
				div>

				<div class="YueDu">
					<input type="checkbox" class="Choose" /> 阅读并接受<a href="">《百度用户协议》a><a href="">《百度隐私权保护声明》a>
				div>
			div>
			<div class="BaiDu"><img src="img/baidu.png" />div>
			<div class="Text">
				<h1>用科技h1>
				<h2>让复杂的世界更简单h2>
			div>
			<div>
				<div class="KeFu"><a href="http://www.baidu.com">帮助中心a> | <a href="http://www.baidu.com"><img src="img/service-2x.png"/>a>div>
			div>
		div>
	body>
html>

实现效果

你可能感兴趣的:(CSS,html,css)