实验1：老师给的图片材料忽略喵~自己设计的有图片喵~
。。。省略
实验2：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>icafe咖啡馆</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <link rel="icon" type="image/x-icon" href="/images/icon.png"> 8 </head> 9 <body> 10 11 <div align="center"> 12 <p> <img src="images/banner.jpg"></p> 13 14 <p> 15 <a href="#">咖啡MENU</a>| 16 <a href="cook.html">咖啡COOK</a>| 17 <a href="#">咖啡STORY</a>| 18 <a href="#">咖啡NEWS</a>| 19 <a href="#">咖啡PARTY</a> 20 </p> 21 <div id="content"> 22 <h1>咖啡MENU</h1> 23 24 <!-- 在此处插入表格 --> 25 <table> 26 <tr> 27 <td class="tablehead"> 拿铁 卡布奇诺 摩卡 浓缩咖啡</td> 28 </tr> 29 <tr> 30 <td> Latte Cappuccino Mocha Espresso</td> 31 </tr> 32 <tr> 33 <td>大杯 35 35 35 30</td> 34 </tr> 35 <tr> 36 <td>中杯 30 30 30 25</td> 37 </tr> 38 <tr> 39 <td >小杯 25 25 25 20</td> 40 </tr> 41 </table> 42 <h2>拿铁Caffè Latte</h2> 43 <p><img src="images/Latte.jpg" alt=""></p> 44 <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。<br>品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。</p> 45 46 <h2>卡布奇诺Cappuccino</h2> 47 <p><img src="images/Cappuccino.jpg" alt=""></p> 48 <p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。</p> 49 50 <h2>摩卡Caffè Mocha</h2> 51 <p><img src="images/Mocha.jpg" alt=""></p> 52 <p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。<br>寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。</p> 53 54 <h2>浓缩咖啡Espresso</h2> 55 <p><img src="images/Espresso.jpg" alt=""></p> 56 <p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p> 57 </div> 58 59 60 <p><a href="http://baike.baidu.com/link?url=Uc-SacWkaTo18FNeZzrqzUCNweNLTtrb7VkXIkjdtv0LD5mQZyFEBNl5usDtR8142SwspduucVEeZwMru3a8iNzDbeZSDc-pUgiVOlE4VWm">咖啡豆</a></p> 61 </div> 62 </div> 63 </body> 64 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>icafe咖啡馆</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <link rel="icon" type="image/x-icon" href="/images/icon.png"> 8 </head> 9 <body> 10 11 <div align="center"> 12 <p> <img src="images/banner.jpg"></p> 13 <p> 14 <a href="menu.html">咖啡MENU</a>| 15 <a href="#">咖啡COOK</a>| 16 <a href="#">咖啡STORY</a>| 17 <a href="#">咖啡NEWS</a>| 18 <a href="#">咖啡PARTY</a> 19 </p> 20 21 <h1>咖啡COOK</h1> 22 23 <h2>器具</h2> 24 <p><img src="images/cooker.jpg" alt=""></p> 25 <p>咖啡器具，指磨制、煮制、品尝咖啡的器具。<br />较有特色的咖啡器具有蒸汽加压咖啡器、虹吸咖啡器具、<br />浓缩咖啡器、直桶形的浓缩咖啡器等。<br />是咖啡文化的重要组成部分。</p> 26 <h2>调查</h2> 27 <form action=""> 28 喜欢的品牌<input type="text"> 29 产地 30 <select name="" id=""> 31 <option value="">英国</option> 32 <option value="">美国</option> 33 <option value="">德国</option> 34 <option value="">日本</option> 35 <option value="">中国</option> 36 </select><br> 37 喜欢的原因 38 <input type="checkbox"> 外观 39 <input type="checkbox"> 功能 40 <input type="checkbox"> 价格<br> 41 <textarea rows="10" cols="30">其他原因... </textarea><br> 42 打分 43 <input type="radio" name="score">1 44 <input type="radio" name="score">2 45 <input type="radio" name="score">3 46 <input type="radio" name="score">4 47 <input type="radio" name="score">5 <br> 48 <input type="submit"> 49 <input type="reset"> 50 </form> 51 52 </div> 53 </body> 54 </html>
1 *{font-family: Microsoft YaHei;} 2 3 Body{background:url("images/background.gif")} 4 h1{letter-spacing: 2px;} 5 h2{color: #ccc;font-size: 22px;} 6 p{color: #ccc;font-size: 16px;line-height: 2em;} 7 a{text-decoration: none;} 8 a:hover{font-size: 110%;font-color:orange;} 9 10 .tablehead{ 11 font-weight:bolder; 12 } 13 tr:nth-child(odd){ 14 background-color: orange; 15 }
实验3：有的css代码想要实现却没有达到预期效果
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>北京林业大学欢迎您~❤</title> 6 <link rel="stylesheet" href="style.css"> 7 <link rel="icon" type="image/x-icon" href="images/icon.png"> 8 </head> 9 <body> 10 <div id="header"> 11 <img src="images/3.jpg" alt="北京林业大学校徽" width="69" height="50" align="middle"> 12 <p id="h11">北京林业大学</p> 13 <h5>Beijing Forestry University</h5> 14 <h3>知山知水,树木树人</h3> 15 </div> 16 <div id="nav"> 17 <ul> 18 <li><a href="#">首页</a></li> 19 <li><a href="http://www.bjfu.edu.cn/xxgk/index.html">学校概况</a></li> 20 <li><a href="http://www.bjfu.edu.cn/xxgk/1002.html">管理机构</a></li> 21 <li><a href="http://www.bjfu.edu.cn/xxgk/1001.html">院部设置</a></li> 22 <li><a href="http://zsb.bjfu.edu.cn/f">招生就业</a></li> 23 <li><a href="http://xinqiao.bjfu.edu.cn/">学生天地</a></li> 24 <li><a href="http://international.bjfu.edu.cn/">国际合作</a></li> 25 <li><a href="http://nic.bjfu.edu.cn/">信息资源</a></li> 26 </ul> 27 </div> 28 <div id="section1"> 29 <ul> 30 <li><a href="#">快速访问</a></li> 31 <li><a href="#">校园新闻</a></li> 32 <li><a href="#">校园焦点</a></li> 33 <li><a href="#">学院动态</a></li> 34 <li><a href="#">科研学术</a></li> 35 </ul> 36 </div> 37 38 39 <div id="section2"> 40 <table> 41 <tr> 42 <td>北京林业大学是教育部直属、教育部与国家林业和草原局共建的全国重点大学。<br/> 43 学校办学历史可追溯至1902年的京师大学堂农业科林学目。1952年全国高校院系调整，北京农业大学森林系与河北农学院森林系合并，成立北京林学院。</td> 44 </tr> 45 <tr> 46 <td> 1956年，北京农业大学造园系和清华大学建筑系部分并入学校。</td> 47 </tr> 48 <tr> 49 <td>1985年更名为北京林业大学。1996年被国家列为首批“211工程”重点建设的高校。</td> 50 </tr> 51 <tr> 52 <td>2000年经教育部批准试办研究生院，2004年正式成立研究生院。2005年获得本科自主选拔录取资格。</td> 53 </tr> 54 <tr> 55 <td> 2008年，学校成为国家“优势学科创新平台”建设项目试点高校。2010年获教育部和国家林业局共建支持。</td> 56 </tr> 57 <tr> 58 <td>2011年与其他10所行业特色高校参与组建北京高科大学联盟。</td> 59 </tr> 60 <tr> 61 <td>2012年，牵头成立中国第一个林业协同创新中心——“林木资源高效培育与利用”协同创新中心。</td> 62 </tr> 63 <tr> 64 <td> 2016年，学校“林木分子设计育种高精尖创新中心”入选北京市第二批高精尖创新中心。</td> 65 </tr> 66 <tr> 67 <td> 2017年，学校入选世界一流学科建设高校行列，林学和风景园林学两个学科入围“双一流”建设学科名单。</td> 68 </tr> 69 <tr> 70 <td> 2018年，我校有5个学科进入ESI全球排名前1%。</td> 71 </tr> 72 </table> 73 </div> 74 <div id="footer"> 75 <p align="center">代码版权所有copyright</p> 76 <a href="https://github.com/greenaway07">181002222</a> 77 78 </div> 79 </body> 80 </html>
1 /*全局清空*/ 2 3 *{ 4 padding: auto; 5 margin: 0; 6 font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STXingkai,STHeiti,MingLiu,FZYaoti; 7 } 8 9 body{ 10 background-image: url("images/timg.jpg"); 11 } 12 13 h3{ 14 text-align: center; 15 color: #009966; 16 font-family: FZShuTi; 17 } 18 h5{ 19 text-align: center; 20 color: lawngreen; 21 font-family: cursive; 22 } 23 24 a:hover{ 25 color: green; 26 } 27 a{ 28 font-family: FZYaoti; 29 text-decoration: none; 30 color: darkgreen; 31 } 32 <style> 33 #header { 34 background-color:#66ccff; 35 color:palegreen; 36 text-align:center; 37 padding:5px; 38 float: left; 39 } 40 #nav { 41 line-height:30px; 42 background-color:#66ccff; 43 height:30px; 44 width:1200px; 45 padding:15px; 46 margin: 15px; 47 } 48 #section1 { 49 line-height:30px; 50 height:320px; 51 width:120px; 52 float: left; 53 padding:15px; 54 } 55 #section2 { 56 height:350px; 57 width:900px; 58 float: left; 59 padding:10px; 60 background-image: url("images/2.jpg"); 61 margin: 30px; 62 } 63 td{ 64 font-size: 20px; 65 text-align: center; 66 font-family: FZShuTi; 67 } 68 p{ 69 font-family: STXingkai; 70 color: white; 71 text-align: center; 72 } 73 74 #footer a{ 75 font-family: STXingkai; 76 color: white; 77 text-align: center; 78 } 79 80 #footer a:hover{ 81 color: gray; 82 } 83 #nav li{ 84 float: left; 85 list-style: none; 86 font-size: 22px; 87 font-style: normal; 88 padding: 30px 30px; 89 background-image: url("images/1.png"); 90 color: lawngreen; 91 } 92 #section1 li { 93 list-style: none; 94 font-size: 14px; 95 background-image: url("images/1.png") ; 96 97 } 98 99 #footer { 100 background-color:black; 101 color:white; 102 clear: both; 103 text-align:center; 104 padding:5px; 105 } 106 #h11{ 107 font-size: 55px; 108 text-align: center; 109 font-family: STXingkai; 110 color: green; 111 font-weight: bolder; 112 } 113 </style> 114 115 tr:nth-child(odd){ 116 background-color: rgba(200,200,200,0.5); 117 }
中间的懒得更了。直接放大作业代码。
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>❤~Web前端开发爱好者聚集地~❤</title> <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/x-icon" href="images/icon.png"> </head> <body> <div id="container"> <div id="header"> <img src="images/1.jpg" alt="web" width="69" height="50" align="middle"> <div class="masked"> <h1>Web前端开发爱好者聚集地</h1> </div> <h5>A gathering place for Web front-end development enthusiasts❤</h5> <h3>Talk is cheap,show me your code.</h3> </div> <div id="nav"> <ul> <li><a href="http://www.w3school.com.cn/html/index.asp"> W3schoolHTML学习</a></li> <li><a href="http://www.w3school.com.cn/css/index.asp"> W3schoolCSS学习</a></li> <li><a href="http://www.w3school.com.cn/css3/index.asp"> W3schoolCSS3学习</a></li> <li><a href="http://www.icourse163.org/course/BJFU-1003382003"> 北林Web前端开发MOOC</a></li> </ul> </div> <div id="section1"> <br> <li><a href="index.html"> 首页</a></li></br> <li><a href="page1.html"> web前端开发书籍介绍</a></li></br> <li><a href="page2.html"> web前端开发资源下载</a></li></br> </div> <div id="section2"> <br><br> <h2>简介</h2> <br><br> <div id="pic"> <img src="images/index.jpg" alt="web" height="350px" width="450px" > </div> <p>Web前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案， 来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。</p><br> <p>在互联网的演化进程中，网页制作是Web1.0时代的产物， 早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。</p> <br> <br> <br> <div class="lala"> <a href="https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/10009024?fr=aladdin">==>了解更多关于web前端开发的介绍<==</a> </div> </div> <div id="footer"> <p align="center">author</p> <a href="https://github.com/greenaway07">181002222</a> </div> </div> </body> </html>
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 </head> 9 <body> 10 <div id="container"> 11 <div id="header"> 12 <img src="images/1.jpg" alt="web" width="69" height="50" align="middle"> 13 <div class="masked"> 14 <h1>Web前端开发书籍介绍</h1> 15 </div> 16 <h5>A gathering place for Web front-end development enthusiasts❤</h5> 17 <h3>Talk is cheap,show me your code.</h3> 18 </div> 19 <div id="nav"> 20 <ul> 21 <li><a href="http://www.w3school.com.cn/html/index.asp"> W3schoolHTML学习</a></li> 22 <li><a href="http://www.w3school.com.cn/css/index.asp"> W3schoolCSS学习</a></li> 23 <li><a href="http://www.w3school.com.cn/css3/index.asp"> W3schoolCSS3学习</a></li> 24 <li><a href="http://www.icourse163.org/course/BJFU-1003382003"> 北林Web前端开发MOOC</a></li> 25 </ul> 26 </div> 27 28 <div id="section1"> 29 <br> 30 <li><a href="index.html"> 首页</a></li></br> 31 <li><a href="page1.html"> web前端开发书籍介绍</a></li></br> 32 <li><a href="page2.html"> web前端开发资源下载</a></li></br> 33 </div> 34 35 <div id="section2"> 36 <div id="partI"> 37 <div class="book"> 38 <div class="bpic"> 39 <img src="images/book1.jpg" style="height:380px;300px" alt=""> 40 </div> 41 <div class="text"> 42 <h1>JavaScript 语言精粹(修订版)</h1> 43 <p> 44 对于前端刚工作的人和前端刚入门的人来说，需要反复阅读和理解。 45 这本书可以深入理解 JavaScript 的特性，写出高质量的代码，适 46 合有 JavaScript 语言基础的人学，不适合于作为零基础入门的教材 47 </p> 48 </div> 49 </div> 50 <div class="book"> 51 <div class="bpic"> 52 <img src="images/book2.jpg" style="height:380px;300px" alt=""> 53 </div> 54 <div class="text"> 55 <h1>数据结构与算法 JavaScript 描述</h1> 56 <p> 57 专注前端开发，又可以学习数据结构和算法用 JavaScript 描述的数据结构与算法书。 58 这书讲的都是数据结构和算法基础知识，比如字典、集合、二叉树、排序算法等。 59 </p> 60 </div> 61 </div> 62 <div class="book"> 63 <div class="bpic"> 64 <img src="images/book3.jpg" style="height:380px;300px" alt=""> 65 </div> 66 <div class="text"> 67 <h1>CSS揭秘</h1> 68 <p> 69 这本书是一书很好的 CSS 实战性教程。每一节都是先给出一个“难题”，再给出一个或多个“方案”， 70 并会作详细解释。 71 </p> 72 </div> 73 </div> 74 </div> 75 <div id="shopping"> 76 <div id="thing"> 77 <a href="#">立即购买JavaScript 语言精粹(修订版) </a> 78 </div> 79 <div id="thing"> 80 <a href="#">立即购买数据结构与算法 JavaScript 描述 </a> 81 </div> 82 <div id="thing"> 83 <a href="#">立即购买CSS揭秘 </a> 84 </div> 85 </div> 86 <div id="partII"> 87 <div class="book"> 88 <div class="bpic"> 89 <img src="images/book4.jpg" style="height:380px;300px" alt=""> 90 </div> 91 <div class="text"> 92 <h1>JavaScript 高级程序设计第3版</h1> 93 <p> 94 这本书可以系统性地学习一遍 JavaScript， 95 而将来既可以作为参考用，对于面试也是能派上用场的。 96 </p> 97 </div> 98 </div> 99 <div class="book"> 100 <div class="bpic"> 101 <img src="images/book5.jpg" style="height:380px;300px" alt=""> 102 </div> 103 <div class="text"> 104 <h1>ECMAScript 6入门</h1> 105 <p> 106 讲的是 ES6 标准下的新语法，如果你用过 Vue、React等前端框架，你就知道 ES6 标准的 JavaScript 107 语法无处不在。 108 </p> 109 </div> 110 </div> 111 <div class="book"> 112 <div class="bpic"> 113 <img src="images/book6.jpg" style="height:380px;300px" alt=""> 114 </div> 115 <div class="text"> 116 <h1>JavaScript 函数式编程</h1> 117 <p> 118 这本对书函数式编程的相关概念和编程思想都讲的比较好也容易理解，从中你可以学习到纯函数、高阶函数、 119 柯里化（Currying） 等知识。 120 </p> 121 </div> 122 </div> 123 <div id="thing"> 124 <a href="#">立即购买JavaScript 高级程序设计第3版 </a> 125 </div> 126 <div id="thing"> 127 <a href="#">立即购买ECMAScript 6入门 </a> 128 </div> 129 <div id="thing"> 130 <a href="#">立即购买JavaScript 函数式编程 </a> 131 </div> 132 </div> 133 </div> 134 </div> 135 136 <div id="footer"> 137 <p align="center">author</p> 138 <a href="https://github.com/greenaway07">181002222</a> 139 140 </div> 141 </div> 142 </body> 143 </html>
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="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>
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>下载页面</title> 6 <span style="font-size:18px;"> </span> 7 <span style="font-size:24px;"><meta http-equiv="refresh" content="3.1415926;URL=page2.html"> </span> 8 </head> 9 <body> 10 <div class="container"> 11 <p>下载成功，请回到先前页面获取解压缩密码。3.1415926秒后将自动跳转，若页面无响应，请点击此处</p> 12 <a href="page2.html">返回</a> 13 </div> 14 </body> 15 </html>
1 /*全局清空*/ 2 /*三个页面的总设计*/ 3 *{ 4 padding: auto; 5 margin: 0; 6 font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STXingkai,STHeiti,MingLiu,FZYaoti; 7 } 8 9 10 /*字体附加*/ 11 @font-face{ 12 font-family: mini; 13 src:url('fonts/tmini.ttf'); 14 } 15 @font-face{ 16 font-family: song; 17 src:url('fonts/tsong.ttf'); 18 } 19 @font-face{ 20 font-family: wind; 21 src:url('fonts/twind.ttf'); 22 } 23 @font-face{ 24 font-family: shanhu; 25 src:url('fonts/tshanhu.ttf'); 26 } 27 /*页面元素设置*/ 28 29 body{ 30 background-image: url("images/background.jpg"); 31 background-position: bottom; 32 } 33 h2{ 34 text-align: center; 35 color: white; 36 font-family: song; 37 font-weight: bold; 38 } 39 h3{ 40 text-align: center; 41 color: #33ccff; 42 font-family: FZShuTi; 43 } 44 h5{ 45 text-align: center; 46 color: #66ffcc; 47 font-family: cursive; 48 } 49 50 a:hover{ 51 color: yellow; 52 } 53 54 a{ 55 font-family: wind; 56 text-decoration: none; 57 color: #33ffff; 58 } 59 60 p{ 61 font-family: mini; 62 color: white; 63 text-align: center; 64 font-size: 26px; 65 } 66 67 <style> 68 /*头部*/ 69 #header { 70 background-color:#66ccff; 71 color:palegreen; 72 text-align:center; 73 padding:5px; 74 float: left; 75 } 76 /*横向导航栏*/ 77 #nav { 78 line-height:30px; 79 background-color:rgba(0,0,0,0.6); 80 height:90px; 81 width:1200px; 82 padding:15px; 83 margin: 15px; 84 float: left; 85 border-radius: 30px; 86 } 87 88 #nav li{ 89 border:5px dotted; 90 border-radius:24px; 91 border-color: #99ffff; 92 float: left; 93 list-style: none; 94 font-size: 22px; 95 font-style: normal; 96 font-weight: bold; 97 padding: 30px 30px; 98 background-image: url("images/2.jpg"); 99 color: lawngreen; 100 } 101 #pic{ 102 position: relative; 103 float:right; 104 } 105 /*纵向导航栏*/ 106 #section1 { 107 line-height:30px; 108 height:320px; 109 width:120px; 110 float: left; 111 padding:15px; 112 } 113 114 #section1 li { 115 border:3px double; 116 border-radius:20px; 117 border-color: #00ffcc; 118 list-style: none; 119 font-size: 21px; 120 background-image: url("images/2.jpg") ; 121 align:center; 122 } 123 124 #section1 li a{ 125 font-family: wind; 126 } 127 /*页面主要显示内容，index=简介，page1书籍介绍,page2资源下载*/ 128 #section2 { 129 height:850px; 130 width:900px; 131 float: left; 132 padding:30px; 133 background-color: rgb(20,150,200,0.7); 134 margin: 30px; 135 } 136 137 /*页脚*/ 138 #footer a{ 139 font-family: STXingkai; 140 color: white; 141 text-align: center; 142 } 143 144 #footer a:hover{ 145 color: gray; 146 } 147 148 149 #footer { 150 background-color:black; 151 color:#ccffff; 152 clear: both; 153 text-align:center; 154 padding:5px; 155 } 156 /*page1书籍介绍兼具购物*/ 157 #shopping{ 158 margin: 10px; 159 top: 5px; 160 background-color: rgba(0, 77, 99, 0.6); 161 } 162 #shopping ,#thing a{ 163 font-family: mini; 164 font-size: 15px; 165 font-weight: bold; 166 color: yellow; 167 168 } 169 170 #shopping ,#thing a:hover{ 171 color: orange; 172 } 173 #thing{ 174 margin:5px 23px 5px 23px ; 175 float: left; 176 } 177 /*解压缩密码-随机验证码*/ 178 #mima{ 179 height: 180px; 180 width: 200px; 181 float: right; 182 } 183 /*资源下载*/ 184 .tools{ 185 height: 230px; 186 width: 450px; 187 float: left; 188 background-color: rgba(30, 70, 80, 0.6); 189 } 190 .tpic{ 191 height: 40px; 192 width: 125px; 193 float:right; 194 overflow: visible; 195 position:sticky; 196 } 197 .intro{ 198 height: 400px; 199 width: 400px; 200 } 201 .intro h1{ 202 font-family: cursive; 203 color: #66ffff; 204 text-align: center; 205 } 206 .intro p{ 207 font-size: 20px; 208 } 209 .intro a{ 210 float: right; 211 font-size: 20px; 212 color:#33ff99; 213 font-family: song; 214 font-weight: bold; 215 } 216 .intro a:hover{ 217 color: orange; 218 } 219 /*资源访问链接*/ 220 #linkk{ 221 height: 18px; 222 width: 200px; 223 overflow: visible; 224 border: 3px dotted; 225 float: right; 226 background-color: #6699cc 227 } 228 229 #linkk a{ 230 font-family:shanhu; 231 font-weight: bold; 232 border-color: white; 233 border-radius: 20px; 234 font-size: 15px; 235 } 236 .lala{ 237 height: 100px; 238 width: 400px; 239 float:right; 240 position: absolute; 241 bottom:0 px; 242 } 243 .book{ 244 width: 300px; 245 height: 380px; 246 float:left; 247 position: relative; 248 overflow: hidden; 249 } 250 .bpic{ 251 width: 300px; 252 height:380px; 253 float: right; 254 position: relative; 255 transition: all 3s linear; 256 } 257 .text{ 258 width: 300px; 259 height:380px; 260 position: absolute; 261 right:300px; 262 transition: all 0.5s linear; 263 background-color: rgba(50,100,200,0.77); 264 } 265 .text h1{ 266 color: yellow; 267 text-align: center; 268 font-family: song; 269 } 270 .text p{ 271 color: white; 272 margin-top: 50px; 273 margin-left: 50px; 274 margin-right: 50px; 275 font-size: 21px; 276 text-align: center; 277 278 } 279 .book:hover .text{ 280 right: 0px; 281 } 282 /*大标题颜色变化滚动*/ 283 .masked h1{ 284 display: block; 285 width: 1250px; 286 height: 40px; 287 background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, 288 #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db); 289 text-shadow: text-shadow:0 0 3px yellow; 290 color: transparent; 291 -webkit-text-fill-color: transparent; 292 -webkit-background-clip: text; 293 background-size: 200% 100%; 294 animation: masked-animation 4s infinite linear; 295 font-size: 45px; 296 text-align: center; 297 font-family: STXingkai; 298 font-weight: bolder; 299 } 300 @keyframes masked-animation { 301 0% { 302 background-position:0 0; 303 } 304 100% { 305 background-position: -100% 0; 306 } 307 } 308 309 /*page2资源下载 验证码*/ 310 .code{ 311 background-color: #66ccff; 312 color:blue; 313 padding:11px 33px; 314 letter-spacing:11px; 315 font-weight:bolder; 316 } 317 318 </style>
图片字体材料：
链接：https://pan.baidu.com/s/1g5sggQI9ORDGyg0dpxKoWQ
提取码：219d
复制这段内容后打开百度网盘手机App，操作更方便哦