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换行显示.