一、前言
1、实验目的：
- 熟悉界面设计的原则；
- 熟悉CSS/javascript的语法和编程；
- 学习bootstrap 教程 bootstrap网址
2、实验内容：
- 设计MOCOM实验室的主页，有实验室介绍、科研信息展示等；(不一定参考现在的页面；可以自行设计)
二、环境
- 操作系统： Windows 10 X64
- 工具：VsCode
三、实验步骤
- 在网上学习bootstrap教程，打开vscode，新建一个html文件，命名为“MOCOM网站主页”。先进行整体风格的确定，我想做出一种简约开放，商务高端的界面风格；主色调采取深蓝，黑，浅灰；图片和每个模块尽量铺面整个屏幕，比较大气。
- 观察bootstrap的每个示例，在head标签中都有以下几行代码。title标签表示该网站的标题名称，下面几句以防中文乱码，并能够使用js脚本文件。
<!DOCTYPE html>
<html lang="en">
<head>
<title>MOCOM网站主页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
- 接下来编写body标签中的代码部分。第一个盒子是Jumbotron（超大屏幕），会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>移动计算与数据分析</h1>
<p>
Mobile Computing & Data Analysis
</p>
</div>
效果截图：
1.png
- 下面是一个带有“厦门大学”品牌的导航栏。其中.navbar-brand 类用于高亮显示品牌/Logo，导航栏中的每一个元素都是一个链接，点击即可切换到子页面。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">厦门大学</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">主页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新闻</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">人员</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">科研</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">课程</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">实践</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">文章</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">登录</a>
</li>
</ul>
</div>
</nav>
效果截图：
2.png
- 下面是轮播图的代码，从网上找了三张图片进行轮播；并有两个按钮可以进行左右切换。
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" width="1550px" height="400px">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" width="1550px" height="400px">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" width="1550px" height="400px">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
效果截图：
3.png
- 讲一个大盒子分割成“课程”，“新闻”，“项目”和“文章”四块。每块用一个链接列表项实现。
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>课程</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">第8、9章课件</a>
<a href="#" class="list-group-item list-group-item-action">实验十：基于Boostrap进行网页设计</a>
<a href="#" class="list-group-item list-group-item-action">web Service例子</a>
<a href="#" class="list-group-item list-group-item-action">期末大作业的要求 </a>
<a href="#" class="list-group-item list-group-item-action">进行上机实验考试的通知</a>
<a href="#" class="list-group-item list-group-item-action">web界面设计模式 -- 报告报名</a>
</div>
</br>
<h2>项目</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">软件和共享</a>
<a href="#" class="list-group-item list-group-item-action">Xiamen Taxi Dataset</a>
<a href="#" class="list-group-item list-group-item-action">轨迹数据的挖掘和可视化 </a>
<a href="#" class="list-group-item list-group-item-action">车载网络数据收集</a>
<a href="#" class="list-group-item list-group-item-action">直播流媒体技术</a>
<a href="#" class="list-group-item list-group-item-action">WebGIS 地图展示</a>
</div>
</div>
<div class="col-sm-8">
<h2>新闻</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">香港浸会大学招收数据库和数据挖掘方向的博士研究生 </a>
<a href="#" class="list-group-item list-group-item-action">实验室5个项目获厦门大学大学生创新创业计划项目资助</a>
<a href="#" class="list-group-item list-group-item-action">天津理工大学李玉坤教授访问MOCOM实验室 </a>
<a href="#" class="list-group-item list-group-item-action">MOCOM实验室长期招募研究生/本科生 </a>
<a href="#" class="list-group-item list-group-item-action">厦门大学软件学院暑期夏令营招生简章 </a>
<a href="#" class="list-group-item list-group-item-action">墨尔本大学甘骏豪老师招收博士生 </a>
</div>
</br>
<h2>文章</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Hetero-Edge论文介绍_陶玉娇</a>
<a href="#" class="list-group-item list-group-item-action">论文阅读：Adaptive Dynamic Bipartite Graph Matching A Reinforcement Learning Approach_杨诗鹏_熊安书</a>
<a href="#" class="list-group-item list-group-item-action">Cplex介绍_徐易凡_孟戈 </a>
<a href="#" class="list-group-item list-group-item-action">特征抽取：CountVectorizer -- spark.ml</a>
<a href="#" class="list-group-item list-group-item-action">编程是什么：面朝大海，打字编码</a>
</div>
</div>
</div>
</div>
效果截图:
4.png
- 最后一部分就是底部盒子了，背景颜色选用深灰色，内容填充为文本。
<div class="col-sm-12" style="height:70px;background-color:rgb(201, 201, 201);text-align: center">
<p>厦门大学 MOCOM 计算小组 @ 2016 备案号:U500819</p>
</div>
效果截图：
5.png
-
整体效果截图：
6.png
7.png
四、总结
- 要多多学习CSS和JS；老师推荐的bootstrap对我很有帮助
网友评论