1.常用页面布局
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
body{
margin: 0px;
/* margin: 0px; 网页内容距离浏览器上下左右的距离都是0像素*/
/* margin: 5px 10px; 网页内容距离浏览器上下的距离为5,左右的距离都是10像素*/
/* margin: 0px 5px 10px; 网页内容距离浏览器上为0,下为10,左右的距离都是5像素*/
/* margin: 0px 1px 2px 3px; 网页内容距离浏览器上右下左(顺时针)分别为0,1,2,3像素*/
padding:10px;
/*页面边距为10像素*/
font-size: 12px;
/*最常用的字体大小为12像素,小一点为9像素,大一点为14像素*/
color:red;
/*设置页面字体颜色*/
background-color: #ffffee;
/*页面背景颜色*/
overflow: hidden;
/*去掉页面的滚动条*/
}
</style>
</head>
<body>
css常用布局<p>
css常用布局<p>
css常用布局<p>
css常用布局<p>
css常用布局<p>
css常用布局<p>
</body>
</html>
2.div照片布局
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#img{
position: realtive;
background-image: url("../img/beauty.jpg");
width: 750px;
height: 1125px;
}
#name{
position: absolute;
left:111px;
top: 30px;
}
</style> </head>
<body>
<div id="img">
<div id="name">足球宝贝!</div>
</div>
</body>
这里name是img的孩子,用的position是的绝对位置,但img是相对位置,所以这里将文字显示到了图片上面.
3.div float 和postion
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
body {
background-color: #ff33ee;
}
#father{
border:1px;
}
#son1{
position: relative;
right: -30%;
}
/* #son1{
position: absolute;
right: 10px;
} */
</style> </head>
<body>
<div id="father">
<div id="son1">aaa</div>
<div id="son2">bbb</div>
<div id="son3">ccc</div>
</div>
</body>
</html>
注:布局分为相对布局和绝对布局,相对布局实质上还是会占用空间,占用原有一行.绝对布局则是直接替换掉其中一行.
float布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style type="text/css">
body {
background-color:#ff33ee;
}
#father{
border:1px;
}
#son1{
float:left;
}
#son2{
float:left;
}
#son3{
float:left;
}
#clear{
clear: both;
}
</style> </head>
<body>
<div id="father">
<div id="son1">aaa</div>
<div id="son2">bbb</div>
<div id="son3">ccc</div>
<div id="clear"></div>
<div id="son4">ddd</div> </div>
</body>
</html>
注:div默认是行显示,float的作用是将原本在同一列的div显示到同一行.
这里定义clear是为了清除上面的浮动对后面son4的影响,让son4换行显示.