版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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+
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年度甘肃省安全员之A证(企业负责人)通关题库(附带答案)
- 简单机器租债合同(2篇)
- 给单位维修家具合同(2篇)
- 2024年换热设备项目发展计划
- 2023影响中国人居生活方式趋势报告-有家研究所
- 2024年基因工程乙型肝炎疫苗(酵母)项目合作计划书
- 2024年文艺创作与表演服务合作协议书
- 2024版合同签订的授权委托书范本
- 高端民宿健身房改造合同
- 2024版对外加工装配合同解释与分析
- 六年级阅读理解复习-复习-找中心句(课堂PPT)
- 埋地管道检测方案
- 景物描写作文指导
- VTE健康宣传手册
- 广东城际铁路隧道高压旋喷桩钻芯法检测报告(附图)
- FRAMEWORK CONTRACT框架合同
- 检针机日常点检保养记录表
- 机械臂本科生毕业设计(论文)范文
- 空心板预制施工方案
- 4《找到“神奇子弹”的人》练习题、课后练习题及答案解析
- 锅炉安全基础知识
评论
0/150
提交评论