##盒子模型
- 网页上的每一个标签都是一个盒子
- 每个盒子都有四个属性
内容（content）
盒子里装的东西
网页中通常是指文字和图片
填充（padding,内边距）
怕盒子里装的东西损坏，添加的泡沫或者其他辅料
边框：盒子本身
边界(margin,外边距)
盒子摆放的时候不能全部堆在一起
image.png
image.png
IE盒子模型
image.png
内容（content）- 属性
| 属性 | 描述 |
|---|---|
| height | 设置元素高度 |
| max-height | 设置元素最大高度 |
| max-width | 设置元素最大宽度 |
| min-height | 设置元素最小高度 |
填充(padding 内边距) - 属性
image.png
示例：
padding: 10px 5px 15px 20px;
上内边距 10px
右内边距 5px
下内边距 15px
左内边距 20px
padding: 10px 5px ;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
padding: 10px 5px 15px;
上内边距 10px
右内边距和左内边距是5px
下内边距是15px
padding: 10px;
所有4个内边距都是10px；
边框(border) - 属性
image.png
边界(margin, 外边距) - 属性
image.png
边界(margin, 外边距)- 属性
示例
margin： 10px 5px 15px 20px;
上外边距是10px
右外边距是5px
下外边距是15px
左外边距是 20px
margin： 10px 5px ;
上外边距和下外边距是10px
右外边距和左外边距是5px
margin： 10px 5px 15px
上外边距是 10px
右外边距和左外边距是5px
下外边距是15px
margin： 10px;
所有4个外边距都是10px
CSS布局
- 默认情况下，所有的网页标签都在标签流布局中
- 从上到下， 从左到右
- 脱离标准流的方法有
- float属性
- position属性和left，right，top，bottom属性
CSS布局- float属性
- float属性的常用取值
- left： 脱离标准流，浮动在父标签的最左边
- right： 脱离标准流，浮动在父标签的最右边
CSS布局- position属性
image.png
>>>>仿写一个Mac桌面>>>
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0;
margin:0;
}
a{
color: black;
}
ul{
list-style: none;
}
body{
background: url("../images/apple.jpg");
/*尺寸*/
background-size: cover;
}
/*头部*/
#header{
background-color: rgba(241,241,241,0.8);
height: 38px;
line-height: 38px;
width: 100%;
/*定位*/
position: fixed;
top: 0;
font-size: 18px;
}
.header-left li{
float: left;
/*设置左边距*/
margin-left: 8px;
}
.header-right{
float: right;
}
.header-right li{
/*设置右边距*/
margin-right: 8px;
}
#content{
padding-top: 100px;
color: white;
/*text-align: center;*/
}
#content .file{
margin-left: 50px;
/*text-align: center;*/
}
#content img{
width: 60px;
height: 60px;
}
/*尾部*/
#footer{
/*background-color: red;*/
height: 60px;
line-height: 60px;
width: 100%;
position: fixed;
bottom: 0;
}
.dock{
height: 100%;
width: 60%;
background: url("../images/dock_bg.png");
/*居中*/
margin:0 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: center;
}
#footer .dock img{
width: 50px;
height: 50px;
margin:0 5px;
}
#footer .dock ul{
display: inline-block;
}
#footer .dock li{
float: left;
/*动画的过度效果*/
-webkit-transition: linear 0.25s;
-moz-transition: linear 0.25s;
-ms-transition: linear 0.25s;
-o-transition: linear 0.25s;
transition: linear 0.25s;
}
#footer .dock li:hover{
/*动画方向*/
-webkit-transform-origin: center bottom;
/*设置动画的效果*/
-webkit-transform: scale(1.5);
}
+++++++++++++++++++++++++++++
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mac桌面</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header">
<ul class="header-left">
<li><a href="#" class="glyphicon glyphicon-apple"></a></li>
<li><a href="#">520IT</a></li>
<li><a href="#">文件</a></li>
<li><a href="#">编辑</a></li>
<li><a href="#">显示</a></li>
<li><a href="#">帮助</a></li>
</ul>
<ul class="header-right">
<li class="glyphicon glyphicon-volume-up"></li>
<li class="glyphicon glyphicon-align-left"></li>
<li class="glyphicon glyphicon-question-sign"></li>
<li class="glyphicon glyphicon-leaf"></li>
</ul>
</div>
<!--中间内容-->
<div id="content">
<div class="file">
<img src="images/file.png">
<p>mac</p>
</div>
<div class="file">
<img src="images/file.png">
<p>mac</p>
</div>
<div class="file">
<img src="images/file.png">
<p>mac</p>
</div>
</div>
<!--尾部-->
<div id="footer">
<div class="dock">
<ul>
<li><a href="#"><img src="images/zurb-icon.png"></a></li>
<li><a href="#"><img src="images/linkedin-icon.png"></a> </li>
<li><a href="#"><img src="images/notable-icon.png"></a> </li>
<li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="images/facebook-icon.png"></a> </li>
<li><a href="#"><img src="images/google-icon.png"></a> </li>
<li><a href="#"><img src="images/notable-icon.png"></a> </li>
<li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="images/facebook-icon.png"></a> </li>
<li><a href="#"><img src="images/google-icon.png"></a> </li>
</ul>
</div>
</div>
</body>
</html>
效果图
image.png
网友评论