<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"?/>
<meta?name="viewport"?content="initial-scale=1,?user-scalable=0,?minimal-ui">
<link?rel="stylesheet"?href="css/index.css"?/>
<script?type="text/javascript"?src="js/index.js"></script>
<title></title>
</head>
<body>
<header>網(wǎng)頁頭部</header>
<nav>
<div?id="computer"?onclick="sziitjx_timeout()">
<img?src="img/laptop.png">
<!-- <h1?id=>修電腦</h1>-->
</div>
</nav>
<nav>
<div?id="mobile"?onclick="sziitsw_timeout()">
<img?src="img/mobile1.png">
<!--<h1>修手機</h1>-->
</div>
</nav>
<footer><h3>腳部</h3></footer>
</body>
</html>?html,
?body?{
? width:?100%;
? height:?100%;
? margin:?0px;
? padding:?0px;
? ?color:?white;
? ?text-align:center
?}
?
?header?{
? background-color:?#4CAF50;
? height:?10%
?}
?
?nav?{
? height:?40%;
? width:?100%;
?}
?
?footer{
? background-color:?#;
? height:?10%;
? background-color:?#FFC90E;
?}
?
?#computer?{
? width:?100%;
? height:?100%;
? background-color:?#F36F36;
? margin:?auto;
?
?}
?
?#mobile?{
? width:?100%;
? height:?100%;
? background-color:?#00A89C;
?}
nav?{
????
????-webkit-transition:?width?2s,?height?2s,?-webkit-transform?2s;?/*?For?Safari?3.1?to?6.0?*/
????transition:?width?2s,?height?2s,?transform?2s;
????/*background-color:?#F36F36;*/
}
nav:hover?{
???
????-webkit-transform:?rotate(180deg);?/*?Chrome,?Safari,?Opera?*/
????transform:?rotate(180deg);
}footer中不寫標(biāo)簽則全部貼合在一起
footer 中加了標(biāo)簽就會和上一個div中間出現(xiàn)了白色間隔
和你一起閃耀到世界盡頭
2016-08-27 12:18:22
