web前端技术实验报告实验二

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:l

3、inkcolor:#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);#

4、PageBodyheight: 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, Myriad 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+