网页制作系列学习（三）CSS编程排版练习：下拉组件，导航菜单和多个css布局

一、前言

- 实验要求

TASK1

制作一个简单的页面， 要求：

1）菜单始终在屏幕的上方（无论拖动）；

2） 网页的结构如附件所示。每个区块之间，需要有边距和空白。

3） 在屏幕的右下方，固定一个“联系电话”的方框；不随滚动条而改变位置。

4） 进行界面设计。要求有布局、色彩、字体等因素的考虑；

TSAK2

基于以前的实验所做的网页，重新分栏/分区块（如果之前未分栏，先分栏显示页面）。使得html内容不变，但不同的css所控制的版面布局不同。

开发环境？

1. 操作系统： Windows 10 X64
2. 软件：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个属性来使用的。
用例：

正常位置
正常位置向左移动
正常位置向右移动

效果：

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：

---

三、视觉设计分析：

字体：

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代码：

        
        

            
                    
                猫咪の小屋
                  
            

            
            站内搜索
            
 
            

        

            
全部
            
长毛
            
短毛
            
领养
        
        
            
        
        

            
            

                

                猫咪是可爱的结晶
                

            
            

                这里有不同种类的猫咪喔
                
                

                
                
                
                
                

                

                
布偶猫
                
折耳猫
                
英短猫
                
                

                
Pika
                
Redeka
                
Medusa
               
                

                
长毛猫
                
长毛猫
                
短毛猫
            
                
            
        
        

            produced by：vein
        
        

            
联系方式  ：请私聊
        
        
    

效果如下：

image.png

---

TASK2：

通过不同css文件实现版面设计：
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代码：

            

        
        


            

                

            

                厦门大学|移动计算与数据分析
            
            
            
      
            

            
            
站内搜索
            

        
            切换排版 
            
 
            
            
            

        
        
        

            

                

                
主页
                
新闻
                
人员
            
科研
                
课程
                    
实践
                        
文章
                
        
        
        
        

            

            
            
        
        
        

            
实验室介绍
            
                

                

                
教师队伍
                
学生名册
                
                
                

            
课程介绍
            

                

                
人机交互
                
C#编程
                
中间件技术
               
                

                
人工智能概论
                
高级软件工程
                
短毛猫
            
                
        
        
        

            
科研信息
            

                

                
客车充电优化
                
DEEPTRAVEL论文介绍
                
PCB瑕疵检测算法
               
                

                
特征抽取
                
Word2Vec
                
Pytorch介绍
            
            

                
networkx库介绍
                
Hetero Edge论文介绍
                
Aloe论文介绍
            
                
        
        
        

            
实验室概况
            
联系方式
            
课程中心
            
课程项目
            
毕业生花名册
        
        

            
电话查号台：0592-xxxx  地址：福建省厦门市思明区思明南路422号
        
    

---

四.实验总结

1.通过设置width，top：为百分数可以使得板块随屏幕大小自适应改变位置。
2.水平居中是：text-align：center，垂直居中是vertical-align：center。
3.使用较不常见的字体时，不同浏览器的兼容性不同。
在本次实验中，IE浏览器可以显示出文悦新青年字体，Chrome浏览器则用黑体代替了文悦新青年字体。
4.如果一个子块的位置被设置为absoulute，align居中不再使用，需要使用代码：

    left: 0;
        right: 0;
        margin:0 auto;/*特殊居中*/

---

本文到此结束，感谢阅读