学习前端的第五天，定位，浮动，溢出限制。

最新推荐文章于 2024-08-14 11:57:27 发布

Super@.烨

最新推荐文章于 2024-08-14 11:57:27 发布

阅读量89

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sunliye145/article/details/118443557

版权

本文介绍了如何使用HTML和CSS构建一个百度注册页面，包括页面元素的定位、浮动和溢出限制。页面布局采用了相对定位、绝对定位和静态定位，同时展示了浮动元素、溢出处理和背景图片的使用。通过这个实战案例，读者可以深入理解网页布局的基本原理和技巧。

摘要由CSDN通过智能技术生成

定位

position：；

默认：static静态、relative相对定位、absolute绝对定位、fliex固定定位、sticky粘性定位

浮动

float：；

left左浮动、right右浮动

溢出限制

overflow：；

visable默认值、hidden隐藏、scroll出现滚动条、auto自动

项目实战：

百度注册页面

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度注册</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="logo">
				<img src="./img/baidu.png" />
			</div>
			<div id="title">
				<h1 class="title1">用科技</h1>
				<p class="title2">让复杂的世界更简单</p>
			</div>
			<div id="foot">
				<p class="text">帮助中心</p>
				<span class="iconfont icon-shouye_shugang_shijiantixing"></span>
				<span class="iconfont icon-service"></span>
				<p class="text">2021&copy;Baidu</p>
			</div>
			<div id="registered">
				<h1 class="hytitle">欢迎注册</h1>
				<p class="hytitle1">已有帐号？&nbsp;&nbsp;<a>登录</a></p>
				<div id="form">
					<div class="tipbox">
						<span class="tiptext">用户名</span>
						<input type="text" class="tipinput" placeholder="请设置用户名" />
					</div>
					<div class="tipbox">
						<span class="tiptext">手机号</span>
						<input type="text" class="tipinput" placeholder="可用于登录和找回密码" />
					</div>
					<div class="tipbox">
						<span class="tiptext">密&nbsp;码</span>
						<input type="password" class="tipinput" placeholder="请设置登录密码" />
						<!-- <span class="iconfont icon-weibiaoti-"></span> -->
					</div>
					<div class="tipbox">
						<span class="tiptext">验证码</span>
						<input type="text" class="tipinput huoqu" placeholder="请输入验证码" />
						<button class="huoqubutton">获取验证码</button>
					</div>
					<div class="tipbox zhuce">
						<button type="button">注册</button>
					</div>
					<div class="tipbox xieyi">
						<p>
							<input type="checkbox">同意并接受<a href="">《百度用户协议》</a>及<a href="">《百度隐私权保护申明》</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

css

body {
	margin: 0;
	padding: 0;
	background: url(../img/bg.jpg) no-repeat;
	background-size: 100%;
}
h1,p {
	margin: 0;
	cursor: default;
}
#wrap{
	width: 100%;
	height: 100vh;
	position: relative;
}
#logo {
	width: 120px;
	height: 40px;
	position: absolute;
	left: 60px;
	top: 80px;
}
#logo img {
	width: 100%;
	height: 100%;
}
#title {
	width: 350px;
	height: 100px;
	position: absolute;
	left: 220px;
	top: 320px;
	color: white;
}
#title .title1 {
	font-size: 54px;
}
#title .title2 {
	font-size: 28px;
	letter-spacing: 6px;
}
#foot {
	position: absolute;
	bottom: 50px;
	left: 60px;
	width: 300px;
	height: 30px;
	color: white;
	line-height: 30px;
	opacity: 0.8;
}
#foot .text {
	display: inline-block;
}
#foot .iconfont {
	display: inline-block;
}
#foot .icon-service {
	font-size: 18px;
	margin-right: 20px;
}
#registered {
	width: 400px;
	position: absolute;
	top: 40px;
	right: 160px;
	bottom: 40px;
	background-color: rgba(255,255,255,.8);
	border-radius: 10px;
	padding: 40px;
}
#registered .hytitle {
	font-size: 34px;
	margin-left: 25px;
}
#registered .hytitle1 {
	margin-left: 25px;
}
#registered p {
	font-size: 14px;
	opacity: 0.7;
	margin-top: 5px;
}
#registered a {
	text-decoration: none;
	color: #2E58FF;
}
#form {
	width: 100%;
	margin-top: 50px;
}
#form .tipbox {
	margin: 0 auto;
	height: 36px;
	padding: 15px 0;
	text-align: center;
}
#form .tiptext {
	font-size: 14px;
	display: inline-block;
	width: 50px;
	line-height: 36px;
	opacity: 0.8;
	font-family: "宋体";
	color: #585A58;
}
#form .tipinput {
	height: 100%;
	width: 300px;
	outline: none;
	text-indent: 15px;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 5px;
}
#form .huoqu {
	width: 200px;
}
#form .zhuce {
	text-align: center;
}
#form .zhuce button {
	background-color: #BDCEFC;
	border-radius: 25px;
	color: white;
	font-size: 18px;
	border: none;
	height: 50px;
	width: 100%;
}
#form .tipbox .huoqubutton {
	width: 95px;
	height: 40px;
	border: none;
	background-color: #FFFFFF;
	font-family: "宋体";
	font-size: 12px;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: 5px;
}
#form .xieyi p {
	/* text-align: right; */
	line-height: 20px;
	font-size: 12px;
	margin: 0;
}
#form .tipinput:focus {
	border: 1px solid #2E58FF;
	border-radius: 5px;
}
#form .huoqubutton:hover{
	border: 1px solid #2E58FF;
	color: #2E58FF;
}

Super@.烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端的第五天，定位，浮动，溢出限制。

定位position：；默认：static静态、relative相对定位、absolute绝对定位、fliex固定定位、sticky粘性定位浮动float：；left左浮动、right右浮动溢出限制overflow：；visable默认值、hidden隐藏、scroll出现滚动条、auto自动项目实战：百度注册页面html<!DOCTYPE html><html> <head> <meta c
复制链接

扫一扫