一、前言
- 实验要求
TASK1
制作一个简单的页面， 要求：
1）菜单始终在屏幕的上方（无论拖动）；
2） 网页的结构如附件所示。每个区块之间，需要有边距和空白。
3） 在屏幕的右下方，固定一个“联系电话”的方框；不随滚动条而改变位置。
4） 进行界面设计。要求有布局、色彩、字体等因素的考虑；
TSAK2
基于以前的实验所做的网页，重新分栏/分区块（如果之前未分栏，先分栏显示页面）。使得html内容不变，但不同的css所控制的版面布局不同。
开发环境？
- 操作系统： Windows 10 X64
- 软件：Hbuilder
二、背景知识介绍
TASK1
postion:absolute 跳出文本流，不是行内元素，设置宽高有效，我的理解。
postion属性一共有4个值，分百别为static，absolute，relative和fixed。
（1） static为默认值，它表示块保持在原本应该在的位置上，即改值没有任何移动的效果。
（2） 当子块的postion值设为absolute时，子块已经不再从属于父块。
注：top，right，bottom和left这4个css属性，度他们都是配合position属性使用的，不但可以设置为绝对像素，也可以设置为表分数，表示块的各个边界离页面边框（postion=absolute）的距离，或者各个边界离原来位置（postion=relative）的距离。只有当postion属性设版置为absolute或者relative时才能生效。如果设置为static，则子块不会有任何变化。
（3）块的postion设置为relative时，与将其设置为absolute时完全不同。这时子块是相对于其父块来进行定位的，同样配权合top，right，bottom和left这4个属性来使用的。
用例：
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>正常位置</h2>
<h2 class="pos_left">正常位置向左移动</h2>
<h2 class="pos_right">正常位置向右移动</h2>
</body>
</html>
效果：
image.png
（4） 当子块的postion值设为fixed时，子块始终处于屏幕的某个位置（通过left top bottom right来设置）。
我们可以通过设置position为fixed来创建导航菜单和联系方式板块。
.menu
{
/*导航菜单*/
position:fixed;
left: 0;
right: 0;
margin:0 auto;
background-color:hotpink;
width: 1200px;
height:200px;
z-index:9999;
opacity:0.7;
text-align: center;
font-family: "文悦新青年体 (非商业使用) W8";
/*遮挡*/
}
.contactinfo
{
position:fixed;
opacity: 0.7;
bottom:5px;
right:100px;
width:150px;
height:250px;
background-color: orangered;
}
TASK2
1.通过button实现页面的重修排布：
- 在1.html中放入一个地址为2.html的button。
- 在2.html中放入一个地址为1.html的button。
- 设置button的text=重新排版
2.将不同板块的代码写在不同的css文件里，再用link rel="stylesheet" type="text/css" href="文件名.css"读取css文件里的代码：
本案例中的css文件的link：
<link rel="stylesheet" type="text/css" href="header.css"/>
<link rel="stylesheet" type="text/css" href="content.css"/>
<link rel="stylesheet" type="text/css" href="picture.css"/>
<link rel="stylesheet" type="text/css" href="form.css"/>
<link rel="stylesheet" type="text/css" href="footer.css"/>
三、视觉设计分析：
字体：
TASK1
- 均为非衬线字
- 卡通黑体作为标题，正文用微软雅黑
- 字体的选择可以参考我之前的文章：字体·认知心理与界面
TASK2
- 均为非衬线字
- 黑体作为标题，正文用微软雅黑
颜色和排版：
TASK1:
本次实验的大致要求如下：
image.png
我的构想主题是：做一个猫屋的网页
颜色
根据：
颜色数量不多于4种，且最佳比例为60%：30%：10%
我选用了hotpink,lightpink和oranged。margin的部分选用白色。
排版
- 总板块分为menu，content，footer，和contactInfo（联系方式）。
- 在menu块中，我划分了搜索框子块和logo子块。
- 在content块中，按要求分为左右两部分，右子块种有分为文字和表格。
TASK2
lab1.html：（第一次网页设计的作业）
参见网页制作系列学习（一）html+css入门
极简风格：作为mocom的主页，该网页并不需要把太多冗杂的信息展示出来，我摘取了两部分：实验室介绍和科研信息，在这两区域中分别增加了相关链接。
标题居中：我并没有把移动计算和数据分析放在最上方，用户不能够快速地理解这个词汇的意义：没有提到这个实验室隶属于厦门大学，甚至没有提到这是一个实验室网页，所以在最上方的大标题显得有点多余。我认为放在两个分?？橄路奖闶褂没Ю斫獗晏獾囊馑?。如下图所示：
image.png
task2.html：
依然是极简风格：
- 没有设计太花哨的功能：本来我设置了下拉界面的功能，但觉得和”实验室网页”实在是不搭，于是删掉了。改为由悬浮变色设计的表格。
- 标题居上：想和上次做的尽量不同，选择了标题在上的方式
-
尽可能多的陈列信息：上次是把信息规整为三大类放在三个div里，这次想在主页上展示更多的信息。
效果图如下所示：
image.png
image.png
总的来说，，上次的页面设计自己摸索的创造的成分占绝大多数，这次的页面设计参考了很多高校和实验室的首页。
三、编程分析
TASK1:
通过设置position：fixed使menu子块不随滚屏而改变位置
CSS文件：
.menu
{
/*导航菜单*/
position:fixed;
left: 0;
right: 0;
margin:0 auto;
background-color:hotpink;
width: 1200px;
height:200px;
z-index:9999;
opacity:0.7;
text-align: center;
font-family: "文悦新青年体 (非商业使用) W8";
/*遮挡*/
}
设置链接的鼠标悬浮变色
CSS文件
a{
color:white;
font-family: "文悦新青年体 (非商业使用) W8";
}
a:hover
{
color:purple;
background-color:lightpink;
按照要求的排版：
html代码：
<body>
<div style="text-align: center;" class=menu>
<a display:block;font-size:60px ;background-color:hotpink ; ;"target="_blank">
猫咪の小屋
</a>
<form>
<input type="text" >
<button >站内搜索</button>
</form>
<div style="position:relative;left:13%" id='item'>
<ul>
<li><a display:block;background-color:hotpink ;font-size:50px;"target="_blank">全部</a></li>
<li><a display:block;background-color:hotpink ;font-size:50px;"target="_blank">长毛</a></li>
<li><a display:block;background-color:hotpink ;font-size:50px;"target="_blank">短毛</a></li>
<li><a display:block;background-color:hotpink ;font-size:50px;"target="_blank">领养</a></li>
</ul>
</div>
</div>
<div align="center" class=content>
<div class=content1>
<br/>
<mainbody2 style="position: relative;top:100px;color:deeppink">猫咪是可爱的结晶</mainbody2>
<img src="../img/猫.jpg"style="width:550px;height:60%;position: relative;top:200px" >
</div>
<div class=content2>
<mainbody2 style="position: relative;top:50px;color:deeppink">这里有不同种类的猫咪喔</mainbody2>
<br />
<img src="../img/布偶猫.jpg"style="width:333px;height:40%;position: relative;top:150px;float:left" >
<img src="../img/折耳猫.jpg"style="width:333px;height:40%;position: relative;top:150px;float:left" >
<img src="../img/英短猫.jpg"style="width:334px;height:40%;position: relative;top:150px;float:left" >
<table style="position: relative;top: 150px;">
<tr>
<th style="font-size: 30px;">布偶猫</th>
<th style="font-size: 30px;">折耳猫</th>
<th style="font-size: 30px;">英短猫</th>
</tr>
<tr>
<td style="font-size: 30px;">Pika</td>
<td style="font-size: 30px;">Redeka</td>
<td style="font-size: 30px;">Medusa</td>
</tr>
<tr>
<td style="font-size: 30px;">长毛猫</td>
<td style="font-size: 30px;">长毛猫</td>
<td style="font-size: 30px;">短毛猫</td>
</tr>
</table>
</div>
</div>
<div align="center" class=footer>
<mainbody2 style="position: relative;top:200px;background-color: transparent;color:white;">produced by：vein</mainbody2>
</div>
<div class=contactinfo>
<div style="background-color: orangered"class=vertical>联系方式 ：请私聊</div>
</div>
</body>
效果如下：
image.png
TASK2：
通过不同css文件实现版面设计：
CSS代码：
<link rel="stylesheet" type="text/css" href="header.css"/>
<link rel="stylesheet" type="text/css" href="content.css"/>
<link rel="stylesheet" type="text/css" href="picture.css"/>
<link rel="stylesheet" type="text/css" href="form.css"/>
<link rel="stylesheet" type="text/css" href="footer.css"/>
搜索框和button的设计：
CSS代码：
input{
width:75%;
height:50px;
}
button{
position: absolute;
align-content: center;;
height:60px;
width:150px;
margin:auto;
表格设计：通过hover选择器赋予表格随鼠标悬停而变化的颜色
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
td{
align:center;
text-align:center;
vertical-align:center;
height:100px;
width: 100px;
border-style: solid;
border-width:2px;
border-color: black;
}
th
{
height:80px;
background-color: black;
color:white;
}
th:hover{
background-color: darkred;
color:white;
}
td:hover{
background-color: darkred;
color:white;
}
td{
background: lightgrey;
height:150px;
}
页面布局设计：
html代码：
<body>
<div class=headUp></div>
<div class=head>
<div class=headheadPic>
<div class=headTitle>
<p style="font-size: 35px;color:black;font-family: '微软雅黑';">
厦门大学|移动计算与数据分析
</p>
</div>
<div class=headSearch>
<form>
<input type="text" >
<button ><p style="font-size:15px;font-family: '微软雅黑';position:relative;bottom:10px;">站内搜索</p></button>
<br/>
<a href="lab1.html"style="font-size:20px;position: relative;left:580px;color:black;top:10px">切换排版</a>
</form>
</div>
</div>
<div class=headLine></div>
</div>
<div class=middleForm>
<table style="position: relative;">
<tr>
<th style="font-size: 30px;">主页</th>
<th style="font-size: 30px;">新闻</th>
<th style="font-size: 30px;">人员</th>
<th style="font-size: 30px;">科研</th>
<th style="font-size: 30px;">课程</th>
<th style="font-size: 30px;">实践</th>
<th style="font-size: 30px;">文章</th>
</table>
</div>
<div class=picture>
<div class=pictureIn>
<img style="position: relative;width:1500px;height:100%;z-index: 999;"src="../img/厦大pic.png" >
</div>
</div>
<div class=lab>
<h1 style="position: relative;left:20px;font-size:40px;color:">实验室介绍</h1>
<table style="position: relative;top: 20px;">
<tr>
<td style="font-size: 30px;background-color: white;color:black"><a href="www.baidu.com"style="color:black">教师队伍</a></td>
<td style="font-size: 30px;background-color: white;"><a href="www.baidu.com"style="color:black">学生名册</a></td>
</tr>
</table>
<br />
<h1 style="position: relative;left:20px;top:30px;font-size:40px">课程介绍</h1>
<table style="position: relative;top: 50px;">
<tr>
<td style="font-size: 30px;">人机交互</td>
<td style="font-size: 30px;">C#编程</td>
<td style="font-size: 30px;">中间件技术</td>
</tr>
<tr>
<td style="font-size: 30px;">人工智能概论</td>
<td style="font-size: 30px;">高级软件工程</td>
<td style="font-size: 30px;">短毛猫</td>
</tr>
</table>
</div>
<div class=research>
<h1 style="position: relative;left:20px;font-size:40px">科研信息</h1>
<table style="position: relative;top: 20px;">
<tr>
<td style="font-size: 30px;">客车充电优化</td>
<td style="font-size: 30px;">DEEPTRAVEL论文介绍</td>
<td style="font-size: 30px;">PCB瑕疵检测算法</td>
</tr>
<tr>
<td style="font-size: 30px;">特征抽取</td>
<td style="font-size: 30px;">Word2Vec</td>
<td style="font-size: 30px;">Pytorch介绍</td>
</tr>
<tr>
<td style="font-size: 30px;">networkx库介绍</td>
<td style="font-size: 30px;">Hetero Edge论文介绍</td>
<td style="font-size: 30px;">Aloe论文介绍</td>
</tr>
</table>
</div>
<div class=footer>
<p style="color:black;position: relative;left:500px;top:30px;font-size:30px;background-color: lightgrey;">实验室概况</p>
<p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">联系方式</p>
<p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">课程中心</p>
<p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">课程项目</p>
<p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">毕业生花名册</p>
</div>
<div class=footer2>
<p style="color:black;position: relative;left:500px;top:130px;font-size:25px;background-color: black;color:lightslategrey">电话查号台：0592-xxxx 地址：福建省厦门市思明区思明南路422号</p>
</div>
</body>
四.实验总结
1.通过设置width，top：为百分数可以使得板块随屏幕大小自适应改变位置。
2.水平居中是：text-align：center，垂直居中是vertical-align：center。
3.使用较不常见的字体时，不同浏览器的兼容性不同。
在本次实验中，IE浏览器可以显示出文悦新青年字体，Chrome浏览器则用黑体代替了文悦新青年字体。
4.如果一个子块的位置被设置为absoulute，align居中不再使用，需要使用代码：
left: 0;
right: 0;
margin:0 auto;/*特殊居中*/
本文到此结束，感谢阅读
