CSS之浮动、定位篇
标签： CSS之浮动、定位篇 Html/CSS博客 51CTO博客
2023-07-21 18:24:29 56浏览
之前讲述了css的一些基础效果，但仅使用前面讲解的知识无法灵活的对页面的样式进行布局显示，因为之间的都是在默认文档流中进行设置，要么只能从左到右，要么就只能从上到下依次排列，显然远远满足不了实际地需要。今天讲解的浮动和定位会给我们提供一种新的方法。本次主要通过实现一个网页布局来进行详细的解读，本次的页面效果图如下：
接下来就从上往下逐层分析，首先第一行有一张图片和欢迎登录文字组成，由于p标签包裹文字独占一行，要让文字和图片一起放在右边就需要让p标签设置float左浮动，但如果只给文字设置浮动就会导致文字在最左边，达不到目标，所以为了最终的效果需要把图片也设置成float左浮动，并让文字的line-height行高等于图片的高度，实现文字的居中显示，最后设置一定的外边距即可。
第二部分是一张背景图片横向铺满，该背景图片设置在单独的盒子中，但由于第一行的部分进行了浮动设置，脱离了文档流，这里就需要设置一下清除浮动，让背景图片留在下方，并设置盒子的大小同照片的高度相同，这样背景图片就设置完成。
比较复杂和重点的是在右边的登录框的制作上，首先把整个登录框看成一个盒子，在这个大盒子中再把每一行看成一个整体小盒子。现在从外到内一一实现，对整个登录框设置宽度，并把背景颜色设置为白色，使用position: absolute绝对定位的方式让登录框移动到对应位置，此处的绝对定位的参照物是之前设置的相对定位的背景图片来移动的。
处理好整体位置后，就该实现框里的内容了，登录框第一行不属于表单的实现，直接使用文字加图片加超连接，设置京东会员为float左浮动，设置立即注册和图标整体float右浮动，并把a标签的默认样式去除并设置新的颜色，最后设置与下行的间距。
用户名和密码的输入框使用表单中的input标签设置不同的类型，用户名框设置属性为text，密码框设置属性为password,并在之前引入对应的图片，由于前一行设置了浮动，所以为了不影响正常效果也要使用clear清除浮动，对用户名这行的盒子设置高度，同图片的高度相同，由于图片和文本框默认并未对齐，所以要让图片和文本都左浮动脱离文档流对齐，并设置文字颜色。同理密码框也是同样实现。
再下一行就比较简单了设置一下字体大小，让忘记密码右浮动就可以，最后是登录按钮设置颜色和宽度为100%并去除边框样式对按钮的效果影响。
最后是页末导航和版权标注，主要是要实现居中显示的效果，页末导航内容使用无序列表来实现，让里面的li标签全左浮动让其全排列在一行显示，并根据最后一行的大盒子进行绝对定位实现居中的效果，版权标注也是使用定位来实现的。
案例参考代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.img1 {
float: left;
margin-left: 30px;
}
.p1 {
float: left;
line-height:60px;
}
#box3 {
position: relative;
background-color:red ;
background: url("img/banner.png") no-repeat;
background-size: cover;
clear: both;
height:475px;
}
#box4 {
padding: 20px;
width: 300px;
background-color: white;
position: absolute;
top: 40px;
right: 150px;
}
#box4 > p {
float: left;
}
.box5 {
float: right;
}
#box4 a {
text-decoration: none;
color: red;
}
.box5 {
margin-bottom: 20px;
}
.login {
clear: both;
}
.username {
margin-bottom: 20px;
height: 38px;
}
.username > img {
float:left
}
.username > input{
height: 36px;
float:left;
outline: none;
color: darkgray;
}
.password{
margin-bottom: 20px;
height: 38px;
}
.password > img {
float:left
}
.password > input {
height: 36px;
float:left;
outline: none;
}
.info {
font-size: 10px;
}
.info span{
float: right;
}
.submit {
width: 100%;
height:30px;
background-color: orangered;
border: none;
}
#box6 {
position: relative;
}
#box6 ul {
list-style: none;
height: 15px;
position: absolute;
left:20%;
margin: 30px 0;
}
#box6 li {
float: left;
margin-right: 30px;
line-height: 15px;
font-size: 12px;
}
.foot {
position: absolute;
left:40%;
margin: 80px 0;
font-size: 12px;
height: 10px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<img class="img1" src="img/logo.png"/>
<p class="p1">欢迎登录</p>
</div>
<div id="box3">
<div id="box4">
<p>京东会员</p>
<div class="box5">
<img src="img/icon5.jpg"/>
<a href="#">立即注册</a>
</div>
<form action="" method="post" class="login">
<div id="" class="username">
<img src="img/icon1.jpg"/>
<input type="text" value="邮箱/用户名/已验证手机" placeholder="邮箱/用户名/已验证手机"/>
</div>
<div class="password">
<img src="img/icon2.jpg"/>
<input type="text" value=""/>
</div>
<div class="info">
<input type="checkbox" name="" id="" value="" />自动登录
<span>忘记密码?</span>
</div>
<input class="submit" type="submit" name="" id="" value="登录" />
</form>
</div>
</div>
<div id="box6">
<ul>
<li>关于我们 |</li>
<li>联系我们 |</li>
<li>人才招聘 |</li>
<li>商家入驻 |</li>
<li>广告服务 |</li>
<li>手机京东 |</li>
<li>友情链接 |</li>
<li>销售联盟 |</li>
<li>京东社区 |</li>
<li>京东公益 |</li>
<li>English Site</li>
</ul>
<div class="foot">Copyright?2004-2017 京东JD.com 版权所有</div>
</div>
</div>
</body>
</html>
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
展开评论
