教学课件任务03-2：网页的蓝图--复杂布局--DIV+CSS布局网上商城首页.pptxVIP

教材配套资源页完整PPT课件 教学课件任务03-2：网页的蓝图--复杂布局--DIV+CSS布局网上商城首页 1 项目03 网页的蓝图—复杂布局 任务3-2 DIV+CSS布局网上商城首页 2 任务3-2 DIV+CSS布局网上商城首页 知识点 理解版心的概念 掌握常见网页布局的方法 技能点 能够熟练应用HTML5+CSS3按需进行网站首页布局 能够解决网页布局过程中遇到的高度塌陷等常见问题 3 一、网页布局的流程 版心：在网页开发中是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等，左右两边留白，用于放置广告或者快捷菜单等。 4 一、网页布局的流程 第一步就是要先根据美工的效果图确定页面的版心，版心在屏幕中占据的宽度是多少； 第二步要分析页面中的行模块，也就是每一个BFC区域，还要确定好每个行模块中的列模块； 第三步在html文档中写出各个页面元素； 第四步通过DIV+CSS调整页面中的每个元素的外观效果。 5 二、常见网页布局——单栏式布局 body div class=top/div div class=banner/div div class=main/div div class=footer/div /body style