HTML5程序开发范例宝典最新章节_韩旭著

1.1 页面背景和布局

实例001 统一站内网页风格

这是一个提高基础技能的实例

实例位置：光盘\mingrisoft\01\001

实例说明

虽说个性突出的网站能吸引用户的眼球，但是如果将一个网站的每个页面都制作得花花绿绿，就会给人很“晕”的感觉，所以在设计网站时，一定要在突出个性的同时，统一风格。本实例将介绍如何在设计网站时，应用CSS样式统一网站风格。运行结果如图1.1所示。

图1.1 统一站内网页风格

技术要点

本实例主要应用CSS样式的字体属性、颜色属性、边框属性实现，下面对这些属性进行详细的介绍。

（1）字体属性

字体属性主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换等，如表1.1所示。

表1.1 字体属性

（2）颜色和背景属性

CSS的颜色属性允许设计者指定页面元素的颜色，背景属性用于指定页面的背景颜色或者背景图像的属性。颜色和背景属性如表1.2所示。

表1.2 颜色和背景属性

（3）边框属性

边框属性用于设置一个元素边框的宽度、样式和颜色。边框属性如表1.3所示。

表1.3 边框属性

下面对边框样式的值进行详细的说明，如表1.4所示。

表1.4 边框样式属性值

续表

注意：CSS 样式中的 td{ font-size: 9pt;}表示应用于页面中所有的<td>标记；.botton1{ font-size: 9pt;}表示自定义的CSS样式，只有将标记的class属性值设置为botton1，才可以调用CSS样式。

实现过程

（1）利用<link>标记，引用CSS样式文件。代码如下：

（2）CSS样式表文件的代码如下：

<!-

td{

font-size: 9pt; color:#3c7796;

}

a:hover {

font-size: 9pt; color:#FFC000;

}

font-size: 9pt; text-decoration: none; color:#0000FF;

}

.btn_grey{

font-family:"宋体"; font-size: 9pt;color: #333333;

background-color: #eeeeee;cursor:hand;padding:1px;height:19px;

border-top: 1pxsolid #FFFFFF;border-right:1px solid #666666;

border-bottom: 1pxsolid #666666;border-left: 1px solid#FFFFFF;

}

input{

font-family:"宋体";

font-size: 9pt;

color:#333333;

border: 1px solid #999999;

}

.tableBorder {

background-color:#f 7f 7f 7; border: #dedede1px solid; width:750px

}

-->

（3）在页面布局的表格中利用class来调用CSS文件中的样式。代码如下：

<formname="form1" method="post" action="">

<tablewidth="71%" height="24" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="905" class="tableBorder"><img src="images/Forum_nav.gif"align="absmiddle">空车信息→车辆信息发布</td>

</tr>

</table>

<tablewidth="84%" height="26" border="0" cellpadding="0" cellspacing="0">

<tr>

</tr>

</table>

<tablewidth="84%"height="233" border="0"cellpadding="0"cellspacing="0">

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<td><div align="center">驾驶员姓名：</div></td>

<td><div align="center">驾驶员驾龄：</div></td>

</tr>

<tr>

</tr>

</table>

<tr>

<p>请不要重复发布信息，如果重复发布信息，<br>

系统将把重复的信息删除，而且将拒绝用户发布信息48小时。</p>

</div></td>

</tr>

<tr>

</div></td>

</tr>

</table>

<tr>

</tr>

</table></td>

</tr>

</table>

</form>

举一反三

根据本实例，读者可以进行以下操作。

统一网站的背景图片及背景颜色。

保持网站标志性元素的一致性。

实例002 网页换肤

本实例是一个实用的程序

实例位置：光盘\mingrisoft\01\002

实例说明

在Internet 上很多网页都具有换肤功能。所谓网页换肤就是指用户可以根据自己的喜好选择页面的风格，例如 Go 购电子商城首页中的网页换肤功能。运行本实例，单击“[秋叶飘香/经典]”超级链接，整个页面将以橘黄色系为主，如图 1.2 所示。单击“[灰色畅想/舒畅]”超级链接，整个页面将以灰色系为主，如图1.3所示。

图1.2“秋叶飘香”风格的页面

图1.3“灰色畅想”风格的页面

技术要点

本实例主要应用样式表对象的href属性实现。通过样式表对象的href属性可以很方便地改变网页中应用的外部样式表文件，具体代码如下：

document.getElementById("myCss").href="css1.css";

参数说明：

● myCss：外部样式表对象的id，用于指定外部样式表对象。

● css1.css：外部样式表文件名。

实现过程

（1）定义 CSS 样式。由于应用外部 CSS 样式表文件可以很方便地修改网页的整体风格，所以为了动态改变网页的整体风格，可以根据需要将各种风格的样式定义为单独的外部样式表文件。本实例中共定义了两个外部样式表文件，分别是“css1.css”（“秋叶飘香”风格）和“css.css”（“灰色畅想”风格），详细代码请参见本书附带的光盘。

（2）在页面中引用外部样式表文件css1.css，并将其id属性设置为myCss，代码如下：

<linkid="myCss"href="css1.css"rel="stylesheet">

（3）编写自定义函数writeCookie( )，用于将指定的值写入到Cookie 中，Cookie 的有效期为 30 天。writeCookie( )函数只有一个用于指定外部样式表文件名的参数 csspath，无返回值，代码如下：

function writeCookie(csspath){

var today=newDate();

var expires =newDate();

expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天

var str="cssPath="+csspath+";expires="+expires.toGMTString()+";";

document.cookie=str;

}

</script>

（4）编写自定义函数 readCookie ()，用于从 Cookie 中读取使用的外部样式文件名。ReadCookie()函数只有一个用于指定Cookie 名称的参数，无返回值，代码如下：

functionreadCookie(cookieName){

var search = cookieName+"=";

if (document.cookie.length >0) {

offset =document.cookie.indexOf(search);

if(offset!=-1){

offset+=search.length;

end =document.cookie.indexOf(";",offset);

if (end ==-1){

end =document.cookie.length;

return unescape(document.cookie.substring(offset,end));

}

</script>

（5）编写自定义的函数ifCookie()，用于初始化页面风格，关键代码如下：

function ifCookie(){

if(readCookie("cssPath")==undefined){//当标记页面网格的Cookie不存在时

writeCookie("css1.css");//调用writeCookie()函数将默认值写入Cookie

}

document.getElementById("myCss").href=readCookie("cssPath");

}

</script>

（6）编写自定义的函数change()，用于改变页面的整体风格，关键代码如下：

function change(myCss,csspath){

writeCookie(csspath);//调用writeCookie()函数将指定的页面风格写入Cookie

document.getElementById(myCss).href=readCookie("cssPath");

}

</script>

（7）在<body>标记的 onLoad 事件中调用ifCookie()方法初始化页面风格，关键代码如下：

<bodyleftmargin="0" topmargin="0" onLoad="ifCookie();">

（8）在页面的适当位置加入改变页面风格的超级链接，并在其onClick事件中调用change()方法改变页面整体风格，代码如下：

自选风格：

<ahref="#" onClick="change('myCss','css1.css')">[秋叶飘香/经典]</a>

<ahref="#" onClick="change('myCss','css.css')">[灰色畅想/舒畅]</a>

举一反三

根据本实例，读者可以进行以下操作。

统一改变网页文字的大小。

改变图片的显示样式。

实例003 制作渐变背景

这是一个提高基础技能的实例

实例位置：光盘\mingrisoft\01\003

实例说明

在浏览网页时，经常会看见页面背景的渐变效果，它可以使页面更加美观。本实例将通过CSS样式来设置页面的渐变效果。运行结果如图1.4所示。

图1.4 制作渐变背景

技术要点

本实例主要应用CSS样式的Alpha滤镜实现。

Alpha滤镜的语法格式：

{filter：Alpha(Opacity=value，Finishopacity=value，Style=value，Startx=value，Starty=value，Finishx=value，Finishy=value)}

参数说明：

● Opacity：代表透明水准。默认的范围是0～100，0 代表完全透明，100 代表完全不透明。

● Finishopacity：一个可选参数。设置渐变的透明效果时，就用这个参数来指定结束时的透明度，范围是0～100。

● Style：指定透明区域的形状特征，0 代表统一形状，1 代表线形，2 代表放射状，3 代表长方形。

● Startx：渐变透明效果的开始x 坐标。

● Starty：渐变透明效果的开始y 坐标。

● Finishx：渐变透明效果的结束x 坐标。

● Finishy：渐变透明效果的结束y 坐标。

功能：设置透明层次。Alpha属性是把一个目标元素与背景混合。可以通过指定数值来控制。

实现过程

定义使页面背景渐变的CSS样式。代码如下：

<styletype="text/css">

<!-

body{

background:blue;/*设置页面的背景颜色*/

filter:Alpha(Opacity=20,Finishopacity=80,Style=3,Startx=100,Starty=100,Finishx=0,Finishy=0);/*设置透明的样式及透明的大小*/

}

-->

</style>

举一反三

根据本实例，读者可以进行以下操作。

设置背景渐变的表格。

设置文字渐变的效果。

实例004 把两个div并排显示在浏览器中

本实例可以提高工作效率

实例位置：光盘\mingrisoft\01\004

实例说明

div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。本实例将实现把两个div并排显示在浏览器中。其运行结果如图1.5所示。

图1.5 两个div 并排

技术要点

本实例主要应用CSS中的float属性，该属性定义元素在哪个方向浮动。在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。float属性的可选值及其说明如表1.5所示。

表1.5 float属性的可选值及其说明

实现过程

在页面中定义两个<div>标签，并为这两个<div>标签添加CSS样式，包括宽度、高度、浮动以及边框等属性。关键代码如下：

<html>

<head>

<title>两个div并排</title>

<style>

.onediv{

width:90px;

height:50px;

float:left;

margin:5px;

border:1px #000 solid;

background:#ff0000

}

.twodiv{

width:90px;

height:50px;

float:left;

margin:5px;

border:1px #000 solid;

background:#99CC00

}

</style>

</head>

<body>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

把两个div显示在浏览器的两端。

把多个图像并排显示在浏览器中。

实例005 通过DIV+CSS对电子商城的页面进行布局

本实例可以提高网站安全性

实例位置：光盘\mingrisoft\01\005

实例说明

论坛、门户网站的个人主页以及电子商务的购物车等一般都是采用一行两列的浮动布局。采用这种布局方式的主要好处是页面简洁，功能按钮丰富，展示内容空间大。本实例将通过DIV+CSS采用一行两列的布局模式设计一个电子商城的页面，运行结果如图1.6所示。

图1.6 一行两列浮动布局

技术要点

实现电子商城页面一行两列的布局主要应用的是CSS中的float属性，关于该属性的介绍请参考实例006，这里不再赘述。

实现过程

（1）创建index.html文件，设计页面编码格式为UTF-8，通过<link>标签载入CSS样式文件，设计页面的标题。在<body>标签中定义3个<div>标签，并设置<div>标签的class属性，完成页面的一行两列浮动布局，其关键代码如下：

<html>

<head>

<title>设计电子商务网站布局</title>

</head>

<body>

</body>

</html>

（2）创建 CSS 样式文件，定义页面中<body>标签和<div>标签所使用的样式。包括各 div块的宽度、高度和背景图片，同时通过浮动技术完成class属性为two的div块向左浮动，class属性为three的div块向右浮动。CSS样式的关键代码如下：

@CHARSET"UTF-8";

body{

margin:0px auto;　　　　　　　　　　　　/*设置外边框距各边的距离*/

width:800px;　　　　　　　　　　　　　　　　/*设置容器宽度*/

height:700px;　　　　　　　　　　　　　/*设置容器高度*/

}

.one{　　　　　　　　　　　　　　　　　　/*设置class等于one的容器*/

margin:10px auto;　　　　　　　　　　　　/*设置外边距各边的距离*/

width:800px;　　　　　　　　　　　　　　　　/*设置容器宽度*/

height:200px;　　　　　　　　　　　　　/*设置容器高度*/

border:1px solid #e7e7e7;　　　　　　　　/*设置边框*/

background-image:url(../images/top.jpg);/*设置背景图片*/

}

.two{　　　　　　　　　　　　　　　　　　/*设置class等于two的容器*/

margin:1px auto;　　　　　　　　　　　　/*设置外边距各边的距离*/

width:200px;　　　　　　　　　　　　　　　　/*设置容器宽度*/

height:500px;　　　　　　　　　　　　　/*设置容器高度*/

border:1px solid #e7e7e7;　　　　　　　　/*设置边框*/

float:left;　　　　　　　　　　　　　　　/*设置容器向左浮动*/

background-image:url(../images/left.jpg);/*设置背景图片*/

}

.three{　　　　　　　　　　　　　　　　　　　　/*设置class等于three的容器*/

margin:1px auto;　　　　　　　　　　　　/*设置外边距各边的距离*/

width:593px;　　　　　　　　　　　　　　　　/*设置容器宽度*/

height:500px;　　　　　　　　　　　　　/*设置容器高度*/

border:1px solid #e7e7e7;　　　　　　　　/*设置边框*/

float:right;　　　　　　　　　　　　　　/*设置容器向右浮动*/

background-image:url(../images/right.jpg);/*设置背景图片*/

}

举一反三

根据本实例，读者可以进行以下操作。

采用一行两列布局模式设计网站主页。

应用<div>标签设计论坛后台管理页面。

实例006 设置4张图片并排显示在浏览器

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\01\006

实例说明

要设置4张图片并排显示在浏览器中，可以把这4张图片放在一个一行四列的表格内，但这并不是我们想要的方式。本实例将4张图片放置在4个<div>标签中，并在浏览器中并排显示这4张图片，如图1.7所示。

图1.7 4 张图片并排显示

技术要点

在本实例中主要应用了CSS的float属性、margin属性和border属性，分别用来设置<div>标签的浮动、外边距和边框。CSS代码如下：

div{

float:left; margin-right:10px; border:1px #000 solid;

}

实现过程

在页面中定义4个<div>标签，把4张图片分别放在4个<div>标签中，然后定义<div>标签的CSS样式，具体代码如下：

<html>

<head>

<title>4张图片并排显示</title>

<style>

div{

float:left;

margin-right:10px;

border:1px #000 solid;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过DIV设计网站横向导航。

通过DIV设计网站竖向导航。

实例007 应用<div>标签设计用户注册页面

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\01\007

实例说明

在进行网页排版中，用户可以使用<table>标签进行布局，但是在比较大的网页中，用<table>标签的布局会使页面代码变得混乱，不容易解读。所以应尽量使用<div>标签进行页面布局。运行本实例，如图1.8所示。

图1.8 <div>标签设计用户注册页面

技术要点

本实例的关键点是对<div>标签定位的灵活运用，运用CSS 样式控制页面的样式，核心代码如下：

body{

margin:0px;

text-align:center;

}

.one{

position:absolute;

margin-top:100px;

width:595px;

height:448px;

background:url(../pic/bg.jpg);

}

input{

width:150px;

height:18px;

border-left:0;

border-top:0;

border-right:0;

border-bottom:1px#CCCCCCsolid;

background:#6BACCC;

}

.two{

margin-top:200px;

margin-left:200px;

font-family:"楷体_GB2312";

font-size:16px;

color:#0000FF;

}

#pic{

border:0;

background:url(../pic/bt.jpg);

width:39px;

}

.three{

margin-right:170px;

}

实现过程

（1）创建index.html文件，在文件中利用<div>标签对网页进行排版，引入CSS样式，创建表单元素。代码如下：

<html>

<head>

<title>应用div标签设计用户注册页面</title>

</head>

<body>

<divclass="two">

<div>

昵称：<input type="text"/>

</div>

<div>

密码：<input type="password"/>

</div>

<div>

QQ：<input type="text"/>

</div>

<div>

住址：<input type="text"/>

</div>

</div>

</body>

</html>

（2）编写CSS样式，对文本标签和标签位置定位进行设置，代码如技术要点中所示。

举一反三

根据本实例，读者可以进行以下操作。

通过<div>标签设计页面布局。

通过<div>标签设计横向导航子菜单。

实例008 应用div元素构建一个完整的表格

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\01\008

实例说明

下面是一个应用div元素构建一个完整表格的实例。在该实例中，通过将许多 div元素的类型指定为表格相关各种类型，使这些div元素共同构成了一个完整的表格。其运行结果如图1.9所示。

图1.9 div元素构建的表格

技术要点

本实例主要应用的是 CSS3 中与表格相关的元素及其所属类型。在CSS3 中所有与表格相关的元素及其所属类型如表1.6所示。

表1.6 CSS3中所有与表格相关的元素及其所属类型

实现过程

创建index.html文件，在文件中通过<div>标签对“课程表”进行布局，并在CSS中设置其对应的表格元素及其样式。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>完整表格的构成实例</title>

<styletype="text/css">

.table{

display: table;

border: solid 3px #00aaff;

}

.caption{

display: table-caption;

text-align: center;

font-size:26px;

}

.tr{

display:tablerow

}

.td {

display: table-cell;

border: solid 2px #aaff00;

padding: 10px;

}

.thead{

display: table-header-group;

background-color:#ffffaa;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

应用div元素构建表格完成页面主页的设计。

实例009 使用column-count属性实现分栏的实例

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\01\009

实例说明

本实例将应用column-count属性对页面内容进行分栏布局。在Opera浏览器中运行本实例，可以看到页面中的内容被分成左右两部分进行输出，运行结果如图1.10所示。

图1.10 对页面内容进行分栏布局

技术要点

本实例主要应用CSS3中的column-count属性实现页面内容的分栏显示。通过CSS3实现分栏非常简单，只要简单地增加column-count属性即可。column-count属性规定元素应该被划分的列数。语法如下：

column-count: number|auto;

● number：元素内容将被划分的列数。

● auto：由其他属性决定列数，比如“column-width”。

实现过程

创建index.html文件，在文件中定义一个<div>标签，在标签中输入编程词典软件的介绍，然后定义CSS样式，实现页面内容的分栏布局。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<styletype="text/css">

div#content {

column-count: 2;

-moz-column-count: 2;

-o-column-count:2;

-webkit-column-count: 2;

}

</style>

</head>

<body>

<h2>编程词典软件介绍</h2>

        编程词典个人版系列产品是专门为各级程序员和编程爱好者开发的专业编程资源库。它提供了海量的开发资源、丰富的实例项目、灵活的查询方式、多样的学习模式，既可以帮助零基础者快速入门，又可以帮助有一定基础者快速提升开发水平，更适合程序开发人员随时检索查询，随时粘贴复用。<br/>

        编程词典是程序开发人员的左膀右臂，软件工程师必备的专业指南。

</div>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

对文章进行分栏显示输出。

对页面内容进行左、中、右的分栏布局。

实例010 文字和图片完整居中

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\01\010

实例说明

下面是一个在页面中使文字和图片完整居中的实例。运行实例，结果如图1.11所示。由图可以看到，文字和图片不仅在div中居中显示，而且div相对于整个页面也是居中的。

图1.11 文字和图片完整居中显示

技术要点

本实例主要应用CSS中的text-align、margin、vertical-align属性使文字和图片实现居中显示。CSS代码如下：

<styletype="text/css">

<!-

body{

text-align:center;

margin:0 auto;

}

.main {

color:#0066CC;

margin:5px auto;

width:500px;

border:1px solid #000000;

}

.main img {

vertical-align:middle;

}

-->

</style>

实现过程

创建index.html文件，首先在文件中定义一个<div>标签，在div中输入文字并插入一张图片，然后编写CSS样式使文字和图片居中显示。关键代码如下：

<!DOCTYPEhtml PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>文字和图片居中</title>

<styletype="text/css">

<!-

body{

text-align:center;

margin:0 auto;

}

.main {

color:#0066CC;

margin:5px auto;

width:500px;

border:1px solid #000000;

}

.main img {

vertical-align:middle;

}

-->

</style>

</head>

<body>

编程词典让您编程无忧

</div>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

设置div水平垂直居中。

使文字和图片显示在页面两端。

实例011 应用CSS控制登录页面显示样式

本实例是一个人性化的实例

实例位置：光盘\mingrisoft\01\011

实例说明

为了整个项目页面的规范性，通常会将项目的页面都应用一种样式。本实例实现应用CSS样式控制登录页面样式的功能。运行程序，效果如图1.12所示。

图1.12 应用CSS 控制登录页面显示样式

技术要点

本实例主要使用CSS中的选择器定义页面中表格文字的样式、按钮的样式以及页面的边距等来控制登录页面的显示样式。CSS代码如下：

<style>

td {　　　　　　　　　　　　　　/*定义表格列中文字样式*/

font-size: 9pt;

color:#000000;

}

.btn_grey {　　　　　　　　　　　/*定义控制按钮的类型选择器*/

font-family: "宋体";　font-size: 9pt;color: #333333;

background-color: #eeeeee;cursor:hand;padding:1px;height:19px;

border-top: 1px solid #FFFFFF;border-right:1px solid #666666;

border-bottom: 1px solid #666666;border-left: 1px solid#FFFFFF;

}

input{　　　　　　　　　　　　　/*标签选择器*/

font-family: "宋体";

font-size: 9pt;

color:#3F9

border: 1px solid #999999;

}

body {　　　　　　　　　　　　　/*标签选择器*/

margin-left:0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

</style>

实现过程

（1）在页面中定义CSS样式，实现控制页面中表格文字的样式，并定义按钮显示样式等，代码如下：

<style>

td {　　　　　　　　　　　　　　/*定义表格列中文字样式*/

font-size: 9pt;

color:#000000;

}

.btn_grey {　　　　　　　　　　　/*定义控制按钮的类型选择器*/

font-family: "宋体";　font-size: 9pt;color: #333333;

background-color: #eeeeee;cursor:hand;padding:1px;height:19px;

border-top: 1px solid #FFFFFF;border-right:1px solid #666666;

border-bottom: 1px solid #666666;border-left: 1px solid#FFFFFF;

}

input{　　　　　　　　　　　　　/*标签选择器*/

font-family:"宋体";

font-size: 9pt;

color:#3F9

border: 1px solid #999999;

}

body {　　　　　　　　　　　　　/*标签选择器*/

margin-left:0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

</style>

（2）在登录页面中，定义表单元素，此时页面中定义的标记选择器就自动为页面元素添加样式。代码如下：

<formid="form1" name="form1" method="post" action="">

<p>使用CSS样式设置登录页面样式</p>　　　　　<%--定义页头信息--%>

<tablewidth="413" height="129" border="1">

<tr>

</div></td>

</tr>

<tr>

</div></td>

</tr>

<tr>

</div></td>

</tr>

</table>

</form>

举一反三

根据本实例，读者可以进行以下操作。

应用CSS样式添加图像边框。

应用CSS样式修饰表格。