css简单练习4

最新推荐文章于 2021-02-24 20:01:42 发布

crraxx

最新推荐文章于 2021-02-24 20:01:42 发布

阅读量256

点赞数 1

分类专栏：网页文章标签： css html

本文链接：https://blog.csdn.net/crraxx/article/details/109367137

版权

网页专栏收录该内容

18 篇文章 5 订阅

订阅专栏

css简单练习4

用css所学知识完成百度注册界面并进行位置摆放

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#box {
				width: 2880px;
				height: 1600px;
				background-image: url(./img/reg_bg_min.jpg);
				background-repeat: no-repeat;
			}

			.b1 {
				background-color: #f0f1f4;
				opacity: 0.9;
				position: relative;
				width: 750px;
				height: 900px;
				top: 200px;
				left: 1800px;
				border-radius: 10px;
			}

			.b2 {

				margin-top: 10px;
				width: 500px;
				height: 50px;
				padding-left: 10px;
				font-size: 30px;
				border-radius: 10px;
				border-color: white;
			}

			.b5 div {
				font-size: 40px;
				padding-bottom: 20px;
				padding-left: 50px;
				padding-top: 40PX;
				color: #333;
			}

			.b6 {
				width: 200px;
				height: 50px;
				margin-top: 10px;
				padding-left: 10px;
				font-size: 25px;
				border-radius: 10px;
			}

			.b7 {
				width: 300px;
				height: 50px;
				margin-top: 10px;
				padding-left: 10px;
				font-size: 30px;
				border-radius: 10px;
				border-color: white;
			}

			p {
				font-size: 25px;
				padding-bottom: 40px;
				padding-left: 50px;
				color: #333;
			}

			h2 {
				font-size: 70px;
				padding-top: 20px;
				padding-left: 50px;
				color: #333;
			}

			.b3 {
				opacity: 0.7;
				margin-top: 10px;
				width: 650px;
				height: 80px;
				font-size: 30px;
				border-radius: 20px;
				border-color: white;
				background-color: #bdcefc;
			}

			.b4 {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}

			.b8 {
				font-size: 20px;
				padding-top: 120px;
				padding-left: 120px;
				padding-top: 25PX;
				color: #333;
			}

			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="b1">
				<h2>欢迎注册</h2>
				<p>已有账号？<a href="">登录</a></p>
				<div class="b5">
					<div>用户名:<input type="text" placeholder="请设置用户名" class="b2" /></div>
					<div>手机号:<input type="text" placeholder="可用于登录和找回密码" class="b2" /></div>
					<div>密 &nbsp; 码:<input type="text" placeholder="请设置登录密码" class="b2" /></div>
					<div>验证码:<input type="text" placeholder="输入验证码" class="b7" />
						<input type="button" value="获取验证码" class="b6" /></div>
					<div> <input type="button" value="注册" class="b3" /></div>

				</div>
				<div class="b8"> <input type="checkbox" class="b4" /> 请认真阅读 <a href="">《百度用户协议》</a>及<a href="">
						《百度隐私保护声明》</a> </div>
			</div>
		</div>
	</body>
</html>

运行结果：

在这里插入图片描述

crraxx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
css简单练习4

css简单练习4用css所学知识完成百度注册界面并进行位置摆放代码实现：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0px; padding: 0px; } #box { width: 2880px
复制链接

扫一扫