盒子模型

hoho_12

于 2016-08-03 17:58:46 发布

阅读量300

点赞数

分类专栏： css 网页设计与制作文章标签： css

本文链接：https://blog.csdn.net/hoho_12/article/details/52106041

版权

网页设计与制作同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				align-self: center;
			}
			
			.input {
				width: 250px;
				height: 30px;
				font-size: 18px;
				padding-left: 20px;
				padding-right: 20px;
				padding-bottom: 7px;
				padding-top: 7px;
				border-width: 1px;
			}
			
			.button {
				width: 294px;
				margin-top: 20px;
				padding: 10px;
				background: dodgerblue;
				border: none;
				font-size: 18px;
				color: white;
			}
			
			#button {
				border: solid;
				border-color: dodgerblue;
				border-width: 1px;
				background: white;
				color: dodgerblue;
			}
			
			h1 {
				font-family: "courier new";
				font-size: 60px;
				color: dodgerblue;
			}
			
			h3 {
				color: grey;
			}
		</style>
	</head>

	<body>
		<div align="center">
			<h1>知乎</h1>
			<h3>与世界分享你的知识，见解</h2>
			<form>
				<input type="text" placeholder="用户名" class="input" /><br />
				<input type="text" placeholder="手机号" class="input" /><br />
				<input type="password" placeholder="密码" class="input" /><br />
				<input type="text" placeholder="验证码" class="input" /><br />

				<input type="submit" value="注册" class="button" /><br />

				<input type="button" value="下载知乎APP" class="button" id="button" />
			</form>
		</div>
	</body>

</html>