




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、网页设计与制作教程(HTML+CSS+JavaScript)第2版机械工业出版社第6章 Div+CSS布局页面6.1 Div+CSS布局技术简介6.1.1 Div+CSS布局的优点采用Div+CSS布局方式的优点如下: Div用于搭建网站结构,CSS用于创建网站表现,将表现与内容分离。 缩短了网站的改版时间。 强大的字体控制和排版能力,使设计者能够更好的控制页面布局。 使提高搜索引擎对网页的索引效率。 用户可以将许多网页的风格格式同时更新。6.1 Div+CSS布局技术简介6.1.2 嵌套的Div实现页面排版Div标签是可以被嵌套的,这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示
2、例说明嵌套的Div之间的关系。【演练6-1】未嵌套的Div容器,本例文件的Div布局效果如图6-1所示。【演练6-2】嵌套的Div容器,本例文件的Div布局效果如图6-2所示。6.2 典型的CSS布局样式6.2.1 两列布局样式页面布局整体上分为上、中、下3个部分,即header区域、container区域和footer区域。其中的container又包含mainBox(主要内容区域)和sideBox(侧边栏),布局示意图如图6-4所示。6.2 典型的CSS布局样式6.2.1 两列布局样式这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏布局。【演练6-3】三行两列宽度固定布局。6.2
3、 典型的CSS布局样式6.2.1 两列布局样式【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。6.2 典型的CSS布局样式6.2.2 三列布局样式三列布局与两列布局非常相似,在处理方式上可以利用两列布局结构的方式处理,如图6-8所示的就是3个独立的列组合而成的三列布局。6.2 典型的CSS布局样式6.2.2 三列布局样式1两列定宽中间自适应的三列结构【演练6-5】两列定宽中间自适应的三列结构。6.2 典型的CSS布局样式6.2.2 三列布局样式2三列自适应结构【演练6-6】三列自适应结构。三列自适应结构的页面效果如图6-11所示。将浏览器窗口进行缩放,三列自适应宽度的效果,如图6-
4、12所示。6.3 综合案例制作光影世界最近活动局部页面6.3.1 页面布局规划通过成熟的构思与设计,光影世界最近活动局部页面的页面效果如图6-13所示,页面局部布局示意图如图6-14所示。6.3 综合案例制作光影世界最近活动局部页面6.3.2 页面的制作过程1前期准备(1)栏目目录结构在栏目文件夹下创建文件夹images和css,分别用来存放图像素材和外部样式表文件。(2)页面素材将本页面需要使用的图像素材存放在文件夹images下。(3)外部样式表在文件夹css下新建一个名为style.css的样式表文件。2制作页面6.4 实训制作家具商城产品明细局部页面6.4.1 页面布局规划通过成熟的构思与设计,家具商城产品明细局部内容的页面效果如图6-15所示,页面局部布局示意图如图6-16所示。6.4 实训制作家具商城产品明细局部页面6.4.2 页面的制作过程1前期准备(1)栏目目录结构在栏目文件夹下创建文件夹images和css,分别用来存放图像素材和外部样式表文件。(2)页面素材将本页面需要使用的图像素材存放在文件夹images下。(3)外部样式表在文件夹css下新建一个名为style.css的样式表文件。2制作页面习题6习题61制作如
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年西安求职手册
- 外墙直接抗裂砂浆施工方案
- 文昌东郊椰娜美椰子油加工厂环评报告表
- 岳池县沥青路面施工方案
- 海口市生活垃圾焚烧发电项目炉渣综合利用项目环境影响报告表(公示稿)环评报告表
- 初一的上学期数学试卷
- 有关广西地区桉树高产营造林技术及病虫害防治措施的讨论
- 江苏省盐城市阜宁县2024-2025学年七年级下学期3月月考地理试题(原卷版+解析版)
- 智研咨询发布:2025年中国医疗器械融资租赁行业市场现状及投资前景分析报告
- 加强生态环境保护与绿色发展实施方案
- 2024年河南省信阳市浉河区二模语文试卷
- 代理商区域保护协议书范本
- 2024年包头钢铁职业技术学院单招职业适应性测试题库及答案解析
- 2024年南京铁道职业技术学院单招职业技能测试题库及答案解析
- 英语定位纸模板
- 中外政治思想史-形成性测试四-国开(HB)-参考资料
- 小学语文中高年级单元整体教学设计的实践研究(中期报告)
- 国家安全教育国土安全
- 机电系统综合调试方案
- 《合理调节情绪-做自己情绪的主人》班会课件
- 中国高等教育的历史演进课件
评论
0/150
提交评论