举报文档 收藏
/7
蜜蜂文库 > 报告 > web前端技术实验报告实验二.doc

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

web前端技术实验报告实验二.doc
内容要点:
web前端技术实验报告实验二,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四、实验步骤1、确立自己的网页主题选择了韩国 FTISLAND 组合队长李弘基作为本次网页设计的主题。2、收集资料及设置重点李弘基的资料从格式上分为两类:图片、文本,从内容上大致分为:基本信息、演艺经历、获奖记录、人物评价等。3、网页基本设计a、分设一个基础网页,开始界面。开始界面可以链接到其他界面。b、设计开始页为整图如下:图一:开始界面c、点击上方的不同文字链接进入不同的查看页面。如图为专辑介绍页:图二:介绍专辑主页如图为演艺经历介绍页:图三:介绍演艺经历如图为人物评价介绍页:图四:介绍人物评价如图为获奖记录介绍页:图五:介绍页获奖记录五、实验代码主要代码:1.主页:李弘基资料卡a:link{color:#FFF;}a:visited{color:#FFF;}a:hover{color:#CCC;}a:active{color:#333;}首页|专辑|获奖记录|演艺经历|人物评价2.layout.css 文件body{font-family: Verdana;font-size: 100;margin: 0;text-align: justify;}p{margin:2px;}#Container{margin:0 auto;width:100%;}#Header{height: 350px;margin-bottom: 5px;background-image: url("n.jpg");}#PageBody{height: 400px;}#left{float: left;width: 200px;height: 500px;background:#FFF;}#MainBody{margin:o auto;width: 1000px;height: 500px;}#right{float: right;width: 200px;height: 500px;background:#FFF;}#Footer{height: 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;}img{float:center;}span{width:100px;margin-top:50px;font-size:20px;font-family:"华文新魏";cursor:pointer;}h3{text-align: center;color: #666;font-size: 24px;} 6、实验总结1、我学会了利用 CSS+DIV 制作简单的网页制作:不同的文字

发表评论

暂无评论,赶快抢占沙发吧。

ba****o

咨询 关注

扫描手机访问

反馈 足迹 顶部