《青岛理工大学web实验报告》.docVIP

PAGE PAGE 15 青 岛 理 工 大 学 课程实验报告 课程名称 Web开发技术基础 班级 计算152 实验日期 姓名 杨旗 学号 201507031 实验成绩 实验名称 实验 web开发课程实验 实验目 及要求 学习使用编辑器Notepad++或Dreamweaver，掌握HTML中各种标记的应用，重点掌握列表标记、表格标记及表单标记的使用。 实验环境 Notepad++ 实验内容 构建一个网上书城，实现基本功能。 实 验 步 骤 设计草图，构想功能， 写好基本html网页，添加标签，编写网页的css样式，js函数。 连接数据库。 测试数据。 调 试 过 程 及 实 验 结 果 主页面的编写 右上角菜单的编写 商品页面选项 导航栏 商品页面 注册页面 个人信息填写面板 验证码测试 商品信息页面 总 结 ??经过这次实验，体会到了html的有趣和强大之处，还有css样式的灵活性，js函数的多功能性。掌握了html基本标签的使用和属性的作用。 CSS的选择器让我深刻感到了他的魅力，善于运用选择器将是一个web开发者的优秀习惯，有些问题在选择器的帮助下往往会迎刃而解，选择器可谓无往不利。 源程序 商品页面代码： html head titlebookStore商城-商品信息展示/title meta http-equiv=content-type content=text/html; charset=gbk style type=text/css .main{ /*设置外边距，下面有30px距离*/ margin:0px 0px 30px 0px; /*背景色*/ background-color:#ffffff; /*字体大小*/ font-size:12px; /*文字颜色*/ color:#000000; /*文本对齐方式*/ text-align:center; /*垂直对齐方式*/ vertical-align:top; /*设置行高*/ line-height:150%; /*设置字体*/ font-family: Arial, Helvetica, sans-serif; } /*设置a标签 字体12px 颜色 #0066FF*/ a { font-size: 12px; color: #0066FF; /*#1E33F7*/ } /*设置未访问的超连接无下划线*/ a:link { text-decoration: none; } /*设置访问后的连接颜色为#0066ff 也无下划线*/ a:visited { text-decoration: none; color: #0066FF; } /*设置鼠标移到超连接上无下划线颜色为#990099*/ a:hover { text-decoration: none; color: #990099; /*颜色变换*/ } /*设置选定的超连接无下划线，颜色为#0066ff*/ a:active { text-decoration: none; color: #0066FF; } /*设置所有td标签*/ td{ text-align:left; vertical-align:top; font-size:12px; } /*设置所有的hr标签*/ hr{ /*颜色*/ color:#cccccc; /*高度*/ height:1px; /*上外边距5px*/ margin-top:5px; /*下外边距5px*/ margin-bottom:5px; /*分隔线如果超出框架部分隐藏*/ overflow:hidden; } /*设置h1*/ h1{ font-size:14px; color:#000000; margin-bottom:5px; font-weight:bold; display:inline; text-align:left; } #head{ /*设置head这个div宽度为100%*/ width:1