<!Doctype html>
2 <html>
3 <head>
4 <title>栗果原创知识分享网</title>
5 <meta charset="utf-8">
6 <meta content="栗果网是属于个人运营的一个网站，主要用于集中的分享一些个人的文档，
7 ，代码，并且还包括学术探讨，还有一些好看的电影及音乐，可以让你在无聊的时候得到放松。
8 栗果网欢迎你的加入">
9 <script type="text/javascript"src="C:\Users\liupeng\Desktop\active.js"></script>
10 <link rel="stylesheet"type="text/css"href="C:\Users\liupeng\Desktop\css\style.css">
11 </head>
12 <body>
13 <header>
14 <span id="logo"><img src="C:\Users\liupeng\Desktop\images\logo.png"></span>
15 <h1>栗果网，一个有趣的分享平台</h1>
16 </header>
17 <nav>
18 <ul class="nav">
19 <li id="li1">
20 <p>代码托管</p>
21 <ul id="ul1">
22 <li><a href="https://github.com/GitActivecode?tab=repositories">git hub</a></li>
23 <li><a href="https://gitee.com/">码云</a></li>
24 </ul>
25 </li>
26 <li id="li2">
27 <p>原创分享</p>
28 <ul id="ul2">
29 <li><a href="http://www.cnblogs.com/activecode/">博客</a></li>
30 </ul>
31 </li>
32 <li id="li3">
33 <p>资源下载 </p>
34 <ul id="ul3">
35 <li><a href="https://pan.baidu.com/">百度云链接</a></li>
36 </ul>
37 </li>
38 </ul>
39 </nav>
40
41 <div class="content">
42 <p>
43 <h1>栗果网知识分享平台</h1>
44 <h2>栗果网的创建者是刘鹏
45 栗果网是属于个人运营的一个网站，主要用于集中的分享一些个人的文档，
46 ，代码，并且还包括学术探讨，还有一些好看的电影及音乐，可以让你在无聊的时候得到放松。
47 栗果网欢迎你的加入<br/></h2>
48
49 <a href="#"><img src="C:\Users\liupeng\Desktop\images\beauty.png"alt=""></a>
50 <a href="#"><img src="C:\Users\liupeng\Desktop\images\fish.png"alt=""></a>
51 <a href="#"><img src="C:\Users\liupeng\Desktop\images\light.png"alt=""></a>
52 </p>
53 </div>
54 <footer>
55 <h2>版权所有 (c)<h3 id="h3"></h3> 栗果网</h2>
56 <ul>
57 <li><a href="https://i.qq.com/?s_url=http%3A%2F%2Fuser.qzone.qq.com%2F3522265957%2Finfocenter"><img src="C:\Users\liupeng\Desktop\images\qq.png"alt="QQ登录"></a></li>
58 <li><a href="https://wx2.qq.com/"><img src="C:\Users\liupeng\Desktop\images\wechat.png"alt="微信登录"></a></li>
59 <li><a href="https://weibo.com/"><img src="C:\Users\liupeng\Desktop\images\weibo.png"alt="微博登录"></a></li>
60 <li><a href="https://www.alipay.com/"><img src="C:\Users\liupeng\Desktop\images\zhifubao.png"alt="支付宝登录"></a></li>
61 <li><a href="https://www.taobao.com/"><img src="C:\Users\liupeng\Desktop\images\taobao.png"alt="淘宝登录"></a></li>
62 <li><a href="http://www.cnblogs.com/activecode/"><img src="C:\Users\liupeng\Desktop\images\bokeyuan.png"alt="博客园登录"></a></li>
63 </ul>
64 </footer>
65 <script>
66 function myFunction(x,y){
67 var oLi=document.getElementById(x);
68 var oUl=document.getElementById(y);
69 oLi.onmouseover=function(){
70 oUl.style.display=\'block\';
71
72 }
73 oLi.onmouseout=function(){
74 oUl.style.display=\'none\';
75
76 }
77 }
78 myFunction(\'li1\',\'ul1\');
79 myFunction(\'li2\',\'ul2\');
80 myFunction(\'li3\',\'ul3\');
81 function footerdate(){
82 var today=new Date();
83 var nodes=document.getElementById("h3");
84 nodes.innerHTML=today.getFullYear();
85 }
86 footerdate();
87
88
89 </script>
90
91 </body>
92 </html>
---------------------css部分--------------------------------------------------------------------------------------
1 body{
2 background-color:white;
3 }
4 header{
5 border-bottom-color:darkgray;
6 border-bottom-style: solid;
7 border-bottom-width: 5px;
8 }
9 header img{
10 width: 100px;
11 height: 100px;
12 }
13 header span{
14 position: absolute;
15 top:20px;
16 left:300px;
17 }
18 header h1{
19 text-align: center;
20 font-family: Georgia;
21 font-size: 50px;
22 color: brown;
23 text-shadow: 3px 4px 5px green;
24 }
25 .nav{
26 width: 1000px;
27 height: 200px;
28 background:darkgrey;
29 margin: auto;
30 text-align: center;
31 line-height: 40px;
32 border-radius: 2%;
33 }
34
35 nav p{
36 font-style: oblique;
37 font-weight: 700;
38 word-spacing: 3;
39 word-break: inherit;
40 }
41 nav a{
42 font-family:Cambria;
43 font-size: 30px;
44 }
45 nav a:vlnink{
46 color:black;
47 text-decoration: none;
48 font-size: 30px;
49 }
50 nav a:link{
51 color: blue;
52 text-decoration: none;
53 }
54 nav a:hover{
55 text-shadow: 3px 4px 5px green;
56
57 }
58 nav ul,li{
59 list-style-type: none;
60 }
61 .nav li{
62 width: 150px;
63 height:60px;
64 background:blanchedalmond;
65 }
66 .nav >li{
67 float: left;
68 margin-right: 150px;
69 margin-left: 50px;
70 position: relative;
71 }
72
73 .nav >li:last-child{
74 margin-right: 100px;
75 }
76 .nav li ul{
77 position: absolute;
78 left:0px;
79 top:50px;
80 display: none;
81 }
82 .content{
83 border-left: 5px solid darkgray;
84 border-right: 5px solid darkgrey;
85 border-bottom:solid 5px darkgray;
86 width: 800px;
87 height: 600px;
88 margin: auto;
89 }
90 .content >h1,h2{
91 text-align: center;
92 }
93 .content > a>img{
94 width: 150px;
95 height: 150px;
96 margin-left:60px;
97 margin-top: 50px;
98 transition: all 3s ease-in ;
99 }
100 .content>a>img:hover{
101 opacity: 0.3;
102 transform:rotate(60deg);
103 transform: rotate(-60deg);
104 box-shadow: 3px 4px 5px green;
105 }
106 footer{
107 height: 200px;
108 margin: auto ;
109 text-align: center;
110 line-height: 40px;
111 }
112 footer h2{
113 text-align: center;
114
115 }
116 footer img{
117 width: 50px;
118 height: 60px;
119 float: left;
120 margin-right: 100px;
121 margin-left: 100px
122
123 }
124