Web前端开发技术（第3版）储久良 12.6综合实例

以“第十八届中国国际广告节会议注册表”页面为例，其页面效果如图所示。采用11行9列的表格布局来完成页面设计，注册界面使用表单和表单控件来实现。

实现的代码如下图所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>第十八届中国国际广告节会议注册表</title><style type="text/css">body{text-align:center;}h1{font-size: 25px;}.zhuce{font-size: 14px;text-align: center;width: 840px;margin: 0 auto;background: #f7f7f7;}.zhuce td{border: 1px solid #3300cc;padding: 2px 3px;}.zhuce .ibg{text-align: left;}.zhuce .bbg{padding: 10px 0; font-size: 13px;}#bt{width: 100px;height: 35px;background: #99ffcc;} */</style>
</head>
<body><h1>第十八届中国国际广告节会议注册表</h1><form><table class="zhuce"><tr><td width="100px">参会者姓名</td><td colspan="4" class="ibg" ><input name="txtName" type="text"></td><td>职务</td><td colspan="3" class="ibg"><input name="txtZhiwu" type="text"></td></tr><tr><td>工作单位</td><td colspan="8" class="ibg"><input name="txtDanwei" type="text" style="width: 500px;"></td></tr><tr><td>电话</td><td colspan="2" class="ibg"><input name="txtTel" type="text"></td><td>传真</td><td colspan="2"><input name="txtFax" type="text"></td><td cilspan="手机"></td><td class="ibg"><input name="txtMobil" type="text"></td></tr><tr><td>通讯地址</td><td colspan="6" class="ibg"><input name="txtAddress" type="text" style="width: 400px;"></td><td>邮编</td><td class="ibg"><input name="txtPostCode" type="tetx"></td></tr><tr><td>E-mail</td><td colspan="6" class="ibg"><input name="txtEmail" type="text" style="width: 180px;"></td><td>国家</td><td class="ibg"><select name="ddlCountry" id="ddlCountry" style="width: 180px;"><option value="中国" selected>中国</option><option value="美国">美国</option><option value="瑞士">瑞士</option><option value="印度">印度</option><option value="巴西">巴西</option></td></tr><tr><td>省份</td><td colspan="6" class="ibg"><select name="ddlProvice" style="width: 180px;"><option value="请选择">请选择</option><option value="广东省">广东省</option><option value="上海市">上海市</option><option value="北京市">北京市</option><option value="湖南省">湖南省</option></td><td>城市</td><td class="ibg"><input name="txtCity" type="text" style="width: 180px;"></td></tr><tr><td colspan="9"><p>会议费标准（人民币）</p></td></tr><tr><td colspan="2">身份 / 时间</td><td colspan="4">2011年9月20日之前注册</td><td colspan="3">2011年9月20日之后注册</td></tr><tr><td colspan="2">中广协会员</td><td colspan="4"><input type="radio" name="rbMem" value="rbMem1">1500元</td><td colspan="3"><input type="radio" name="rbMem" value="rbMem2">1800元</td></tr><tr><td colspan="2">非会员</td><td colspan="4"><input type="radio" name="rbMem" value="rbMem1">1800元</td><td colspan="3"><input type="radio" name="rbMem" value="rbMem2">2000元</td></tr><tr><td colspan="9" class="bbg"><input id="bt" type="submit" name="btnOk" value="提交"><input id="bt" type="reset"><br><br><a href="邀请函和注册表2011.doc">第十八届中国国际广告节会议注册表下载</a></td></tr></table></form>
</body>
</html>
``

Web前端开发技术（第3版）储久良 12.6综合实例相关推荐

web前端开发技术实验与实践（第三版）储久良编著项目12 设计简易网站导航
web前端开发技术实验与实践(第三版)储久良编著项目12 设计简易网站导航实训三项目12 设计简易网站导航一.页面文字素材: 序号网站名称 URL 1 百度 http://www.ba ...
web前端开发技术实验与实践（第三版）储久良编著项目16 div+CSS页面布局设计
web前端开发技术实验与实践(第三版)储久良编著项目16 实训五项目16 一.页面文字素材: 这是头部信息区. 这是导航信息区. 这是主题信息区. 这是右侧信息区. 这是版权信息区. 二.代码: ...
web前端开发技术实验与实践（第三版）储久良编著项目13 设计新生课程简介
web前端开发技术实验与实践(第三版)储久良编著项目13 设计新生课程简介实训三项目13 设计新生课程简介一.页面文字素材: 英语基础英语.高级英语.报刊选读.视听.口语.英语写作.翻译 ...
《Web前端开发技术》笔记
参考文献--<Web前端开发技术> by 储久良目录第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 ...
推荐几本最好的web前端开发技术图书
Web前端开发随着html5的日渐普及,而益发重要.构建一个高质量的站点,成为决胜之道上的重要一步.下面就推荐几本计算机图书第一网上书店china-pub上的几本畅销web前端开发技术图书. N0 ...
web前端开发技术要求会什么
对[web前端请添加链接描述](http://www.suzxms.com.cn/web/)多少有了解的人,都知道Web前端开发工程师是一项很特殊的工作,现今互联网时代,静态的网页制作已经无法满足企业 ...
Web前端开发技术栈（前端干货）
Web前端开发技术栈浏览器 Internet Explorer(需要了解,需不需要看公司业务需求) Chrome(建议学习使用) Firefox(建议学习使用) Safari(建议学习使用) Ope ...
html表单实验结论,web前端开发技术实验报告-实验五
1.长春大学 20 15 2016学年第二学期Web前端开发技术课程实验报告学院: 计算机科学技术专业: 软件工程班级: 软件14402 学号: 姓名: 王悦任课教师 ...
Web 前端开发技术 ——html
Web 前端开发技术 -- html 文章目录 Web 前端开发技术 -- html 一.html 文件结构二.文本三.图片四.音频和视频五.超链接六.表单七.列表八.表格九.语义标签 ...
Web 前端开发技术 —— JavaScript
Web 前端开发技术 -- JavaScript 总结 JavaScript 内容! 文章目录 Web 前端开发技术 -- JavaScript 一.js 的引用方式与执行顺序 1.引用方式在标签中 ...

Web前端开发技术（第3版）储久良 12.6综合实例

Web前端开发技术（第3版）储久良 12.6综合实例相关推荐

最新文章

热门文章