《web前端技术实验报告实验二》由会员分享，可在线阅读，更多相关《web前端技术实验报告实验二(7页珍藏版)》请在装配图网上搜索。

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. 主页：李弘基资料卡 a:li。

3、nkcolor:#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);#PageB。

4、odyheight: 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, Myri。

5、ad 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 、期间遇到了一些问题：模块嵌套不理想等等。发现问题并找到问题进行了改正。