Web前端技术实验报告课程名称:Web前端技术实验名称:css+div网页设计系别班级:计科系1306班学生姓名:宋馨芳学生学号:指导老师:杨晓敏一、实验目的 1、掌握CSS基本概念、CSS类型及四种CSS样式定义的方法2、理解DIV的概念3、掌握DIV的属性设置方法4、学会使用DIV+CSS进行网页布局设计二、内容及要求1、定义四种样式表,并学会引用2、自定义外部样式表,并能在web页面中导入或链入外部样式表。3、使用DIV+CSS进行简单的网页布局4、区别CSS选择符类型,并能灵活运用各种选择符样式定义三、实验原理使用了css+div四、实验步骤确立自己的网页主题选择了韩国FTISLAND组合队长李弘基作为本次网页设计的主题。2、收集资料及设置重点李弘基的资料从格式上分为两类:图片、文本,从内容上大致分为:基本信息、演艺经历、获奖记录、人物评价等。网页基本设计分设一个基础网页,开始界面。开始界面可以链接到其他界面。设计开始页为整图如下:图一:开始界面点击上方的不同文字链接进入不同的查看页面。如图为专辑介绍页:图二:介绍专辑主页如图为演艺经历介绍页:图三:介绍演艺经历如图为人物评价介绍页:图四:介绍人物评价如图为获奖记录介绍页:图五:介绍页获奖记录五、实验代码主要代码:主页:<html> <head> <title>李弘基资料卡</title> <linkhref=""rel="stylesheet"> <styletype="text/css"/> a:link{color:#FFF;} a:visited{color:#FFF;} a:hover{color:#CCC;} a:active{color:#333;} </style> </head> <body> <divid="Container"> <divid="Header"> <center><span><fontface="幼圆"size="+2">首页</font></span> <span><fontface="幼圆"size="+2"color="#FFF">|</font></span> <span><fontface="幼圆"size="+2"><ahref="">专辑</a></font></span> <span><fontface="幼圆"size="+2"color="#FFF">|</font></span> <span><fontface="幼圆"size="+2"><ahref="">获奖记录</a></font></span> <span><fontface="幼圆"size="+2"color="#FFF">|</font></span> <span><fontface="幼圆"size="+2"><ahref="">演艺经历</a></font></span> <span><fontface="幼圆"size="+2"color="#FFF">|</font></span> <span><fontface="幼圆"size="+2"><ahref="">人物评价</a></font></span></center> </div> <divid="PageBody">
web前端技术实验报告实验二 来自淘豆网m.daumloan.com转载请标明出处.
