㈠HTML部分代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>读书编程笔记</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet" href="index.css"> 8 <link rel="stylesheet" href="//at.alicdn.com/t/font_1645816_1nr1zte6d1j.css"> 9 <link rel="shortcut icon" type="image/x-icon" href="img/favicon1.ico"> 10 </head> 11 <body> 12 <!--头部区域--> 13 <header class="header"> 14 <div class="container clearfix"> 15 <!--左边区域--> 16 <div class="read left"> 17 <a href=""><span>读书编程笔记</span></a> 18 </div> 19 20 <!--中间区域--> 21 <div class="search left "> 22 <div> 23 <ul class="right-menu-list left clearfix"> 24 <li class="left"> 25 <a href=""> 26 <span>课程</span> 27 </a> 28 </li> 29 <li class="left"> 30 <a href=""> 31 <span>个人中心</span> 32 </a> 33 </li> 34 <li class="left"> 35 <a href=""> 36 <span>刷题</span> 37 </a> 38 </li> 39 </ul> 40 41 <form class="right"> 42 <input type="text" class="txt" placeholder="找课程"> 43 <button class="btn right"> 44 <span>GO</span> 45 </button> 46 </form> 47 </div> 48 </div> 49 50 <!--右边区域--> 51 <div class="denglu right"> 52 <a href=""> 53 <span>登录</span> 54 <span>/</span> 55 <span>注册</span> 56 </a> 57 </div> 58 </div> 59 </header> 60 61 <!--页头--> 62 <nav class="nav"> 63 <h1>读书编程笔记-让学过的东西不再忘记！</h1> 64 <h3>最短的学习时间，最高效的学习方法。</h3> 65 </nav> 66 67 <!--导航栏--> 68 <div class="banner"> 69 <div class="banner-list"> 70 <ul class="clearfix"> 71 <li> 72 <a href="" class="first iconfont icon-kechengguanli"></a> 73 <span>课程</span> 74 </li> 75 76 <li> 77 <a href="" class="second iconfont icon-gerenzhongxin-zhong"></a> 78 <span>个人中心</span> 79 </li> 80 81 <li> 82 <a href="" class="third iconfont icon-kaodianshuati"></a> 83 <span>刷题</span> 84 </li> 85 86 <li> 87 <a href="" class="fouth iconfont icon-ceshi"></a> 88 <span>复习测试</span> 89 </li> 90 </ul> 91 </div> 92 </div> 93 94 <!--主体内容--> 95 <div class="content"> 96 <!--网站介绍--> 97 <div class="section"> 98 <div class="main"> 99 <!--标题--> 100 <div class="title"> 101 <h2 class="wang">网站介绍</h2> 102 </div> 103 104 <!--上半部分--> 105 <div class="top"> 106 <p>读书编程笔记是一个<span class="stuty">让学过的东西不再忘记的视频学习网站。</span>主要先将课程知识进行总结，然后配合<span class="quxian">艾宾浩斯遗忘曲线等各种复习学习算法，</span>以及其它各种智能化的刷题算法，来最大化的提高学习效率、节约时间、降低学习难度，最终达到让学过的知识不再忘记的效果。<a href="">本网站使用教程（必看）</a></p> 107 </div> 108 109 <!--中间部分--> 110 <div class="middle"> 111 <ul class="clearfix"> 112 <li> 113 <a href="" class="one iconfont icon-fangzi"></a> 114 <div>课程</div> 115 <p>大量前端、后端、算法、大数据、人工智能等精品课程</p> 116 </li> 117 <li> 118 <a href="" class="two iconfont icon-xiti"></a> 119 <div>习题</div> 120 <p>每个视频都配备了习题，那些习题就是对视频知识最好的总结</p> 121 </li> 122 <li> 123 <a href="" class="three iconfont icon-zhineng"></a> 124 <div>智能</div> 125 <p>艾宾浩斯遗忘曲线算法，以及其它各种智能化的刷题算法</p> 126 </li> 127 <li> 128 <a href="" class="four iconfont icon-kuaijiefangbian"></a> 129 <div>方便</div> 130 <p>电脑、平板、手机等多种终端完美支持，随时随地学习</p> 131 </li> 132 <li> 133 <a href="" class="five iconfont icon-shijian"></a> 134 <div>时间</div> 135 <p>最大化的节约时间</p> 136 </li> 137 <li> 138 <a href="" class="six iconfont icon-xiaoshuai"></a> 139 <div>效率</div> 140 <p>让学过的知识不再忘记</p> 141 </li> 142 </ul> 143 </div> 144 145 <!--下半部分--> 146 <div class="bottom"> 147 <p> 148 大家在本网站刷视频的过程中，最好配合各种算法刷题同时进行，方能真正领悟学过不忘的精髓。 本网站会陆续推出各种前端、后端、算法、大数据、人工智能等精品课程， 后续也会推出各种娱乐化的学习方式，让你在玩中就把知识学了。</p> 149 </div> 150 </div> 151 </div> 152 153 <!--站长介绍--> 154 <div class="pp section"> 155 <div class="main"> 156 <!--标题--> 157 <div class="title"> 158 <h2 class="z">站长介绍</h2> 159 </div> 160 161 <!--中间内容--> 162 <div class="jie clearfix"> 163 <div class="zzl left"> 164 <img src="img/fry.png" alt=""> 165 </div> 166 167 <div class="zzr left"> 168 <h4>范仁义</h4> 169 <p>西南大学本科毕业，专业第一，每年国奖，加拿大留学交换，建模（美赛二等奖，国赛特等奖）。 喜欢挑战，酷爱难的东西。每日反思，已有7年。每天可工作学习15小时。可实现一切网站功能效果。 第一份工作：华东师大图书馆自动化部。第二份工作：香港教育大学MIT部门。 对各种前端后端、算法、大数据、人工智能等都比较精通。 后续会在本网站上依次推出这些课程。</p> 170 <p>技术博客：<a href="">https://www.cnblogs.com/Renyi-Fan</a></p> 171 <ul> 172 <li> 173 <span class="dui iconfont icon-zhengque1"></span> 174 <span>效率奇高</span> 175 </li> 176 <li> 177 <span class="dui iconfont icon-zhengque1"></span> 178 <span>注重反思</span> 179 </li> 180 <li> 181 <span class="dui iconfont icon-zhengque1"></span> 182 <span>喜欢挑战</span> 183 </li> 184 </ul> 185 </div> 186 </div> 187 188 </div> 189 </div> 190 191 <!--热门课程推荐--> 192 <div class="section"> 193 <div class="main"> 194 <!--标题--> 195 <div class="title"> 196 <h2 class="k">热门课程推荐</h2> 197 </div> 198 199 <div class="tpn clearfix"> 200 <div class="z1 left"> 201 <img src="img/cover1.png " alt=""> 202 <div class="f1"> 203 <span>范仁义</span> 204 </div> 205 <div class="f2"> 206 <span>1课时</span> 207 </div> 208 <div class="f3"> 209 <a href="">本网站使用教程</a> 210 </div> 211 <div class="f4"> 212 <span> 213 <a href="" class="iconfont icon-zan"> 31</a> 214 <a href="" class="iconfont icon-xihuan"> 25</a> 215 <a href="" class="iconfont icon-bofang"> 755</a> 216 </span> 217 </div> 218 </div> 219 220 <div class="z1 left"> 221 <img src="img/cover2.png " alt=""> 222 <div class="f1"> 223 <span>范仁义</span> 224 </div> 225 <div class="f2"> 226 <span>2课时</span> 227 </div> 228 <div class="f3"> 229 <a href="">html5课程</a> 230 </div> 231 <div class="f4"> 232 <span> 233 <a href="" class="iconfont icon-zan"> 3</a> 234 <a href="" class="iconfont icon-xihuan"> 1</a> 235 <a href="" class="iconfont icon-bofang"> 1372</a> 236 </span> 237 </div> 238 </div> 239 240 <div class="z1 left"> 241 <img src="img/cover3.png " alt=""> 242 <div class="f1"> 243 <span>范仁义</span> 244 </div> 245 <div class="f2"> 246 <span>3课时</span> 247 </div> 248 <div class="f3"> 249 <a href="">css3课程</a> 250 </div> 251 <div class="f4"> 252 <span> 253 <a href="" class="iconfont icon-zan"> 3</a> 254 <a href="" class="iconfont icon-xihuan"> 1</a> 255 <a href="" class="iconfont icon-bofang"> 1086</a> 256 </span> 257 </div> 258 </div> 259 260 <div class="z1 left"> 261 <img src="img/cover4.png " alt=""> 262 <div class="f1"> 263 <span>范仁义</span> 264 </div> 265 <div class="f2"> 266 <span>4课时</span> 267 </div> 268 <div class="f3"> 269 <a href="">javascript课程</a> 270 </div> 271 <div class="f4"> 272 <span> 273 <a href="" class="iconfont icon-zan"> 1</a> 274 <a href="" class="iconfont icon-xihuan"> 1</a> 275 <a href="" class="iconfont icon-bofang"> 1053</a> 276 </span> 277 </div> 278 </div> 279 </div> 280 281 </div> 282 </div> 283 284 <!--联系我们--> 285 <div class="bb section"> 286 <div class="main"> 287 <!--标题--> 288 <div class="title"> 289 <h2 class="l">联系我们</h2> 290 </div> 291 292 <div class="wm clearfix"> 293 <div class="yx left"> 294 <i class="f5 left iconfont icon-mail-copy"></i> 295 <div class="zb1"> 296 <sapn>站长邮箱</sapn> 297 </div> 298 <div class="zb2"> 299 <a href="">404006308@qq.com</a> 300 </div> 301 </div> 302 303 <div class="jlq left"> 304 <i class="f5 left iconfont icon-QQ1"></i> 305 <div class="zb1"> 306 <span>QQ交流群</span> 307 </div> 308 <div class="yb2"> 309 <span>942327638</span> 310 </div> 311 </div> 312 </div> 313 </div> 314 </div> 315 </div> 316 317 <!--页脚区域--> 318 <footer class="footer"> 319 <div> 320 <p>Copyright © 2019 fanrenyi.com 鄂ICP备 19019547号-1 读书编程笔记</p> 321 </div> 322 </footer> 323 </body> 324 </html>