科中主页总结

任务名：科中主页

项目简介

目标：介绍科中、展示科中

组员：向政昌 田冰航 吴华骅 张婷

链接：https://tbghg.github.io/ELAB.github.io/

（代码已上传CSDN，欢迎下载）

项目文件：

效果展示

导航及轮播图：

科中简介：

组内展示：

作品展示：

页尾：

开发过程及实现功能

关键代码分析

本网页作为完全的静态网页，使用的开发语言为前端三剑客HTML、CSS、JS，并以HTML、CSS为主，辅以少量JS。以网页模板为基础的二次开发，无后端代码。

轮播图

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

…(此处轮播功能函数引用，定义在js文件中，故篇幅过长省略)

科中简介布局

<div class="col-md-4 ad-in" style="border: solid #99ffff 2px; border-radius:10px; margin-top: 100px;">
...
<div class="col-md-4 ad-in" style="border: solid green 3px; border-radius:10px;">
...
<div class="col-md-4 ad-in" style="border: solid #99ffff 2px; border-radius:10px; margin-top: 100px;">

通过border设置边框，并设置其宽度、弧度等属性

回到顶部悬浮框

<div style="overflow: hidden;position: fixed;right: 10px;bottom: 20px;z-index: 10;">
    <div style="overflow: hidden;">
        <div style="padding-top:20px;padding-right:50px;padding-bottom:50px">
            <a href="#" style="float: right;" class="btns"><img width="50px" height="50px" src="images/up.gif"></a>
        </div>
    </div>
</div>

设置绝对位置、浮动及其他属性实现其一直悬浮在屏幕右下角。

引入第三方网页

<iframe src="https://www.amap.com/search?id=B0FFJVBXTX&city=210211&geoobj=120.690633%7C38.360113%7C123.353557%7C39.523148&query_type=IDQ&query=%E5%A4%A7%E8%BF%9E%E7%90%86%E5%B7%A5%E5%A4%A7%E5%AD%A6%E7%94%B5%E6%B0%94%E5%B7%A5%E7%A8%8B%E5%AD%A6%E9%99%A2&zoom=9.12" width="500px" height="500px"></iframe>

使用<frame>标签，设置引入网站的连接，实现引入。

总结

本项目为加入电气创新实践基地后第二学期小组合作完成的小项目，总体而言，达到了展示科中氛围、文化的目标，通过实践体验了网页开发的过程。诚然，本网页是基于模板进行的二次开发，目前实现的功能也非常少，界面简陋，因此，前端开发的学习，我们都还有很长一段路要走。理解理论容易，动手实现困难，今后学习过程中，应更注重实践训练，多做demo，不断提升。