使用天码营前端预览工具：Web前端开发（HTML/CSS/JavaScript）实验-白红宇

使用天码营前端预览工具：Web前端开发（HTML/CSS/JavaScript）实验

阅读量：4090 次

发布时间：2019-05-25

本文共 8763 字，大约阅读时间需要 29 分钟。

由发表在

本实验将创建一个简单的HTML页面，展现北京大学创新工程实践老师的信息展示。

同学们将在这个实验中学习HTML、CSS和JavaScript的基本使用，对于Web前端开发有一个初步了解。

最终的效果图如下：

实验概览

实验分为三个步骤：

编写HTML代码，展示我们希望显示的内容

编写CSS代码，为内容增加样式，让展示更加美观

编写JavaScript代码，让页面出现动态的弹幕效果

整个实验通过完成，请访问

前端预览工具的截图如图所示：

预览工具一共分为四个部分：

左上角为HTML代码输入区域

右上角为CSS代码输入区域

左下角为JavaScript代码输入区域

右下角的效果预览区域，输入代码后可以实时看到效果变化

1 编写HTML代码

1.1 创建HTML页面框架

首先创建一个HTML页面的框架，HTML页面由<head>和<body>两部分构成。

<head>与<／head>之间可以编写基本的元信息，比如字符编码

<body>与<／body>之间是HTML的正文部分

注意大部分标签都是成对出现的，后面出现的标签会有一个／符号。

打开前端预览工具，已经默认给大家创建好了一个HTML页面框架：

1.2 内容布局

<div>是组织HTML内容最重要的一个元素之一，定义了一个文档中的区域（Division）。

我们首先添加以下代码，到<body>的内部：

在<div class="teacher">的内部，我们将放一位老师的信息。

多位老师的信息并排在一起，放在<div class="teacher-list">的内部。

teacher和teacher-list是给div增加的样式名称，具体的样式我们在第二个实验阶段编写。

1.3 增加图片、姓名和简介

在<div class="teacher">内部添加图片<img>，三级标题<h3>，以及段落<p>。

其中：

<img>用以显示老师的图片

<h3>用以显示老师的姓名

<p>用以显示老师的简介

在标签中添加的内容如下：

设置图片的源为：

老师的名字为：张海霞

老师的简介为：北京大学教授国际大学生iCAN创新创业大赛发起人、主席北京大学信息科学技术学院教授全球华人微纳米分子系统学会秘书长IEEE NTC 北京分会主席。

图片的src只是一个图片的URL，你可以打开这个URL查看该图片。你可以从网页中拷贝一张图片的URL，一般通过点击右键，选择拷贝图片地址就会把地址拷贝到剪贴板中，在编码区域中点击“粘贴”（或者ctrl+v）就能复制出来。

在<div class="teacher"></div>内部，添加如下代码：

张海霞

北京大学教授国际大学生iCAN创新创业大赛发起人、主席北京大学信息科学技术学院教授全球华人微纳米分子系统学会秘书长IEEE NTC 北京分会主席。

这里你可以将你自己的图片（需要在网络上可以访问），团队成员的名字和简介替换掉现有的内容。

1.4 增加其他老师信息

在<div class="teacher-list">中继续添加两个<div class="teacher">，往里面增加其他老师的信息。

陈江老师的图片地址为：

叶蔚老师的图片地址为：


       
        
    陈江
    
    北京大学信息科学技术学院副教授，高等学校电路和信号系统教学与教材研究会常务理事，中国通信理论与信号处理委员会委员。
  
   
  
       
        
    叶蔚
    
    北京大学软件工程国家工程研究中心副研究员，创办了技术学习服务平台天码营与软件开发协同工具。

2 编写CSS代码

HTML中的class属性是一般是用来添加CSS样式的。我们设置了teacher-list和teacher类，但并未给出它们CSS，现在便在CSS文件中添加它们的样式。

2.1 设置背景颜色

首先把HTML <body>的颜色设为灰色，#f5f5f5是RGB颜色的16进制表示。

你可以可以直接使用单词表示的颜色，比如yellow、red等。

更多的16进制颜色的值大家可以Google或者Baidu一下关键词“颜色代码”

body {  background: #f5f5f5;}

2.2 设置图片样式

人物图片<img>也应当有固定的宽高，设置圆角为宽高的一半则会使得图片变成圆形。同样来一点阴影，一个白色的和一个黑色的阴影重叠会形成多边框效果。

.teacher img {  width: 80px;  height: 80px;  border-radius: 40px;  box-shadow: 0 0 0 4px white, 0 0 0 5px #aaa;}

2.3 设置字体样式

为下面的一段文字<p>设置边距、字体大小、行高，以及高度。

p {  margin: 0;  font-size: 14px;  line-height: 1.5;  height: 120px;}

2.4 设置区域（Div）样式

设置teacher-list类的上边距为50像素，内部的文本居中对齐。

.teacher-list {  margin-top: 50px;  text-align: center;}

接着为每个人物面板teacher设置样式。

设置

宽度为200像素

背景色为白色

右外边距设为5像素

底部边距设为10像素

上下内边距30像素，左右内边距10像素。

三个老师的排列顶部对齐（vertical-align）

三个老师显示在同一行（display: inline-block）

border-radius给出了5像素的圆角

box-shadow设置了一个灰色的阴影

.teacher {  width: 200px;    background: white;  margin-right: 5px;  margin-bottom: 10px;  padding: 30px 10px;  vertical-align: top;  display: inline-block;  box-shadow: #ddd 5px 3px 5px;  border-radius: 5px;}

实验1和实验2最终的代码

HTML代码：


     
        
         
     张海霞
    
     北京大学教授国际大学生iCAN创新创业大赛发起人、主席北京大学信息科学技术学院教授全球华人微纳米分子系统学会秘书长IEEE NTC 北京分会主席。
  
    
  
        
         
     陈江
    
     北京大学信息科学技术学院副教授，高等学校电路和信号系统教学与教材研究会常务理事，中国通信理论与信号处理委员会委员。
  
    
  
        
         
     叶蔚
    
     北京大学软件工程国家工程研究中心副研究员，创办了技术学习服务平台天码营与软件开发协同工具。

CSS代码：

body {  background: #f5f5f5;}.teacher img {  width: 80px;  height: 80px;  border-radius: 40px;  box-shadow: 0 0 0 4px white, 0 0 0 5px #aaa;}p {  margin: 0;  font-size: 14px;  line-height: 1.5;  height: 120px;}.teacher-list {  margin-top: 50px;  text-align: center;}.teacher {  width: 200px;    background: white;  margin-right: 5px;  margin-bottom: 10px;  padding: 30px 10px;  vertical-align: top;  display: inline-block;  box-shadow: #ddd 5px 3px 5px;  border-radius: 5px;}

现在你应该已经看得到一个美观的页面啦！你可以替换图片和文字，或者自己尝试增加一些其它元素，让你的页面看起来更加有个性！

接下来我们就来给页面增加一些动态效果，这时需要JavaScript闪亮登场啦！

创新工程实践的课程上，同学们玩弹幕玩得很High，现在我们通过JavaScript来实现弹幕效果，给我们的静态页面增加动态元素。

3.1 引入jQuery等外部库

弹幕效果需要JavaScript来实现，在引入JavaScript之前，需要引入一个有用的库文件：jQuery。我们已经提前为大家封装了一个本教程会用到的所有JavaScript库的文件：，把下面一行代码添加到HTML<head>部分即可：

此时HTML头部的代码如下

...

3.2 增加辅助函数与数据

$(function() {  // 获取Body元素  var $danmu = $('body');  // 用以模拟弹幕内容的数组  var mock_msgs = ['每个人都应该学习编程，因为它教会你如何思考', '我上学期只上了两门课，创新工程实践和其他'];  // 用以模拟弹幕颜色的数组  var danmu_colors = ['red', 'green', 'blue', 'black', 'orange'];     // 随机获取一个数组中的元素  function random_from(arr){    var idx = Math.floor(Math.random()*arr.length);    return arr[idx];  }   // 从一个区间中选择一个数  function random_range(from, to) {    return Math.random() * (to - from) + from;  } });

注意接下来所有代码都是放在

$(function() {...  // 从一个区间中选择一个数  function random_range(from, to) {    return Math.random() * (to - from) + from;  }   //接下来编写的代码都应该放在这里，跟在random_range(from, to)函数后面。});

内部的。

3.3 创建弹幕元素

这里我们通过JavaScript代码来创建描述弹幕的HTML标签和内容，同时增加样式。

JavaScript使得我们可以动态地操作HTML和CSS元素，使得我们可以做出很酷的效果。

// 3.3 生成弹幕元素  function danmu_el(html) {    //生成弹幕的长度    var size = random_range(13, 50);    // 生成弹幕的高度    var top = random_range(20, window.innerHeight - 20 - size);    // 设置弹幕的样式    var style = ["position:fixed", "left: 100%", "white-space: nowrap",        'font-size:' + size + 'px',        'top:' + top + 'px',        'color:' + random_from(danmu_colors)    ].join(';');    // 返回动态生成的弹幕    return $('').html(html);  }

3.4 添加弹幕

添加弹幕的代码如下：

// 3.4 插入弹幕  function insert_danmu(html){    // 生成弹幕元素    var $el = danmu_el(html);    // 将弹幕元素动态添加到Body中    $danmu.append($el);    // 设置弹幕的动画效果    $el.animate({        left: '-2560px'    }, 1000 * 10, "linear", function() {        $el.remove();    });  }

3.5 启动弹幕，飞起来！

接下来就是启动弹幕了，一旦启动，屏幕上将会弹幕齐飞。

我们的策略是使用setInterval来定时发布弹幕，三秒钟（3000毫秒）向屏幕插入一条弹幕。

具体什么代码呢？哈哈，一会马上分解。

到这一步，我想你应该确保一点，你在JavaScript输入框中的代码看起来是这个样子的：

$(function() {  // 获取Body元素  var $danmu = $('body');  // 用以模拟弹幕内容的数组  var mock_msgs = ['每个人都应该学习编程，因为它教会你如何思考', '我上学期只上了两门课，创新工程实践和其他'];  // 用以模拟弹幕颜色的数组  var danmu_colors = ['red', 'green', 'blue', 'black', 'orange'];     // 随机获取一个数组中的元素  function random_from(arr){    var idx = Math.floor(Math.random()*arr.length);    return arr[idx];  }  // 从一个区间中选择一个数  function random_range(from, to) {    return Math.random() * (to - from) + from;  }   // 3.3 生成弹幕元素  function danmu_el(html) {    //生成弹幕的长度    var size = random_range(13, 50);    // 生成弹幕的高度    var top = random_range(20, window.innerHeight - 20 - size);    // 设置弹幕的样式    var style = ["position:fixed", "left:100%", "white-space: nowrap",        'font-size:' + size + 'px',        'top:' + top + 'px',        'color:' + random_from(danmu_colors)    ].join(';');    // 返回动态生成的弹幕    return $('').html(html);  }  // 3.4 插入弹幕  function insert_danmu(html){    // 生成弹幕元素    var $el = danmu_el(html);    // 将弹幕元素动态添加到Body中    $danmu.append($el);    // 设置弹幕的动画效果    $el.animate({        left: '-2560px'    }, 1000 * 10, "linear", function() {        $el.remove();    });  }});

3.5 启动弹幕，飞起来！

我们的策略是使用setInterval来定时发布弹幕，三秒钟（3000毫秒）向屏幕插入一条弹幕。代码如下：

// 3.5 以3000毫秒为间隔(Interval)，不断插入弹幕  setInterval(function(){    insert_danmu(random_from(mock_msgs));  }, 3000);

最终的代码

整个实验的代码大概一共一百行左右，最终的代码如下：

HTML代码：

   
     
        
         
     张海霞
    
     北京大学教授国际大学生iCAN创新创业大赛发起人、主席北京大学信息科学技术学院教授全球华人微纳米分子系统学会秘书长IEEE NTC 北京分会主席。
  
    
  
        
         
     陈江
    
     北京大学信息科学技术学院副教授，高等学校电路和信号系统教学与教材研究会常务理事，中国通信理论与信号处理委员会委员。
  
    
  
        
         
     叶蔚
    
     北京大学软件工程国家工程研究中心副研究员，创办了技术学习服务平台天码营与软件开发协同工具。

CSS代码：

body {  background: #f5f5f5;}.teacher img {  width: 80px;  height: 80px;  border-radius: 40px;  box-shadow: 0 0 0 4px white, 0 0 0 5px #aaa;}.teacher-list {  margin-top: 50px;  text-align: center;}.teacher {  width: 200px;    background: white;  margin-right: 5px;  margin-bottom: 10px;  padding: 30px 10px;  vertical-align: top;  display: inline-block;  box-shadow: #ddd 5px 3px 5px;  border-radius: 5px;}p {  margin: 0;  font-size: 14px;  line-height: 1.5;  height: 120px;}

JavaScript代码：

$(function() {  // 获取Body元素  var $danmu = $('body');  // 用以模拟弹幕内容的数组  var mock_msgs = ['每个人都应该学习编程，因为它教会你如何思考', '我上学期只上了两门课，创新工程实践和其他'];  // 用以模拟弹幕颜色的数组  var danmu_colors = ['red', 'green', 'blue', 'black', 'orange'];     // 随机获取一个数组中的元素  function random_from(arr){    var idx = Math.floor(Math.random()*arr.length);    return arr[idx];  }  // 从一个区间中选择一个数  function random_range(from, to) {    return Math.random() * (to - from) + from;  }   // 3.3 生成弹幕  function danmu_el(html) {    //生成弹幕的长度    var size = random_range(13, 50);    // 生成弹幕的高度    var top = random_range(20, window.innerHeight - 20 - size);    // 设置弹幕的样式    var style = ["position:fixed", "left:100%", "white-space: nowrap",        'font-size:' + size + 'px',        'top:' + top + 'px',        'color:' + random_from(danmu_colors)    ].join(';');    // 返回动态生成的弹幕    return $('').html(html);  }  // 3.4 插入弹幕  function insert_danmu(html){    // 生成弹幕元素    var $el = danmu_el(html);    // 将弹幕元素动态添加到Body中    $danmu.append($el);    // 设置弹幕的动画效果    $el.animate({        left: '-2560px'    }, 1000 * 10, "linear", function() {        $el.remove();    });  }  // 3.5 以3000毫秒为间隔(Interval)，不断插入弹幕  setInterval(function(){    insert_danmu(random_from(mock_msgs));  }, 3000);});

更多文章请访问