欢迎来到天天文库
浏览记录
ID:40841971
大小:750.51 KB
页数:9页
时间:2019-08-08
《DIVCSS页面布局实例》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、固定宽度布局综合实例:制作个人网站首页本实例讲解如何制作个人网站的首页。内容包括:分析个人网站首页的架构分块制作个人网站首页个人网站首页构架分析当网页设计师制作好个人网站的首页效果图,交给页面制作人员进行网页制作。页面制作人员只需要制作出与效果图一致并且兼容主流浏览器的标准页面即可。分块制作个人网站首页在对效果图进行分析得到页面结构图后,就可以进行分块制作网页。制作网页的主要遵循从总体到部分,从上部到下部的顺序。制作个人网站首页的总体布局制作个人网站首页首先从制作其总体布局开始,然后再细分到每个块区。本实例的页面分为左中右三部分,使用左中右浮动的布局方式。1.建立网站文件夹2.构建整体网页的
2、结构3.构建整体网页的布局实现左中右浮动布局1.实现左中右浮动布局2.制作leftCol容器的背景3.设置midCol容器的背景图4.设置rigthCol容器的背景图制作个人网站首页的左边栏目(leftCol)在leftCol中只包含相册一个栏目,命名为gallery。在相册中包含相册栏目的栏目标题,使用h4标签嵌套。相册中的相片使用一个无序列表嵌套。制作个人网站首页的中间栏目(midCol)在midCol中包含三个垂直排列的文章列表。这三个文章列表分别为“最新日志”、“最新留言”和“旅游日志”。1.设置文章列表的位置2.添加文章列表3.设置文章列表的样式制作个人网站首页的右边栏目(righ
3、tCol)rightCol用于放置网页的导航,使用一个无序列表嵌入导航内容。
此文档下载收益归作者所有