2021年大一下网页期末作业(纯html+css实现) 您所在的位置:网站首页 动态网页设计期末大作业 2021年大一下网页期末作业(纯html+css实现)

2021年大一下网页期末作业(纯html+css实现)

2024-07-18 04:54| 来源: 网络整理| 查看: 265

目录

前言

一、Css源代码

【首页】

【相册】

【视频】

【文字】

【关于】

二、html文件+导航+foot区的css源代码

【首页】

【相册】

【视频】

【文字】

【关于】

【导航栏+foot底部的css源代码】

三、页面展示

 总结

前言

这是我大一下学期的期末作业。发上来给大家参考参考,布局写得比较乱,望大家多给建议。这个网页作业做了首页、相册、视频、文字、关于五个子页面,每个子页面都单独写了一个css。另外附上b站网页展示链接:https://www.bilibili.com/video/BV1nV411p7gx/

大一下学期网页期末作业展示(纯css+html)

提示:以下是本篇文章正文内容,下面案例可供参考

一、Css源代码 【首页】 .content { width:100%; } /* 引导按钮 */ /* 固定在最下方的a标签 */ .button { position: fixed; z-index: 9999;; bottom: 5%; right:5%; } .button ul{ display: flex; } .button li { border-radius: 50%; background:black; opacity: .3; margin: 0 5px; height:20px; width:20px; color:black; font-size:14px; text-align: center; } /* banner图 */ .content .banner { width: 100%; position:relative; overflow: hidden; } .content .banner img{ max-width:100%; } .content .banner p{ text-align: center; } .content .banner p:nth-child(1) { position:absolute; top:50%; width:100%; color:#FF9900; font-size: 80px; /* border: 1px solid red; */ } .content .banner p:nth-child(2) { position:absolute; top:48%; width:100%; color:#444;; /* border: 1px solid red; */ } /* 初心 */ .content .start { display: flex; flex-direction: rows; background-color:#F8F8F8; padding-top: 50px; padding-bottom: 80px; } .start h1{ text-align: center; } .content .start:hover img{ transition: all 3s ease; transform: rotate(360deg); } /* 将初心界面分成两栏:左边占3份,右边占2份 */ .content .start .left { flex: 3; margin:auto 0px; color:#FF9900; /* border: 1px solid red; */ position: relative; } .content .start .right { flex:2; } .content .start .left ul li{ font-size: 18px; left:40%; position:relative; margin-top: 10px; /* border: 1px solid red; */ } .content .start .left h1 { margin:20px; text-align: center; } /* 相册模块 */ .album ul{ display:flex; justify-content: center; flex-wrap: wrap; } .album ul li { margin:10px; width: 500px; height:333px; overflow: hidden; } .album ul li img { width:500px; height:333px; object-fit: cover;/*如果不加这个的话那就会拉伸图片 这个属性就是保持图片的原始比例*/ } .album ul li img:hover{ transition: all 2s ease; transform: scale(1.2); } /* flex布局大法好,视频调了margin:0 auto;和position都不能居中,最后只好用flex布局,果然一下就好了。 */ .video { margin-top:80px; width: 100%; background: black; padding-bottom: 80px; position: relative; } .video .lasa { width: 100%; display: flex; justify-content: center; } .video h1{ color:white; } .video .box p:nth-child(3){ color:white; font-size: 12px; margin:20px auto; } /*这里将视频和相册下的box设置边距,以避免重复代码*/ .box{ padding-top: 80px; padding-bottom: 50px; } .box p,.box h1{text-align: center;} /* 文字模块 */ .text .recommend { display:flex; justify-content: center; align-content: start; padding-bottom: 80px; } .text .title{ margin:20px; padding-top: 20px; text-align:center; font-size:18px; } .text .content{ line-height:40px; display:inline-block; text-indent: 2em; font-size:16px; font-weight: 400; color:#444;} .text .cite{ text-align: right; color:#444; font-size: 14px; margin-top:20px; padding: 0 20px;} .text ul li{ background: #F8F8F8; display: flex; flex-direction: column; justify-content: center; padding: 0 20px; margin: 0 20px; padding-bottom: 20px; border-radius: 20px; } .text ul{ margin:0 10%; } /* 给文字模块加上阴影 */ .text ul li:hover{ box-shadow: 0px 0px 40px rgba(0,0,0,.1); transform: translate(0,-10px); transition: all 1s ease; } 【相册】 .content{ display: flex; flex-direction: column; background: #F2F2F2; } .content .topbar ul{ display: flex; border-bottom: 3px solid #444; padding: 20px 0; } .content .topbar li{ padding: 0 40px; font-size: 18px; color:#444; /* border-bottom:2px solid grey; */ } .content .topbar li:hover{ background: #f9f9f9; } .content .item ul{ display: flex; flex-direction: row; flex-wrap: wrap; /* padding-top:20px; */ padding-bottom: 80px; } .content .item ul li{ background: white; height:190px; width:160px; display: flex; margin:20px 30px; flex-direction:column; justify-content: center; align-items: center; box-shadow: 0px 0px 10px rgba(0,0,0,.2); } .content .item ul li:hover{ transition:all 2s ease; transform: translate(0,-30px); } .content .item ul li p{ font-size:14px; color:#444; margin-top:10px; margin-left: -30%; } .content .item ul li img{ height:140px; width: 140px; object-fit: cover; } .content .button ul{ display:flex; flex-direction: row; align-items: center; margin:30px 30px; /* justify-content: center; */ } .content .button ul li{ width:130px; height:35px; line-height: 35px; text-align: center; margin:0 10px; border:1px solid #9c6006; background:#FF9900; color:white; border-radius: 5px; } .content .button ul li:nth-child(3){ background:white; color:black; border:1px solid grey; width:100px; } .content .button ul li:nth-child(4){ background:white; color:black; border:1px solid grey; width:100px; } 【视频】

这个是基于相册页的修改。

.content{ display: flex; flex-direction: column; background: #F2F2F2; } .content .topbar ul{ display: flex; border-bottom: 3px solid #444; padding: 20px 0; } .content .topbar li{ padding: 0 40px; font-size: 18px; color:#444; /* border-bottom:2px solid grey; */ } .content .topbar li:hover{ background: #f9f9f9; } .content .item ul{ display: flex; flex-direction: row; flex-wrap: wrap; /* padding-top:20px; */ padding-bottom: 80px; } .content .item ul li{ background: white; height:140x; width:190px; display: flex; margin:20px 30px; flex-direction:column; justify-content: center; align-items: center; box-shadow: 0px 0px 10px rgba(0,0,0,.2); } .content .item ul li:hover{ transition:all 2s ease; transform: translate(0,-30px); } .content .item ul li p{ font-size:14px; color:#444; margin-top:10px; padding-bottom: 10px; margin-left: -30%; } .content .item ul li img{ height:140x; width:190px; object-fit: cover; } .content .button ul{ display:flex; flex-direction: row; align-items: center; margin:30px 30px; /* justify-content: center; */ } .content .button ul li{ width:130px; height:35px; line-height: 35px; text-align: center; margin:0 10px; border:1px solid #9c6006; background:#FF9900; color:white; border-radius: 5px; } .content .button ul li:nth-child(2){ background:none; color:#FF9900; border:1px solid grey; border:none; width:100px; } 【文字】 .wrapper{background: white;} .box{ display:flex; margin:0 5%; flex-direction: rows; } .box div{ margin:0 20px; } .box .list{ flex:2; background:black; padding: 4% 4%; box-shadow: 0px 0px 40px rgba(0,0,0,.1); } .box .list h1{ font-size:30px; color:#FF9900; } .box .list h2{ font-size:14px; color:#444; } .box .list hr{ margin:20px 0; } .box .list .item ul li{ font-size:15px; background: #444; line-height:48px; margin: 0 -10%; padding:0 10px; font-weight: 700; opacity: 0.5; border-bottom: 1px solid #808080; } .box .list .item ul li:hover{ transition: all 2s ease; opacity: 1; } .box .list .item ul li:nth-child(){ transition: all 2s ease; opacity: 1; } .box .content{ flex:5; margin-bottom: 40px; } .box .content ul li{ background: #f9f9f9; padding:40px; box-shadow: 0px 0px 40px rgba(0,0,0,.1); } /* .box .content ul li:hover img{ transform: scale(1.03); transition: all 1s ease; } .box .content ul li:hover h1{ color:#FF9900; } */ .box .content ul li:hover{ transition: all 2s ease; border-radius: 50px; transform: scale(1.03); } .box .content ul li img{ width:150px; height: 225px; overflow: hidden; object-fit: cover; } .box .content ul li .neirong{ display:flex; margin:5% 0; } .box .content h1{ font-size:20px; font-weight:bold; } .box .content p{ font-size: 14px; color:#444; margin:0 10px; font-weight: 500; text-indent: 2em; } .box .content ul li .other{ background:#808080; height:2px; width:100px; position:relative; left:45%; } 【关于】 .wrapper .head{ display: flex; justify-content: center; } .wrapper .head li{ background: #f9f9f9; margin:0 20px; height:450px; width:450px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 0px 40px rgba(0,0,0,.1); } .wrapper .head li:hover{ transition:all 1s ease; height: 500px; transform: translate(0,-5px); } .wrapper .head li img{ height: 200px; width:200px; border-radius: 50%; } .wrapper .head li h5{ color:#444; margin: 20px; font-size:20px; } .wrapper .head li p{ margin: 10px; font-size: 18px; font-weight: 500; } .wrapper h1,.wrapper p{ text-align: center; } .wrapper .box{ margin: 50px 0; } 二、html文件+导航+foot区的css源代码 【首页】 首页 1 2 3 4 5 6 | 首页 相册 视频 文字 关于

我 们 的 纪 念

我们一个像夏天一个像秋天,却总能把冬天变成了春天

初 心 - 完成一次作业 - 记录生活 - 学习更多网页知识 相 册

记录美好生活

视 频

留得住的才叫回忆

您的浏览器不支持视频 文 字

流淌在字里行间的岁月

《秋日》

主啊,是时候了。夏天盛极一时。 把你的阴影置于日晷上, 让风吹过牧场。 让枝头最后的果实饱满。 再给两天南方的好天气, 催它们成熟,把最后的甘甜压进浓酒。 谁此时没有房子,就不必建造, 谁此时孤独,就永远孤独, 就醒来,读书,写长长的信, 在林荫路上不停地, 徘徊,落叶纷飞。

———里尔克

摘抄

那一年我二十一岁,在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云,后来我才知道,生活是个缓慢受锤的过程,人一天天老下去,奢望也一天天消逝,最后变得像挨了锤的牛一样。 可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去,什么也锤不了我。

———王小波

《我与地坛》

如果以一天中的时间来对应四季,当然春天是早晨,夏天是中午,秋天是黄昏,冬天是夜晚。如果以乐器来对应四季,我想春天应该是小号,夏天是定音鼓,秋天是大提琴,冬天是圆号和长笛。要是以这园子里的声响来对应四季呢?那么,春天是祭坛上空漂浮着的鸽子的哨音,夏天是冗长的蝉歌和杨树叶子哗啦啦地对蝉歌的取笑,秋天是古殿檐头的风铃响,冬天是啄木鸟随意而空旷的啄木声。

———史铁生

Home Qzone Weibo NetEase Bilili

@2020.All Right Resoverd GoldenRose.com

【相册】 相册 | 首页 相册 视频 文字 关于 相册 照片 视频 上传照片 上传视频 创建相册 展示设置

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

Home Qzone Weibo NetEase Bilili

@2020.All Right Resoverd GoldenRose.com

【视频】 视频 | 首页 相册 视频 文字 关于 相册 照片 视频 上传视频 大视频上传

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

湘潭大学CCPC

Home Qzone Weibo NetEase Bilili

@2020.All Right Resoverd GoldenRose.com

【文字】

文字 | 首页 相册 视频 文字 关于 目录 Content 《我与地坛》 《黄金时代》 《给青年诗人的信》 《张晓风散文集》 《周国平哲理散文集》 《朱自清散文集》 《小王子》 《活着》 《我与地坛》

假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。

《黄金时代》

波哥的小说《黄金时代》最后两段是这么写的: “陈清扬说她真实的罪孽,是指在清平山上。那时她被架在我的肩上,穿着紧裹住双腿的筒裙,头发低垂下去,直到我的腰际。天上白云匆匆,深山里只有我们两个人。我刚在她屁股上打了两下,打得非常之重,火烧火撩的感觉正在飘散。打过之后我就不管别的事,继续往山上攀登。 陈清扬说,那一刻她感到浑身无力,就瘫软下来,挂在我肩上。那一刻她觉得如春藤绕树,小鸟依人,她再也不想理会别的事,而且在那一瞬间把一切全部遗忘。在那一瞬间她爱上了我,而且这件事永远不能改变。”

《给青年诗人的信》

在你夜深最寂静的时刻问问自己:我必须写吗?你要在自身内挖掘一个深的答复。若是这个答复表示同意,而你也能够以一种坚强、单纯的“我必须”来对答那个严肃的问题,那么,你就根据这个需要去建造你的生活吧;你的生活知道它最寻常最细琐的时刻,都必须是这个创造冲动的标志和证明。然后你接近自然。你要像一个原人似的练习去说你所见、所体验、所爱以及所遗失的事物。不要写爱情诗;先要回避那些太流行、太普通的格式:他们是最难的;因为那里聚有大量好的或是一部分精美的流传下来的作品,从中再表现出自己的特点则需要一种巨大而熟练的力量。所以你要躲开那些普遍的题材,而归依于你自己日常生活呈现给你的事物;你描写你的悲哀与愿望,流逝的思想与对于某一种美的信念——用深幽、寂静、谦虚的真诚描写这一切,用你周围的事物、梦中的图影、回忆中的对象表现自己。如果你觉得你的日常生活很贫乏,你不要抱怨它;还是怨你自己吧,怨你还不够做一个诗人来呼唤生活的宝藏;因为对于创造者没有贫乏,也没有贫瘠不关痛痒的地方。即使你自己是在一座监狱里,狱墙是人世间的喧嚣和你的感官隔离——你不还永远据有你的童年吗,这贵重的富丽的宝藏,回忆的宝库?你望那方面多多用心吧!试行拾捡起过去久以消沉了的动人的往事;你的个性将渐渐固定,你的寂寞将渐渐扩大,成为一所朦胧的住室,别人的喧扰只远远地从旁走过。——如果从这收视反听,从这向自己世界的深处产生出“诗”来,你一定不会再想问别人,这是不是好诗。 …… 因为创造者必须自己是一个完整的世界,在自身和自身所连接的自然界里得到一切。

《我与地坛》

假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。

《我与地坛》

假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。

《我与地坛》

假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。

《我与地坛》

假如世界上没有了苦难,世界还能够存在么?要是没有愚钝,机智还有什么光荣呢?要是没了丑陋,漂亮又怎么维系自己的幸运?要是没有了恶劣和卑下,善良与高尚又将如何界定自己又如何成为美德呢?要是没有了残疾,健全会否因其司空见惯而变得腻烦和乏味呢?我常梦想着在人间彻底消灭残疾,但可以相信,那时将由患病者代替残疾人去承担同样的苦难。如果能够把疾病也全数消灭,那么这份苦难又将由(比如说)像貌丑陋的人去承担了。就算我们连丑陋,连愚昧和卑鄙和一切我们所不喜欢的事物和行为,也都可以统统消灭掉,所有的人都一样健康、漂亮、聪慧、高尚,结果会怎样呢?怕是人间的剧目就全要收场了,一个失去差别的世界将是一条死水,是一块没有感觉没有肥力的沙漠。 看来差别永远是要有的。看来就只好接受苦难——人类的全部剧目需要它,存在的本身需要它。看来上帝又一次对了。 于是就有一个最令人绝望的结论等在这里:由谁去充任那些苦难的角色?又有谁去体现这世间的幸福,骄傲和快乐?只好听凭偶然,是没有道理好讲的。 就命运而言,休论公道。 那么,一切不幸命运的救赎之路在哪里呢?设若智慧的悟性可以引领我们去找到救赎之路,难道所有的人都能够获得这样的智慧和悟性吗?我常以为是丑女造就了美人。我常以为是愚氓举出了智者。我常以为是懦夫衬照了英雄。我常以为是众生度化了佛祖。

Home Qzone Weibo NetEase Bilili

@2020.All Right Resoverd GoldenRose.com

【关于】

这个页面做得比较简单,因为没有多少时间了。

关于 | 首页 相册 视频 文字 关于 关于 罗小四

人的一泓清泉里不能没有月光。

朱秀玲

天真永不消逝,浪漫至死不渝。

Home Qzone Weibo NetEase Bilili

@2020.All Right Resoverd GoldenRose.com

【导航栏+foot底部的css源代码】 /* 导航模块 */ /*让导航栏变成flex布局*/ .nav ul{ display: flex; line-height:80px; } .nav ul li{ font-weight:500; font-size:18px; margin:0 8px; } /* .nav ul li a{ border-right:1px solid white; padding-right:8px; } */ .nav ul li:nth-child(1){ margin-left: 20px; margin-right: auto; } /* 去除左右两边的边缘线 .nav ul li:nth-child(1) a{border:none;} .nav ul li:nth-child(6) a{border:none;} */ /*导航栏的文字效果*/ .nav ul li:hover a{ background:white; color:black; } /* 底部模块 */ .foot{ height: 100px; background: black; display: flex; flex-direction: column; justify-content: center; } .foot p{ color:#444; font-size:12px; text-align: center; } .foot ul{ display: flex; justify-content: center; padding-bottom: 10px; } .foot ul li{ margin0 10px; } .foot ul li a{ padding-right: 8px; color:gray; } .nav{ height:80px; background-color:black; } 三、页面展示

 总结

收获颇多,主要采用的flex布局,最后一个关于的界面在某些电脑上展示比较怪..不知道怎么修正,望给以指点!谢谢~



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

      专题文章
        CopyRight 2018-2019 实验室设备网 版权所有