- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 354字
- 2024-12-21 21:57:31
1.3 使用新元素对页面进行布局
实例015 使用HTML5的新元素对页面进行分栏设计
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\015
实例说明
本实例通过使用HTML5中新增的页面元素对页面进行分栏设计，将页面内容实现分栏显示。分栏功能是页面布局的基础，本实例将页面分为上、中、下3个部分。其运行结果如图1.16所示。
图1.16 对页面进行分栏设计
技术要点
本实例应用的是HTML5中新增的页面元素<header>、<nav>、<article>和<footer>。<header>元素可以明确地告诉浏览器此处是页头，使用<nav>标记可以构建页面的导航，<article>标记用于构建页面内容的一部分，<footer>元素用于定义页脚。
实现过程
创建index.html文件，在文件中应用<header>、<nav>、<article>和<footer>元素对页面进行分栏设计，并通过CSS定义元素的显示样式。关键代码如下：
<!DOCTYPEhtml>
<head>
<meta charset=utf-8>
<title>对页面进行分栏设计</title>
<styletype="text/css">
header,nav,article,footer{
border:solid 1px#666;
padding:5px
}
header{
width:520px
}
nav{
float:left;
width:80px;
height:100px
}
article{
float:left;
width:428px;
height:100px
}
footer{
clear:both;
width:520px
}
</style>
</head>
<body>
<header class="bgColor">导航部分</header>
<nav>菜单部分</nav>
<article>主体内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
应用<div>标签对页面进行分栏设计。
使用HTML5的新增元素设计页面的结构布局。
实例016 应用HTML5新增的元素制作简单用户注册页面
本实例是一个人性化的实例
实例位置：光盘\mingrisoft\01\016
实例说明
在HTML5中，大大加强了关于表单这一部分的功能。本实例将应用HTML5新增的元素来制作一个网页上常用的简单用户注册页面。其在Opera浏览器中的运行结果如图1.17所示。
图1.17 应用HTML5 新增元素制作简单用户注册页面
技术要点
在本实例中，综合使用了HTML5中新增的input元素，并对这些元素添加了必要的验证属性。其中应用到的input元素类型有email输入类型、range输入类型、number输入类型、date类型和url输入类型。
实现过程
在页面中应用HTML5中新增的input元素创建一个注册表单，并应用CSS对表单的样式进行设计，关键代码如下：
<body>
<h1>注册表单</h1>
<formid=regFormonsubmit="return chkForm();" method=post>
<fieldset>
<ol>
<li><label for=username>用户昵称：</label><input id=username name=username autofocus required>
<li><label for=uemail>Email：</label><input id=uemail type=email name=uemail required placeholder="example@domain.com">
<li><label for=age>工作年龄：</label><input id=agetype=rangename=range1 max="60" min="18"><outputonforminput="value=range1.value">30</output>
<li><label for=age2>年龄:</label><input id=age2 type=number required placeholder="your age">
<li><label for=birthday>出生日期：</label><input id=birthdaytype=date>
<li><label for=search>个人主页：</label><input id=search type=url required list="searchlist">
<datalist id=searchlist>
<option label="Google"value="http://www.google.com"/>
<option label="Yahoo" value="http://www.yahoo.com"/>
<option label="Bing" value="http://www.bing.com"/>
<option label="Baidu" value="http://www.baidu.com"/>
</datalist></li>
</ol>
</fieldset>
<div><button type=submit>注册</button></div></form>
</body>
举一反三
根据本实例，读者可以进行以下操作。
应用HTML5新增的元素制作用户登录页面。
应用HTML5新增的元素制作用户信息输入页面。