网页项目源码笔记 

 


<!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  


 


 




 







        

            posted on 
2018-08-11 16:12 
activecode 
阅读(553) 
评论(0) 
编辑 
收藏 
举报

        

    











    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    





	






	
		
		

导航