index.css
/*通用设置*/
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{
margin: 0px;
padding: 0px;
}
/*去除ul中li左边的圆点*/
ul{
list-style: none;
}
body{
background: url("../images/apple.jpg");
/*图像跟随屏幕变化*/
background-size: cover;
}
/*--------------头部--------------------*/
#header{
background: rgb(241,241,241);
/*阴影*/
box-shadow: 0px 1px 10px black;
height: 30px;
line-height: 30px;
}
#header .header-left{
display: inline-block;
}
#header .header-left li{
display: inline-block;
margin: 0px 6px;
font-size: 16px;
}
#header .header-left li:hover{
cursor: pointer;
}
#header .header-right{
float: right;
}
#header .header-right li{
display: inline-block;
margin: 0px 6px;
font-size: 16px;
}
#header .header-right li:hover{
cursor: pointer;
}
/*--------------中间内容--------------------*/
#content .file{
display: block;
width: 60px;
margin-left: 20px;
margin-top: 40px;
}
#content .file img{
width: 60px;
height: 60px;
}
#content .file p{
color: #ffffff;
text-align: center;
}
/*--------------尾部--------------------*/
#footer{
height: 70px;
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
}
#footer .dock{
width: 70%;
height: 100%;
line-height: 60px;
background-color: #ddd;
display: inline-block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
opacity: 0.8;
}
#footer .dock ul{
display: inline-block;
}
#footer .dock img{
width: 50px;
height: 50px;
}
#footer .dock ul li{
float: left;
margin: 0px 10px;
/*过渡的时间 效果*/
-webkit-transition: 0.25s linear;
}
#footer .dock ul li:hover{
/*参照*/
-webkit-transform-origin:bottom center;
/*形变*/
-webkit-transform:scale(0.6);
}
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>小码哥桌面</title>
<link href="bootsrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--头部-->
<div id="header">
<!--头部左边-->
<ul class="header-left">
<li class="glyphicon glyphicon-apple apple"></li>
<li>WebStorm</li>
<li>文件</li>
<li>编辑</li>
<li>显示</li>
<li>前往</li>
<li>帮助</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">
<p>我的作品</p>
</div>
<div class="file">
<p>你懂得</p>
</div>
<div class="file">
<p>我的作品</p>
</div>
</div>
<!--尾部内容-->
<div id="footer">
<div class="dock">
<ul>
<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>
<li><a href="#"></a> </li>
</ul>
</div>
</div>
</body>
</html>
