网页制作系列学习（一）html+css入门

一、前言

实验要求
设计MOCOM实验室的主页，有实验室介绍、科研信息展示等信息
开发环境？

操作系统： Windows 10 X64
软件：Hbuilder

二、设计分析

1.功能分析
①网页应该具有超链接和图片链接的功能
②网页应该分成不同的板块
1. 交互设计
  颜色：作为厦门大学mocom实验室官网，我选择用黑色作为主旋律，黑色相对凝重，但通过给不同板块之间设置不同透明度可以制造出时尚和轻松感。同时，黑色几乎是唯一一款可以占据90的颜色却依然协调的颜色，很适合初学者来练手。

字体：

中文字体

所有中文字体大部分为非衬线字（微软雅黑和黑体），非衬线的优点在上一张的字体种有讲到。
友情链接：字体·认知心理与界面
字体如下所示：

image.png

一级标题使用了经典雅黑，二级标题提使用了黑体，三级标题使用了微软雅黑。
使用黑体是为了使得界面光滑扁平，便于阅读，而使用不同的黑体是根据用户的视觉顺序，按照视觉冲击程度梯度递减的顺序设置字体。

英文字体：

Algerian.
这是一款有铜版印刷质感的非衬线字体，选取这款字体的原因是觉得这款字体有卡通元素的同时兼具哥特体的严肃感，在给画面增加视觉趣味的同时没有影响整体的严肃感。同时这款字体非常适用于黑底白字的风格，和本网页的风格一致。
Castellar
这是一款有铜版印刷质感的衬线字体，因为这部分内容（Mobline Computing）并不重要，但处于不同板块的交界处，视觉美感的重要性大于阅读便利，因此我选用了这款衬线字体。
字体部分的代码

排版：
极简风格：作为mocom的主页，该网页并不需要把太多冗杂的信息展示出来，我摘取了两部分：实验室介绍和科研信息，在这两区域中分别增加了相关链接。
标题居中：我并没有把移动计算和数据分析放在最上方，用户不能够快速地理解这个词汇的意义：没有提到这个实验室隶属于厦门大学，甚至没有提到这是一个实验室网页，所以在最上方的大标题显得有点多余。我认为放在两个分模块下方便使用户理解标题的意思。如下图所示：

image.png

三、编程分析

排版代码：分成了header,content(lab,research),middle,content 2,footer五个主要板块。

    .header{
                width:1800px;
                height:45px;
                background-color: black;
                opacity: 0.9;
                margin:0 auto;
            }

hearder是最上方的板块。
这里我们为了让其颜色看起来更自然，使用0.9的不透明度，代码为opacity:0.9;

            .content1{
                width:1800px;
                height:450px;
                background-color: antiquewhite;
                opacity: 0.9;
                margin:0 auto;
            }

从上到下将网页分为head，content1，logo，content2，footer几部分。
content1和content1在水品方向上内嵌了几个sub-div。
在布局上，我们首先要使得content1，content2居中排列，设置代码为：margin ：0 auto

            .lab{
                width:899.5px;
                height:450px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
            }
            .line{
                width:1px;
                height:450px;
                background-color: darkslategrey;
                opacity: 0.9;
                margin:0 auto;
                float:left;
                }
            .reserch{
                width:899.5px;
                height:450px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
            }

我们将content1分成三部分：lab，line，reserch分别展示实验室介绍，中间的分割线和科研信息。
为了使得这三个分板块将content1填充满，我们把使其拥有和content1相等的height，三板块的width加起来等于content1的width。
为了使得这三个板块水品排布，我们使用代码float:left;,使得板块向左对齐

            .logo{
                width:1480px;
                height:150px;
                background-color: black;
                opacity: 0.9;
                margin:0 auto;
            }
            .lineword
            {
                width:1280px;
                height:50px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                
            }
            .horiline
            {
                width:888px;
                height:4px;
                background-color: black;
                opacity: 0.9;
                margin:0 auto;
                
            }
                .middle{
                width:910px;
                height:35px;
                background-color: black;
                opacity: 0.9;
                margin:0 auto;
            }
            .content2{
                width:1700px;
                height:1000px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                
            }

content2采用了和content1类似的划分方法：

            .left{
                width:850px;
                height:900px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
            }
            .leftup1{
                width:200px;
                height:200px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
                }
            .leftup2{
                width:650px;
                height:200px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
                }
            .leftdownblank{
                    width:300px;
                height:500px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
            }
            .leftdown{
                width:500px;
                height:700px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
                pading:23px;
                border-style: double;
                border-color: black;
                border-width: 1px;
            
            }
                .leftdownleft{
                width:50px;
                height:700px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
            }
                .leftdownright{
                width:450px;
                height:700px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                float:left;
            
            }
            .right{
                width:850px;
                height:700px;
                background-color: white;
                opacity: 0.9;
                margin:0 auto;
                    float:left;
            }

最后我们为页面底部设计一个不透明度较高的黑色板块来显示学校信息。

            .footer{
            width:1800px;
                height:200px;
                background-color: black;
                opacity: 0.7;
                margin:0 auto;
            }

字体代码：

我们为不同字体设置不同颜色，大小和字体，并调整其透明度。

p1{
        color:black;
        font-size:px;
        font-family:"microsoft yahei";
        
        }
            p2{
        color:black;
        opacity:0.9;
        font-size:33px;
        font-family:sans-serif;
        font-weight:blod;
        background-color:white;
        }
            p3{
        color:white;
        opacity:0.9;
        font-size:60px;
        font-family:"Algerian";
        font-weight:blod;
        background-color:black;
        }

通过p2和p3的代码，我们可以看出
font-family:"字体“
font-family:字体
这两种写法，语法都正确。

        
            p4{
        color:black;
        opacity:0.9;
        font-size:30px;
        font-family:"sans-serif";
        font-weight:blod;
        background-color:white;
        }
            linewr{
        color:black;
        opacity:0.9;
        font-size:35px;
        font-family:"Castellar";
        font-weight:blod;
        background-color:white;
        }
           p5{
        color:white;
        opacity:0.9;
        font-size:70px;
        font-family:"字魂35号-经典雅黑";
        font-weight:blod;
        background-color:black;
        }
        subtitle{
        color:white;
        opacity:0.9;
        font-size:55px;
        font-family:"sans-serif";
        font-weight:blod;
        background-color:black;
        }
        footstyle{
        color:white;
        opacity:0.9;
        font-size:30px;
        font-family:"sans-serif";
        font-weight:blod;
        background-color:black;
        }

设置链接：(以实验室介绍板块为例）

    <p2><a href="http://mocom.xmu.edu.cn/people/people/1/1"target="_blank">实验室人员介绍</a> </p2>
            <br/>
            <br/>
            
            <p2><a href="http://mocom.xmu.edu.cn/course"target="_blank">实验室课程介绍</a> </p2>
            
            <br/>
            <br/>
            <p2><a href="http://mocom.xmu.edu.cn/course"target="_blank">实验室课程介绍</a> </p2>

三、实验总结

1.css和html的混编方法：

法一：使用html标签的style属性

每个html标签上面都有一个属性:style,把css和html结合在一起
例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>混编方法一</title>
    </head>
    <body>
        <div style="background-color: black;opacity：0.9；color: white;">hjwblog.com</div>
    </body>
</html>

法二：使用html的style标签

在<head>里内嵌一个<style>标签。
例如:

<head>
        <meta charset="UTF-8">
        <title>混编方式二</title>
        <style type="text/css">
        *{
                margin=0;
                padding: =0;;
            }
            .mainBox{
                width: 960px;
                height:300px;
                background-color:#CFF;
                margin:0 auto;
                clear:both
            }
            .leftBox{
                height:300px;
                width:740px;
                background-color: #C9F;
                margin:0 auto;
                float:left;
                
            }
        .rightBox{
                height:300px;
                width:210px;
                background-color: #FCF;
                margin:0 auto;
                float:right;
                
            }
            
        </style>
    </head>

法三：在style标签中@import

1.创建一个css文件
2.在html文件的style标签中import
例如：
CSS文件：（名为ModelCss）

div{
         background-color: black;
         opacity:0.9;
         color: white;
}

HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>混编方法三</title>
        <style type="text/css">
            @import url("css/MOdelCss.css");
        </style>
    </head>
    <body>
        <div>hjwblog.com</div>
    </body>
</html>

法四：使用头标签 link

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>混编方式四</title>
        <link rel="stylesheet" type="text/css" href="css/ModelCss.css"/>
    </head>
    <body>
        <div>https://www.jianshu.com/writer#/notebooks/38221597/notes/65564921/preview</div>
    </body>
</html>

本文使用了法二。

2.浮动控制：

float的使用
float：right/left/none的用法如下：
|参数值|效果|
| :---:|:---|
|none | 　对象不浮动|
|left | 　对象浮在左边
|right | 　对象浮在右边
如果我们想要让两个width=100px的div去”填满“一个width=300px的div，可以让左边的div向左浮动，右边的div向右浮动：
实例代码：

 .leftBox{
                height:300px;
                width:740px;
                background-color: #C9F;
                margin:0 auto;
                float:left;
                
            }
              .rightBox{
                height:300px;
                width:210px;
                background-color: #FCF;
                margin:0 auto;
                float:right;
                
            }

clear的使用
如果希望取消浮动，可以用clear:both
示例代码：效果为style=example的div内元素不向左浮动。

.example
  {
  float:left;
  clear:both;
  }

本文到此结束，感谢阅读

最后编辑于：2020.04.04 00:52:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,463评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,868评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,213评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,666评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,759评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,725评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,716评论 3赞 415
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,484评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,928评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,233评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,393评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,073评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,718评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,308评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,538评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,338评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,260评论 2赞 352