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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</pre>
17       <a href="index1.html">高等数学主页</a>  <pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>

index1

 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</pre>
10     <a href="index1.html">高等数学主页</a>  <pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>

index2

实验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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拿铁&nbsp;&nbsp;&nbsp;卡布奇诺&nbsp;&nbsp;&nbsp;摩卡&nbsp;&nbsp;&nbsp;浓缩咖啡</td>
28   </tr>
29   <tr>
30     <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Latte&nbsp;Cappuccino&nbsp;Mocha&nbsp;Espresso</td>
31   </tr>
32   <tr>
33     <td>大杯&nbsp;35&nbsp;&nbsp;&nbsp;&nbsp;35&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;35&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30</td>
34   </tr>
35   <tr>
36     <td>中杯&nbsp;30&nbsp;&nbsp;&nbsp;&nbsp;30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25</td>
37   </tr>
38   <tr>
39     <td >小杯&nbsp;25&nbsp;&nbsp;&nbsp;&nbsp;25&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>

menu

 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>

cook

 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 }

style.css

实验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>

index

  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 }

style.css

原文地址:https://www.cnblogs.com/greenaway07/p/10982351.html

时间: 2024-11-05 17:07:06

2019BJFU 网站设计(孙俏-web前端开发)实验代码-181002222的相关文章

web前端开发与页面设计的协作、区别与发展

web前端开发与页面设计的协作.区别与发展,布布扣,bubuko.com

Web前端自学之路学习路线,web前端开发网站

前端开发作为一个由网页制作演变成的新兴岗位,其实在国内外来说,受到重视的时间并不长,在前几年间技术快速的发展和其应用普及率的迅猛增长,使得前端人才市场一片盛况空前的景象,由于其的易入门性和不错的发展前景,吸引了众多前端爱好者和转行人员的青睐. 都说前端技术属于易学难精,其易入门性也是相对Java,python那些语言来说的,并不是说任何人可随便信手拈来,而且今天的"前端"并不等同于"美工",前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习

编写高质量代码:Web前端开发修炼之道(一)

最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道>,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发.很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着.下面是我看书过程中的笔记. 第一章:从网站重构说起 没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

【转】十款让 Web 前端开发人员更轻松的实用工具

这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率. Spritepad 借助 SpritePad,你可以在几分钟甚至几秒钟内创建你的 CSS 精灵.只需拖放您的图片,立即可以生成 PNG 精灵图片以及 CSS 代码.不需要在 Photosh