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