html5+css3+javascript实用案例:分组标签制作联系方式_优品建站

html5+css3+javascript实用案例:分组标签制作联系方式

一. 案例描述
  本案例将实现明日学院网站的“联系我们”页面。观察图2-18所示明日学院网站的“联系我们”页面,会发现页面的内容较多,所以案例4将介绍<div>和<span>分组标签,对页面的内容进行分类分组处理。下面将详细介绍<div>标签和<span>标签。

图2-18 明日学院网站的“联系我们”页面
二. 技术准备
  <div>和<span>分组标签
  在HTML5中,我们使用<div>标签和<span>标签来分组。如同Word文档中的段落,可以使用<div>标签和<span>标签对HTML5当中的其他标签进行分组管理。
(1)语法格式如下。
  <div>
  块状分组内容
  </div>
  <span>行内分组内容</span>
(2)语法解释。
  <div>标签可以定义文档中的分区或节。<div>占用的宽度是一行,这意味着<div></div>中的内容自动地开始一个新行。
  <span>标签用来对同一行内的文字分类分组。<span>占用的宽度与分组内容的宽度一致。
(3)举例:在网页中添加<div>标签和<span>标签(案例位置:光盘\MR\第2章\示例\2-6)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>分组一:使用div标签</div>
<div>分组二:使用div标签</div>
<span>分组三:使用span标签</span>
<span>分组四:使用span标签</span>
<br>
</body>
</html>
页面效果如图2-19所示。
图2-19 <div>和<span>标签的示例页面
说明
在HTML5中,可以使用“<!--注释内容-->”的方式对代码进行解释说明,浏览器对这部分注释代码不执行任何操作。
三. 案例实现
  【例2-4】 通过外链实现友情链接(案例位置:光盘\MR\第2章\源码\2-4)。
1.页面结构简图
  本案例中使用的标签有<img>标签、<div>标签以及<p>标签,各标签的功能如图2-20所示。
图2-20 页面结构简图
2.代码实现
  (1)新建index.html文件,在该文件中编写HTML代码,具体代码如下。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>联系我们</title>
</head>
<bodystyle="background-image: url(bg.jpg)">
<imgsrc="logo.png">
<div>
<p>工作时间:周一至周五 08:30-17:00</p>
<p>客服Email:mingrisoft@mingrisoft.com</p>
</div>
<br>
<div>
<p>公司地址:吉林省长春市南关区财富领域</p>
<p>邮政编码:130000</p>
</div>
<img src="map.png" width="400px">
</body>
</html>
  (2)代码编写完成后,单击WebStorm代码区右上角的谷歌浏览器图标,即可运行本实例,具体运行效果如图2-18所示。
四. 动手试一试
  通过本案例,读者应该理解<div>标签和<span>标签的区别,并且能够灵活应用。学完本案例,读者可以尝试制作如图2-21所示的商品详情页面(案例位置:光盘\MR\第2章\动手试一试\2-4)。
图2-21 商品详情页面

  • javascript实践案例:网页计算器
    网页计算器在Web开发中是很常见的功能。下面利用JavaScript中的函数,完成整数加、减、乘、除的运算,实现一个简易版的计算器。
  • html5实例:改进“About Me”页面
    本文我们将试着给“About Me”页面进行修改完善。
  • JavaScript中常用的判空方法
    在JavaScript中判断一个变量是否为空时,我们往往会想到对变量取反,然后判断是否为true。
  • JavaScript代理模式例子——小明追MM的故事
    本文我们从一个小例子开始熟悉代理模式的结构——小明追MM的故事。
  • javascript实战案例:统计某一个字符的个数
    找出字符串“Can you can a can as a Canner can can a can”中字符c的个数,不区分大小写。
  • HTML5案例实战:访问用户位置的方法和应用技巧
    由于国家网络限制,内地访问谷歌地图不是很顺畅,建议读者选用高德地图或百度地图开发API,也可以直接使用本书提供的用户key(http://lbs.amap.com/)进行上机练习。
  • PHP+Ajax+Jquery实用案例用户相册
    相册是网站用户中心常见的功能之一。本任务将在用户中心项目中开发一个相册功能,实现用户创建相册、上传图片。在实现功能时,要求程序支持在相册中创建子相册,任何一个相册中都可以上传图片。通过实现本任务,介绍PHP处理文件和目录的一些常用函数。
  • html+css实用案例:实现素材图片效果
    应用本章所学的CSS相关属性,使用素材图片,借助background-position实现“联系我们”页面。
  • JavaScript中的Hash结构
    除了支持数组结构外,JavaScript也支持键值对格式的数据,一般称为Hash,类似于Java语言中的java.util.HashMap类。
  • html5的<audio>标签和<video>标签
    在HTML5中,新增了两个标签——<video>标签与<audio>标签。<video>标签专门用来播放网络上的视频或电影,而<audio>标签则专门用来播放网络上的音频数据。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC