2019BJFU 网站设计(孙俏-web前端开发)实验代码-181002222
Posted greenaway07
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2019BJFU 网站设计(孙俏-web前端开发)实验代码-181002222相关的知识，希望对你有一定的参考价值。
实验1：老师给的图片材料忽略喵~自己设计的有图片喵~
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <!--页面标题显示 高等数学--> 6 <title>高等数学</title> 7 </head> 8 9 <body> 10 <div align="center"><img src="images/school.jpg" alt="北京林业大学校徽" align="middle"></div> 11 <!--页面导航栏，包含两个页面--> 12 <hr> 13 <div> 14 <style class=""> 15 </style> 16 <em>导航栏</em> <pre> </pre> 17 <a href="index1.html">高等数学主页</a> <pre> </pre> 18 <a href="index2.html">高等数学参考书排行榜</a> 19 </div> 20 <!--两个页面可以互相跳转，这是第一个页面--> 21 <hr> 22 <!--文字需要有标题段落，包括高等数学的介绍和相关知识，少量文字--> 23 <h1 align="center">高等数学介绍 </h1> 24 25 <p> 26 指相对于初等数学而言，数学的对象及方法较为繁杂的一部分。<br /> 27 广义地说，初等数学之外的数学都是高等数学，也有将中学较深入的代数、几何以及简单的集合论初步、逻辑初步称为中等数学的，将其作为中小学阶段的初等数学与大学阶段的高等数学的过渡。<br> 28 通常认为，高等数学是由微积分学，较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科。<br> 29 主要内容包括：数列、极限、微积分、空间解析几何与线性代数、级数、常微分方程。<br> 30 工科、理科、财经类研究生考试的基础科目。<br /> 31 <h3 align="center">课程特点</h3> 32 <p> 33 作为一门基础科学，高等数学有其固有的特点，这就是高度的抽象性、严密的逻辑性和广泛的应用性。抽象性和计算性是数学最基本、最显著的特点，有了高 34 度抽象和统一，我们才能深入地揭示其本质规律，才能使之得到更广泛的应用。<br> 35 严密的逻辑性是指在数学理论的归纳和整理中，无论是概念和表述，还是判断和推理，都要运用逻辑的规则，遵循思维的规律。 36 所以说，数学也是一种思想方法，学习数学的过程就是思维训练的过程。<br> 37 人类社会的进步，与数学这门科学的广泛应用是分不开的。尤其是到了现代，电子计算机的出现和普及使得数学的应用领域更加拓宽，现代数学正成为科技发展的强大动力，同时也广泛和深入地渗透到了社会科学领域。<br> 38 </p> 39 </p> 40 <!--添加一幅图片--> 41 42 <!--添加一个列表--> 43 <i>copyright 网页制作代码归 北京林业大学 181002222 连月菡所有</i> 44 </body> 45 </html>
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>高等数学</title> 6 </head> 7 8 <body> 9 <em>导航栏</em> <pre> </pre> 10 <a href="index1.html">高等数学主页</a> <pre> </pre> 11 <a href="index2.html">高等数学参考书排行榜</a> 12 <!--两个页面可以互相跳转，这是第二个页面--> 13 14 <ol> 15 <li><a href="https://detail.tmall.com/item.htm?id=535513100101&ali_refid=a3_430672_1006:1105100649:N:lNlT23KkXm5SeWDZhFi/6fiSpCptELIQ:3d24e336307f680dd8b4298c3ec60bc3&ali_trackid=1_3d24e336307f680dd8b4298c3ec60bc3&spm=a2e15.8261149.3223322.3"> 同济大学高等数学7版同步辅导含答案</a></li> 16 <li><a href="https://detail.tmall.com/item.htm?id=529340998356&ali_refid=a3_430672_1006:1110341150:N:lNlT23KkXm5SeWDZhFi/6fiSpCptELIQ:5f6a6feafbd72ee1db6b2733f7de4a3e&ali_trackid=1_5f6a6feafbd72ee1db6b2733f7de4a3e&spm=a2e15.8261149.3223322.4">武忠祥《高等数学辅导讲义》</a></li> 17 <li><a href="https://detail.tmall.com/item.htm?id=562084571902&ali_refid=a3_430673_1006:1102938647:N:lNlT23KkXm5SeWDZhFi/6fiSpCptELIQ:4bd65d014fd131b67542ded12cdc3682&ali_trackid=1_4bd65d014fd131b67542ded12cdc3682&spm=a2e15.8261149.07626516002.9">星火高数辅导书高等数学</a></li> 18 </ol> 19 20 21 <div align="center"><img src="images/book.jpg" alt="高数课本" align="middle"></div> 22 23 <i>copyright 网页制作代码归 北京林业大学 181002222 连月菡所有</i> 24 </body> 25 </html>
实验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 Bodybackground:url("images/background.gif") 4 h1letter-spacing: 2px; 5 h2color: #ccc;font-size: 22px; 6 pcolor: #ccc;font-size: 16px;line-height: 2em; 7 atext-decoration: none; 8 a:hoverfont-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
以上是关于2019BJFU 网站设计(孙俏-web前端开发)实验代码-181002222的主要内容，如果未能解决你的问题，请参考以下文章