《web前端技术实验报告实验二》由会员分享，可在线阅读，更多相关《web前端技术实验报告实验二（4页珍藏版）》请在金锄头文库上搜索。
1、Web前端技术实验报告 课程名称： Web前端技术 实验名称： css+div网页设计 系别班级：计科系 1306 班 学生姓名： 宋馨芳 学生学号： 2013100603 指导老师： 杨晓敏 一、实验目的 1、掌握CSS基本概念、CSS类型及四种CSS样式定义的方法 2、理解DIV的概念 3、掌握DIV的属性设置方法 4、学会使用DIV+CSS进行网页布局设计二、内容及要求1、定义四种样式表，并学会引用2、自定义外部样式表，并能在web页面中导入或链入外部样式表。3、使用DIV+CSS进行简单的网页布局4、区别CSS选择符类型，并能灵活运用各种选择符样式定义三、实验原理 使用了css+div
2、四、实验步骤1、 确立自己的网页主题选择了韩国FTISLAND组合队长李弘基作为本次网页设计的主题。 2、收集资料及设置重点 李弘基的资料从格式上分为两类：图片、文本，从内容上大致分为：基本信息、演艺经历、获奖记录、人物评价等。3、 网页基本设计a、 分设一个基础网页，开始界面。开始界面可以链接到其他界面。b、 设计开始页为整图如下：图一：开始界面c、 点击上方的不同文字链接进入不同的查看页面。如图为专辑介绍页：图二：介绍专辑主页如图为演艺经历介绍页：图三：介绍演艺经历如图为人物评价介绍页：图四：介绍人物评价如图为获奖记录介绍页：图五：介绍页获奖记录五、实验代码主要代码：1. 主页：李弘基资料
3、卡a:linkcolor:#FFF;a:visitedcolor:#FFF;a:hovercolor:#CCC;a:activecolor:#333;首页|专辑|获奖记录|演艺经历|人物评价 2.layout.css文件bodyfont-family: Verdana;font-size: 100;margin: 0;text-align: justify;pmargin:2px;#Containermargin:0 auto;width:100%;#Headerheight: 350px;margin-bottom: 5px;background-image: url(n.jpg);#Pag
4、eBodyheight: 400px;#leftfloat: left;width: 200px;height: 500px;background:#FFF;#MainBodymargin:o auto;width: 1000px;height: 500px;#rightfloat: right;width: 200px;height: 500px;background:#FFF;#Footerheight: 80px;background-image: url(m.jpg);text-align: center;font-family: Gill Sans, Gill Sans MT, My
5、riad Pro, DejaVu Sans Condensed, Helvetica, Arial, sans-serif;font-size: 13px;padding-top: 10px;imgfloat:center;spanwidth:100px;margin-top:50px;font-size:20px;font-family:华文新魏;cursor:pointer;h3text-align: center;color: #666;font-size: 24px;六、 实验总结 1、我学会了利用CSS+DIV制作简单的网页制作：不同的文字样式设计、定义不同样式、进行外部调用等等。 2、期间遇到了一些问题：模块嵌套不理想等等。发现问题并找到问题进行了改正。
