默认情况下,所有的网页标签都在标准流布局中
从上到下,从左到右
脱离标准流的方法有
float属性
position属性和left、right、top、bottom属性
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性规定 |
fixed | 生成绝对的定位元素,相对于浏览器窗口进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”属性规定 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20”会向元素的LEFT位置添加20像素 |
static | 默认值。没有定位,元素出现在正常的流中 |
inherit | 规定应该从父元素继承position属性的值 |
再次呈现修改过后的页面代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" >
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="content">
<!--LOGO-->
<div class="logo">
<img src="image/bd_logo1.png">
</div>
<!--导航-->
<div class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#" class="active">网页</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">百科</a></li>
<li><a href="#">文库</a></li>
<li><a href="#">更多>></a></li>
</ul>
</div>
<!--搜索框-->
<div class="search-container">
<div class="search">
<input>
<button>百度一下</button>
</div>
</div>
</div>
</body>
</html>
下面是样式配置文件
body{
background-image:url("../image/bg.jpg");
background-size: 100% 750px;
}
.content{
width: 700px;
margin:50px auto 0px;
}
.content .logo{
text-align: center;
}
.content .logo img{
width:270px;
height:129px;
}
.content .nav{
text-align: center;
}
.content .nav ul{
list-style: none; /*去除左边的圆点*/
display:inline-block;
padding-left: 0px;
}
.content .nav ul li{
float:left;
margin-left:5px;
margin-right:5px;
}
.content .nav ul li a{
color:white;
font-size:16px;
}
.content .nav ul li a.active{
text-decoration :none; /*去除文件底部的下划线*/
color:blue;
}
.content .search-container{
text-align:center;
}
.content .search-container .search{
clear:both;
height:40px;
display:inline-block;
}
.content .search-container .search input{
float:left;
width:500px;
height:100%;
font-size:17px;
padding-left: 10px;
float:left;
padding-top:0px;
padding-buttom:0px;
border:0px;
}
.content .search-container .search input:focus{
border:0px;/*去除文本框蓝色边框*/
}
.content .search-container .search button{
float:left;
width: 80px;
height: 100%;
background-color: #3388FF;
color: white;
font-size: 15px;
border:0px;
float:left;
padding-left:10px;
padding-right:10px;
}
.content .search-container .search button:hover{
cursor:pointer; /*鼠标的光标变为手指*/
}
/* 非块级元素水平居中:设置父标签的text-align:center;*/
/* 块级元素居中,设置自己的margin;0px auto;*/