定位
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©Baidu</p>
</div>
<div id="registered">
<h1 class="hytitle">欢迎注册</h1>
<p class="hytitle1">已有帐号? <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">密 码</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;
}