1 <!DOCTYPE html>
2 <html lang="en" dir="ltr">
3 <head>
4 <meta charset="utf-8">
5 <title>❤~Web前端开发资源下载~❤</title>
6 <link rel="stylesheet" href="style.css">
7 <link rel="icon" type="image/x-icon" href="images/icon.png">
8 <!--验证码-->
9 <script language="javascript" type="text/javascript">
10 var code;
11 function createRandCode(){
12 code = new Array();
13 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
14
15 for(var i=0;i<4;i++) {
16 var charIndex = Math.floor(Math.random()*36);
17 code +=selectChar[charIndex];
18 }
19 if(code.length != 4){
20 createRandCode();
21 }
22 testnum.innerHTML=code;
23 document.getElementById("testnum").value=code;
24 alert("成功获取验证码！点击OK接收,5分钟内有效");
25 }
26 </script>
27 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
28
29 </head>
30 <body >
31 <div id="container">
32 <div id="header">
33 <img src="images/1.jpg" alt="web" width="69" height="50" align="middle">
34 <div class="masked">
35 <h1>Web前端开发资源下载</h1>
36 </div>
37 <h5>A gathering place for Web front-end development enthusiasts❤</h5>
38 <h3>Talk is cheap,show me your code.</h3>
39 </div>
40 <div id="nav">
41 <ul>
42 <li><a href="http://www.w3school.com.cn/html/index.asp"> W3schoolHTML学习</a></li>
43 <li><a href="http://www.w3school.com.cn/css/index.asp"> W3schoolCSS学习</a></li>
44 <li><a href="http://www.w3school.com.cn/css3/index.asp"> W3schoolCSS3学习</a></li>
45 <li><a href="http://www.icourse163.org/course/BJFU-1003382003"> 北林Web前端开发MOOC</a></li>
46 </ul>
47 </div>
48
49 <div id="section1">
50 <br>
51 <li><a href="index.html"> 首页</a></li></br>
52 <li><a href="page1.html"> web前端开发书籍介绍</a></li></br>
53 <li><a href="page2.html"> web前端开发资源下载</a></li></br>
54 </div>
55 <!--
56 文本编辑器下载：atom https://atom.io/
57 sumblime text http://www.sublimetext.com/
58 webstorm http://www.jetbrains.com/webstorm/
59
60 -->
61 <div id="section2">
62 <div class="sources">
63 <!--提示选择需要的资源类型-->
64 <div class="tools">
65 <div class="tpic">
66 <img src="images/atom.jpg" alt="Atom editor" height="40px" width="40px">
67 </div>
68 <div class="intro">
69 <h1>Atom</h1>
70 <p>Atom 是github专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。</p><br>
71 <div id="linkk">
72 <a href="page3.html">立即下载</a>
73 </div>
74 </div>
75 </div>
76 <div class="tools">
77 <div class="tpic">
78 <img src="images/sublime.png" alt="sublime text" width="120px" height="40px">
79 </div>
80 <div class="intro">
81 <h1>Sublime text</h1>
82 <p>Sublime 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等.</p><br>
83 <div id="linkk">
84 <a href="page3.html">立即下载</a>
85 </div>
86 </div>
87 </div>
88 <div class="tools">
89 <div class="tpic">
90 <img src="images/webstorm.jpg" alt="webstorm" width="120px" height="40px">
91 </div>
92 <div class="intro">
93 <h1>Webstorm</h1>
94 <p>WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。</p><br>
95 <div id="linkk">
96 <a href="page3.html">立即下载</a>
97 </div>
98 </div>
99 </div>
100 <div class="tools">
101 <div class="tpic">
102 <img src="images/huaban.jpg" alt="花瓣网" width="120px" height="40px">
103 </div>
104 <div class="intro">
105 <h1>花瓣网</h1>
106 <p>花瓣网是一家“类Pinterest”网站，是一家基于兴趣的社交分享网站，网站为用户提供了一个简单地采集工具，帮助用户将自己喜欢图片重新组织和收藏。</p><br>
107 <div id="linkk">
108 <a href="https://huaban.com/">点击浏览海量美图</a>
109 </div>
110
111 </div>
112 </div>
113 <div class="tools">
114 <div class="tpic">
115 <img src="images/microjs.jpg" alt="microjs" width="120px" height="40px">
116 </div>
117 <div class="intro">
118 <h1>Microjs</h1>
119 <p>常用的JavaScript代码片段搜索：这个网站收集了各种各样的框架和代码，你可以通过下载使用或者借鉴大神的项目是怎么做的，里面还有基础的框架可以参考，你可以借鉴做一个自己的框架，无论是JavaScript框架、CSS框架都行。</p><br>
120 <div id="linkk">
121 <a href="http://microjs.com/">点击浏览</a>
122 </div>
123 </div>
124 </div>
125 <div class="tools">
126 <div class="tpic">
127 <img src="images/github.jpg" alt="github" width="40px" height="40px">
128 </div>
129 <div class="intro">
130 <h1>免费的编程中文书籍索引</h1>
131 <p>国外程序员在 stackoverflow 推荐的程序员必读书籍、stackoverflow上的程序员应该阅读的非编程类书籍、github 上的一个流行的编程书籍索引。</p><br>
132 <div id="linkk">
133 <a href="https://github.com/justjavac/free-programming-books-zh_CN">点击选择书籍</a>
134 </div>
135 </div>
136 </div>
137 </div>
138 <!--下面的shopping 和 thing没有意义，只是装饰排版-->
139 <div id="shopping">
140 <p> </p>
141 </div>
142 <div id="thing">
143
144 </div>
145 <div id="mima">
146 <input type="text" class="code" id="testnum" style="width:88px" onClick="createRandCode();" />
147 <button type="button" onclick="createRandCode();" >点击获取解压缩密码</button>
148 </div>
149 </div>
150 <div id="footer">
151 <p align="center">author</p>
152 <a href="https://github.com/greenaway07">181002222</a>
153
154 </div>
155 </div>
156 </body>
157 </html>
發表於 2019-6-5 22:27:00
