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>
