2019/5/13-人机交互实验十

引言

-基于Boostrap进行网页设计

环境

用vs code进行编辑html文件

具体过程

实验题目 2.1：

1.首先新建文本文档，将后缀名改为.html
2.用vs code打开此文件，进行编辑
3.在中加入






引用boostrap
4.分析主页的布局，主要分为三部分，用三个div来分组big、mainContainer、footer
5.在big中先引入图片backg.png，在big中再分2个div来编辑页面切换的超链接和在线人数的查看
6.主要的manContainer中分四部分，3-5-4-12，前三个div并列依次设置课程、新闻、项目以及文章。

a.

1557733495(1).jpg

b.

1557733592(1).jpg

c.

1557733658(1).jpg

d.

1557733734(1).jpg

7.footer为页脚的一张图片，插入方法如页头图片的插入
8.样式：

1557733805(1).jpg

总结

• 初步掌握boostrap对网页设计的基本动作
• 代码过程中格式清晰有助于整理逻辑结构