div+css技术应用网页效果预览

div+css技术应用网页效果预览

ID:14491948

大小:806.00 KB

页数:7页

时间:2018-07-29

div+css技术应用网页效果预览_第1页
div+css技术应用网页效果预览_第2页
div+css技术应用网页效果预览_第3页
div+css技术应用网页效果预览_第4页
div+css技术应用网页效果预览_第5页
资源描述:

《div+css技术应用网页效果预览》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、一、DIV+CSS技术应用网页效果预览图2-9-1DIV+CSS技术应用网页效果图  2.实例分析网页设计DIV结构通过上图不难看出,整个网页的布局是有规律可寻得,它大致可以分为顶部区域,中上部区域、中下部区域和底部区域。而中上部区域和中下部区域又可以分成若干小的区块,分析后效果图如下: 图2-9-2区块划分分析图根据上图,我们得出实际页面布局图如下:图2-9-3页面布局层叠结构图 三、实例制作步骤:1.启动DreamWeaver,新建站点为“zzrsb”,路径为E:/websit,新建一个网页文件,命名为

2、“zzrsb.html”,并保存在站点文件夹下。2.在标记中写出DIV结构,代码如下: 顶部区域

 主题1区   主题1区左
   主题1区右
 
 主题2区  主题2区左     

3、d="webbody2LeftTop">主题2区左顶部     主题2区左底部主题2区左底部左边       主题2区左底部右边        主题2区右主题2区顶部 

4、    主题2区底部  底部区域3.新建一个CSS文档,命名为“style.css”,并保存在站点文件夹下。body{font:12pxTahoma;margin:0px;text-align:center;background:#FFF;}/*页面层容器*/#content{width:100%}/*页面头部*/#head{width:1000px;margin:0

5、auto;height:100px;background:#900000}/*页面主体1*/#webbody1{width:1000px;margin:0auto;height:200px;background:#FEFEFE}/*页面主体1*/#webbody2{width:1000px;margin:0auto;height:200px;background:#FCFCFC}/*页面底部*/#foot{width:1000px;margin:0auto;height:50px;background:#9

6、00000}/*主题1区左*/#webbody1Left{width:746px;/*设定宽度*/text-align:left;/*文字左对齐*/float:left;/*浮动居左*/clear:left;/*不允许左侧存在浮动*/overflow:hidden;/*超出宽度部分隐藏*/}/*主题1区右*/#webbody1Right{width:254px;text-align:left;float:right;/*浮动居右*/clear:right;/*不允许右侧存在浮动*/overflow:hidd

7、en}/*主题2区左*/#webbody2Left{……}/*主题2区右*/#webbody2Right{……}/*主题2区左底部左边*/#webbody2LeftFootLeft{width:373px;/*设定宽度*/……}/*主题2区左底部右边*/#webbody2LeftFootRight{width:373px;text-align:left;……}4.“zzrsb.html”链接“style.CSS”文件,链接方法同第八讲中内容,到此为止,网页框架制作完毕。效果图如下:图2-9-4CSS控制DI

8、V后布局图 网页内部内容的添加和前面文字、多媒体元素、链接等内容添加相同,这里不再累述。四、DIV+CSS页面布局常见错误分析1.检查HTML元素是否有拼写错误、是否忘记结束标记  即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。  2.检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的“}”等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。