原创力文档- 1、本文档共4页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
div定位实验
实验题目 DIv定位实验
一、实验目的
1．熟练使用HTML+CSS实现网页布局；
2. 掌握DIv的定位方法。
二、实验环境
1、硬件环境：
2、软件环境 （1）操作系统：windows XP Professional，版本2002，Service Pack 3 （2）编程环境：WebStorm-9.0.1
三、实验内容
利用Div定位,完成如下网页,图片素材不限定：
四、实验过程
新建New Project,创建HTML File;
使用Div+CSS样式，按照实验要求网页布局；
分别使用不同浏览器（IE、360浏览器等）测试网页效果；
根据测试效果调整网页。
5.页面效果如图：
五、源程序清单
!DOCTYPE html head lang en meta charset UTF-8 body margin: 0; padding: 0; .photomain margin: 0 auto; width: 1000px; .pm float: left; width: 160px; height: 220px; border: solid 1px #0000cc; margin: 10px 15px; .pm img margin: 10px 10px; width: 140px; height: 180px; div class photomain div class pm img src jp1.jpg div class pm img src jp2.jpg div class pm img src jp3.jpg div class pm img src jp4.jpg div class pm img src jp5.jpg div class pm img src jp6.jpg div class pm img src jp7.jpg div class pm img src jp1.jpg div class pm img src jp2.jpg div class pm img src jp3.jpg div class pm img src jp4.jpg div class pm img src jp5.jpg div class pm img src jp6.jpg div class pm img src jp7.jpg div class pm img src jp1.jpg div class pm img src jp2.jpg div class pm img src jp3.jpg div class pm img src jp4.jpg div class pm img src jp5.jpg div class pm img src jp6.jpg 总结
文档评论（0）