青岛理工大学web实验报告.doc

《青岛理工大学web实验报告.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、青岛理工大学课程实验报告课程名称Web开发技术基础班级计算152实验日期姓名杨旗学号201507031实验成绩实验名称实验web开发课程实验实验目及要求学习使用编辑器Notepad++或Dreamweaver，掌握HTML中各种标记的应用，重点掌握列表标记、表格标记及表单标记的使用。实验环境Notepad++实验内容构建一个网上书城，实现基本功能。实验步骤1.设计草图，构想功能，2.写好基本html网页，添加标签，编写网页的css样式，js函数。3.连接数据库。4.测试数据。调试过程及实验结果1.主页

2、面的编写15右上角菜单的编写商品页面选项导航栏商品页面15注册页面个人信息填写面板验证码测试商品信息页面15总结  经过这次实验，体会到了html的有趣和强大之处，还有css样式的灵活性，js函数的多功能性。掌握了html基本标签的使用和属性的作用。CSS的选择器让我深刻感到了他的魅力，善于运用选择器将是一个web开发者的优秀习惯，有些问题在选择器的帮助下往往会迎刃而解，选择器可谓无往不利。源程序商品页面代码：<

3、metahttp-equiv="content-type"content="text/html;charset=gbk">.main{/*设置外边距，下面有30px距离*/margin:0px0px30px0px;/*背景色*/background-color:#ffffff;/*字体大小*/font-size:12px;/*文字颜色*/color:#000000;/*文本对齐方式*/text-align:center;/*垂直对齐方式*/vertical-

4、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也无下划线*/15a:visited{text-decoration:no

5、ne;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{/

6、*颜色*/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{15/*设置head这个div

7、宽度为100%*/width:100%;}.headtab{width:100%;}.headtabtd{/*设置td内边距上10px右50px下25px左135px*/padding:10px50px25px135px;}#menu{width:100%;background-color:#1c3f09;/*设置背景色*/border-top-width:4px;/*设置上边框宽度4px*/border-top-style:solid;/*设置上边框样式实线*/border-top-color:#8

8、2b211;/*设置上边框的颜色#82b211*/text-align:center;font-size:14px;padding:10px0px10px0px;}#menutd{text-align:center;}/*#menu下的a标签样式设置*/#menua{font-size:14px;color:#ffffff;/*超连接文字颜色*/font-weight:bold;/*超连接字体加粗*/padding:10px10px10px10px;/*