学习布局设计.doc_第1页
学习布局设计.doc_第2页
学习布局设计.doc_第3页
学习布局设计.doc_第4页
学习布局设计.doc_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

实验报告=【实验题目】HTML&CSS实验(7)【实验目的】学习布局设计。【实验工具】 先在浏览器中打开测试网页：2:8080/lab/html7/，然后编辑网页，或者直接用浏览器打开html文件（每次修改html文件后要刷新网页）。 也可以采用Visual Studio、Dreamweaver等具有网页编辑功能的软件打开页面，或者直接在Eclipse下编辑运行。【实验要求】 在实验课上完后立即上传一份实验报告。全部完成后再上传一份。【实验内容】1、布局设计采用样式float（取值left或right）使元素浮动，浮动元素需要定义宽度，其它正常文档流会绕浮动元素摆放。采用样式clear(取值left、right和both)可以使一个处于正常文档流的元素中的左边、右边、两边没有浮动元素。如果整个内容需要居中，则要在最外层用一个container的块级元素（例如，div），固定宽度，可设置min-width和max-width，并把左右margin设置为auto。要求直接编制样式，不要使用dreamweaver等辅助排版工具自动产生样式。 （1）三栏式(layout1.html)： container的宽度固定并居中。实现后保存源代码(layout1.html)并截屏：源代码：（2）二栏式(layout2.html)： container的宽度固定并居中。实现后保存源代码(layout2.html)并截屏：源代码：（3）二栏式(layout3.html)： container的宽度固定并居中。实现后保存源代码(layout3.html)并截屏：源代码：2、设计一个类似下面的页面(gushici.html)：要求图片不采用背景图片，而是采用img。点击链接后不过改变颜色。完成后保存源程序(gushici.html)并截屏:源代码：【完成情况】是否完成了这些步骤？(完成 未做或未完成)1(1) 1(2) 1(3) 2 【实验体会】写出实验过程中遇到的问题，解决方法和自己的思考；并简述实验体会（如果有的话）。这次实验是关于float的应用，这次的实验基本没有给要求，只能按着图片来做了，其实感觉这有点迷，因为要是不考虑画面缩放的问题，完全可以用绝对定位排版做。不过这次基本上是考虑到画面缩放来做，基本都用百分比排版，但是layout2和3完全没有办法完全填充，所以也就只能做成这样了。第二个实验是完成一个网页排版，其实感觉这种排版挺简单的，就是浮动元素的排版，稍微调调就很容易做出来了。【交实验报告】 (a) 每位同学单独完成本实验内容并填写实验报告。在实验课上完后立即上传一份实验报告。全部完成后再上传一份。(b) 截止时间：2015年11月28日 22:00（周六） 上交作业网站：2/netdisk/default.aspx?vm=13mo 文件夹: /实验上交/html7 上传
人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论