当前位置: 简表范文网 > 专题范文 > 公文范文 >

《HTML5网页设计》补充案例5(完整)

| 来源:网友投稿

下面是小编为大家整理的《HTML5网页设计》补充案例5(完整),供大家参考。

《HTML5网页设计》补充案例5(完整)

 

  补充案例 — “萌宠俱乐部”注册页面制 一、案例描述

 1、 、 考核知识点  表格与表单` 2、 、 练习目标  掌握表格样式的控制。

  掌握表单相关标记。

 3、 、 需求分析 表格和表单在互联网上随处可见,一般多用于登录和注册页面的制作。通过学习本案例可以使初学者进一步的巩固表格与表单等相关知识点。

 4、 、 案例 展示 效果如图 6-1 所示。

 图6-1 “萌宠俱乐部”效果展示 二、 布局及定义基础样式 1、 、 效果分析 ( (1 )HTML 结构分析 “萌宠俱乐部”首页面从上到下可以分为 5 个模块,如图 6-2 所示。

  头部导航banner内容版权信息 图6-2 “萌宠俱乐部”结构分析 ( (2 )CSS 样式分析 页面中的各个模块居中显示,页面的版心为 980px。另外,页面中的所有字体均为微软雅黑,字体大小为 16px,这些可以通过 CSS 公共样式进行定义。

  2、 、 页面布局 新建 index06.html 文件,在 index06.html 文件内书写 HTML 结构代码,具体代码如下。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 4 <head>

 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

 6 <title>萌宠俱乐部</title>

 7 </head>

 8 <body>

 9 <!--header begin-->

 10 <div class="header"></div>

 11 <!--header end-->

 12 <!--nav begin-->

 13 <div class="nav"></div>

 14 <!--nav end-->

 15 <!--banner begin-->

 16 <div class="banner"></div>

 17 <!--banner end-->

 18 <!--content begin-->

 19 <div class="content"></div>

 20 <!--content end-->

 21 <!--footer begin-->

 22 <div class="footer"></div>

 23 <!--footer end-->

 24 </body>

 25 </html> 在上述代码中,通过给 div 添加不同的类名来定义页面中的各个模块。

 3、 、 定义公共样式

  为了清除各浏览器的默认样式,使得网页在各浏览器中显示的效果一致,在完成页面布局后,首先要做的就是对 CSS 样式进行初始化并声明一些通用的样式。在 index06.html 文件所在的文件夹内新建 css 文件夹用于存放样式表文件 style06.css,使用链入式引入样式表文件。然后定义页面的基础样式,具体如下:

 /*重置浏览器的默认样式*/ *{margin:0;padding:0;border:0;list-style: none;} /*全局控制*/ body{font-family: "微软雅黑";font-size: 16px;} a{text-decoration: none;color:#fff;}

  三、案例制作 1、 、 制作头部 及导航 模块 ( (1 )HTML 结构分析 “头部”及“导航”模块分别由<div>进行控制。其中,头部的图片由<img>标记定义,导航内容由无序列表<ul>定义。“头部”及“导航”模块的具体结构如图 6-3 所示。

 <div><div><div><ul><img> <img> 图6-3 “头部”及“导航”模块结构图 ( (2)

 )

 样式 分析 “头部”模块的背景色通栏显示,“头部”及“导航”模块的版心宽为 980px,通过设置外边距属性使其在页面中居中显示。左侧 logo 和右侧图片分别设置绝对定位,最后还需设置导航栏的所有<li>左浮动及鼠标悬浮时<li>的背景样式。

 ( (3)

 )

 搭建结构 在 index06.html 文件内书写“头部”及“导航”模块的 HTML 结构代码。具体如下:

 1 <!--header begin-->

 2 <div class="header">

 3

  <div class="header_in">

 4

  <img class="left" src="images/logo.png" />

 5

  <img class="right" src="images/pic04.png" />

 6

  </div>

 7 </div>

 8 <!--header end-->

 9 <!--nav begin-->

 10 <div class="nav">

 11

  <ul>

 12

  <li><a href="#">首页</a></li>

 13

  <li><a href="#">萌宠领养</a></li>

 14

  <li><a href="#">萌宠医院</a></li>

 15

  <li><a href="#">萌宠食品</a></li>

 16

  <li><a href="#">萌宠资讯</a></li>

 17

  <li class="last"><a href="#">注册会员</a></li>

 18

  </ul>

 19 </div>

 20 <!--nav end-->

  ( (4)

 )

 定义样式 在样式表文件 style06.css 中书写 CSS 样式代码,用于控制“头部”及“导航”模块。具体如下:

 1 .header{

 2

 width:100%;

 3

 height: 86px;

 4

 background: url(../images/top.jpg) repeat-x;

 5 }

 6 .header_in{

 7

 width:980px;

 8

 margin:0 auto;

 9

 position: relative;

 10 }

 11 .header_in .left{

 12

 position: absolute;

 13

 left:0;

 14

 top:5px;

 15 }

 16 .header_in .right{

 17

 position: absolute;

 18

 right:78px;

 19

 top:13px;

 20 }

 21 .nav{

 22

 width:900px;

 23

 height:74px;

 24

 margin:0 auto;

 25

 padding-left: 80px;

 26

 background: url(../images/navbg.png) no-repeat;

 27 }

  28 .nav ul li{

 29

 float: left;

 30

 line-height: 45px;

 31

 width:100px;

 32

 height:48px;

 33

 text-align: center;

 34 }

 35 .nav ul li a{

 36

 display: block;

 37

 width:100px;

 38

 height:48px;

 39 }

 40 .nav ul li:hover{background: url(../images/pic03.png) no-repeat;}

 41 .nav ul li.last{background:url(../images/pic03.png) no-repeat;} 上述代码中,第 40 行代码用于设置鼠标悬浮时<li>的背景图片。

  保存 index06.html 与 style06.css 文件,刷新页面,效果如图 6-4 所示。

 图6-4 “头部”及“导航”模块效果图 2、 、作 制作 banner 模块 ( (1 )HTML 结构分析 “banner”模块由一个大盒子<div>进行控制。“banner”模块的具体结构如图 6-5 所示。<div> 图6-5 “banner”模块结构图 ( (2)

 )

 样式 分析 “banner”模块在页面中居中显示。

 ( (3)

 )

 搭建结构 在 index06.html 文件内书写“banner”模块的 HTML 结构代码。具体如下:

 1 <!--banner begin-->

 2 <div class="banner"></div>

 3 <!--banner end--> ( (4)

 )

 定义样式 在样式表文件 style06.css 中书写 CSS 样式代码,用于控制“banner”模块。具体如下:

 1 .banner{

 2

 width:980px;

 3

 height:330px;

 4

 margin:0 auto;

 5

 background: url(../images/banner.jpg) no-repeat;

 6 } 保存 index06.html 与 style06.css 文件,刷新页面,效果如图 6-6 所示。

 图6-6 “banner”模块效果图 3、 、 制作 内容 模块 ( (1 )HTML 结构分析 “内容”模块整体由<div>标记定义,其内部嵌套<table>标记定义表格及表单,标题部分由 2 个<div>标记定义。“内容”模块的具体结构如图 6-7 所示。

 <div><div><table><div><table> 图6-7 “内容”模块结构图 ( (2)

 )

 样式 分析 “内容”模块在页面中居中显示,可通过设置外边距实现,标题部分的背景通过插入背景图片实现。同时还需设置表格与表单的相关样式。

  ( (3)

 )

 搭建结构 在 index06.html 文件内书写“内容”模块的 HTML 结构代码。具体如下:

  1 <!--content begin-->

 2 <div class="content">

 3

 <div class="top">会员注册</div>

 4

 <form action="#" method="post">

 5

  <table class="con">

 6

  <tr>

 7

 <td class="left">昵称:</td>

 8

 <td><input type="text"

 class="right" /></td>

 9

 </tr>

  10

 <tr>

 11

 <td class="left">邮箱:</td>

 12

 <td><input type="text" class="right" /></td>

 13

 </tr>

 14

 <tr>

 15

 <td class="left">手机:</td>

 16

 <td><input type="text" class="right" /></td>

 17

 </tr>

 18

 <tr>

 19

 <td class="left">设置密码:</td>

 20

 <td><input type="password" maxlength="8" class="right" /></td>

 21

 </tr>

 22

 <tr>

 23

 <td class="left">确认密码:</td>

 24

 <td><input type="password" maxlength="8" class="right" /></td>

 25

 </tr>

 26

  27

 </table>

 28

  </form>

 29

  <div class="top">宠物信息</div>

 30

  <form action="#" method="post">

 31

  <table class="con">

 32

 <tr>

 33

  <td class="left">所属种类:</td>

 34

  <td>

 35

  <select>

 36

  <option>-请选择-</option>

 37

  <option>狗</option>

 38

  <option>猫</option>

 39

  <option>鼠</option>

 40

  <option>鸟</option>

 41

  <option>猪</option>

 42

  </select>

 43

  </td>

 44

  </tr>

 45

 <tr>

 46

  <td class="left">性别:</td>

 47

  <td>

 48

  <label for="boy"><input type="radio" name="sex" id="boy" />男

 49 </label>    

 50

  <label for="girl"><input type="radio" name="sex" id="girl" />女</label>

 51

  </td>

 52

  </tr>

 53

  54

  <tr>

 55

  <td class="left">年龄:</td>

 56

  <td>

 57

  <select>

 58

  <option selected="selected">-请选择-</option>

 59

  <option>1 岁</option>

 60

  <option>2 岁</option>

 61

  <option>3 岁</option>

 62

  <option>4 岁</option>

 63

  <option>5 岁</option>

 64

  <option>6 岁</option>

 65

  <option>7 岁</option>

 66

  </select>

 67

  </td>

 68

  </tr>

 69

  <tr>

 70

  <td class="left">喜爱的食物:</td>

 71

  <td>

 72

  <label for="one"><input type="checkbox" id="one"/>面食</label>   

 73

  <label for="two"><input type="checkbox" id="two"/>青草</label>   

 74

  <label for="three"><input type="checkbox" id="three"/>肉类</label>   

 75

  <label for="four"><input type="checkbox" id="four"/>杂粮</label>   

 76

  <label for="five"><input type="checkbox" id="five"/>水果</label>   

 77

  <label for="six"><input type="checkbox" id="six"/>蔬菜</label>

 78

  </td>

 79

  </tr>

 80

  <tr>

 81

  <td class="left">备注:</td>

 82

  <td>

 83

  <textarea cols="60" rows="8">请填写备注内容。</textarea>

 84

  </td>

 85

  </tr>

 86

  <tr>

 87

  <td colspan="2"><input type="button" value="完成注册" class="btn" /></td>

 88

  </tr>

 89

  90

 </table>

 91

  </form>

 92 </div>

 93 <!--content end--> ( (4)

 )

 定义样式 在样式表文件 style06.css 中书写 CSS 样式代码,用于控制“内容”模块。具体如下:

 1 .content{

 2

 width:980px;

 3

 height:985px;

 4

 margin:0 auto;

 5

 background:#f5f5f5;

  6 }

 7 .content .top{

 8

 width:945px;

 9

 height:26px;

 10

 padding:5px 0 0 35px;

 11

 color:#edf7d8;

 12

 background: url(../images/pic01.jpg) no-repeat;

 13 }

 14 .content .con{padding:50px 0 45px 250px;}

 15 td{

  16

 height:50px;

  17

 color:#89b52a;

 18 }

 19 tr .left{

 20

 width:120px;

  21

 text-align:right;

 22 }

 23 tr .right{

 24

 width:310px;

  25

 height:28px;

  26

 padding-left: 10px;

 27

 border:1px solid #89b52a;

 28 }

 29 input{vertical-align:middle;}

 30 select{

 31

 width:171px;

  32

 border:1px solid #89b52a;

  33

 color:#89b52a;

 34 }

 35 textarea{

 36

 width:380px;

  37

 border:1px solid #89b52a;

  38

 resize:none...

相关推荐

热门文章

2022大学自我鉴定毕业生登记表不足之处10篇(精选文档)

《大学自我鉴定毕业生登记表不足之处精选10篇》是一篇好的范文,感觉写的不错,希望对您有帮助,为了方便大家的阅读。对于刚刚毕业的生,写好一份自我鉴定也是进入岗位的开始,但刚毕业的大学生如何写好自我鉴定呢?下面是小编给大家带来的大学自我鉴定毕业生登记表不足之处精选10篇,欢迎大家阅读参考,我们一起来看看

优秀大学生实习报告【完整版】

最近发表了一篇名为《优秀大学生实习报告2022精选》的范文,好的范文应该跟大家分享,看完如果觉得有帮助请记得(CTRL+D)收藏本页。能拓展大学生的综合素质,培养适应型人才。实习是大学生拓展自身素质的主要载体之一,那么关于一份好的实习报告要怎么写?以下是小编为大家准备了优秀大学生实习报告2

五四青年节青春演讲稿

《五四青年节青春演讲稿2022》是一篇好的范文,觉得有用就收藏了,重新编辑了一下发到。青年们还要集中进行各种社会志愿和社会实践活动,还有许多地方在青年节期间举行****仪式。五四的核心内容为,进步,民主,科学。以下是小编为大家准备了五四青年节演讲稿2022范本,欢迎参阅。五四青年节青春演讲

梦想从这里起航演讲稿10分钟左右(全文完整)

本页是最新发布的《梦想从这里起航演讲稿10分钟左右》的详细范文参考文章,感觉很有用处,为了方便大家的阅读。是什么?是人们在梦里所大胆的想象,是美好的期望,它不一定会实现。那既然有可能实现不了,为什么还要人们拼命去实现呢?因为梦想的美好在于实现它的过程。下面是小编为大家整理的梦想从这里起航演

关于河流污染演讲稿合集(完整)

最近发表了一篇名为《关于河流污染的演讲稿》的范文,感觉很有用处,重新编辑了一下发到。演讲稿具有逻辑严密,态度明确,观点鲜明的特点。在不断进步的时代,能够利用到演讲稿的场合越来越多,在写之前,可以先参考范文。下面是小编为大家整理的关于河流的演讲稿,希望能够帮助到大家!关于河流污

2022管理实习报告最新

本页是最新发布的《管理实习报告2022年最新》的详细范文参考文章,觉得应该跟大家分享,希望对网友有用。在不断进步的时代,报告的适用范围越来越广泛,报告具有双向沟通性的特点。那么报告应该怎么写才合适呢?下面是小编整理的报告2022年最新,希望能够帮助到大家。管理实习报告2022年最新1【前言

五四精神演讲稿

本页是最新发布的《2022五四精神演讲稿》的详细范文参考文章,感觉很有用处,这里给大家转摘到。演讲稿也叫演讲词,它是在较为隆重的仪式上和某些公众场合发表的讲话文稿。演讲稿是进行演讲的依据,是对演讲内容和形式的规范和提示,它体现着演讲的目的和手段。以下是小编整理的2022五四演讲稿

2022年度清明节感怀演讲稿【完整版】

本页是最新发布的《2022清明节感怀演讲稿》的详细范文参考文章,好的范文应该跟大家分享,重新编辑了一下发到。4月4日,是我国的传统节日:清明节,让怀着无比沉重和景仰的心情来缅怀革命,继承革命传统。你知道么,今天小编整理了清明节感怀演讲稿供大家参考,一起来看看吧!清明节感怀演讲稿一

三下乡社会实践报告最新

《2022三下乡社会实践报告最新》是一篇好的范文,好的范文应该跟大家分享,为了方便大家的阅读。随着个人的文明素养不断提升,报告的使用成为日常生活的常态,通常情况下,报告的内容含量大、篇幅较长,那么下面给分享关于2022报告最新,欢迎阅读!三下乡社会实践报告【篇1】20__年8月,队(新城区三分队)在

2022年度大学生个人实习报告最新(完整文档)

最近发表了一篇名为《2022年大学生个人实习报告最新》的范文,觉得有用就收藏了,希望大家能有所收获。使大学生增加社会阅历,积累经验。社会阅历和工作经验是职业场中的决定因素。只有参加实习,通过实习的检验,才能积累自身的阅历和经验。小编在这给大家带来2022年大学生个人实习报告最新,欢迎大

2022年度集体荣誉感演讲稿大全【优秀范文】

本页是最新发布的《集体荣誉感演讲稿大全》的详细范文参考文章,感觉写的不错,希望对您有帮助,希望大家能有所收获。演讲稿是人们在工作和社会生活中经常使用的一种文体。它可以用来交流思想、感情,表达自己的主张、看法;也可以用来介绍自己的学习、工作情况和经验……下面是小编为大家整理的荣誉感演讲稿大全

2022教学工作会议演讲稿(全文完整)

《教学工作会议演讲稿》是一篇好的范文,觉得应该跟大家分享,希望大家能有所收获。演讲稿是人们在工作和社会生活中经常使用的一种文体。它可以用来交流思想,感情,表达主张,见解。也可以用来介绍自己的学习,工作情况和经验等等。下面是小编为大家整理的工作会议演讲稿,希望能够帮助到大家!教学工作会议演讲稿1各位: