《网页设计案例教程》课件 第10章 CSS定位布局.pptxVIP

网页设计案例教— — 目录页Contents Page第10章 CSS定位布局——制作企业网站首页— —案例一 对页面进行整体布局——CSS定位属性案例二 制作图片新闻栏目案例三 制作集团新闻栏目案例四 制作企业首页的其他栏目 案例一 对页面进行整体布局——CSS定位属性案例说明本案例主要利用div完成企业网站首页的整体布局，包括HTML结构构建和CSS样式设置两部分。另外，由于在第8章中已经对网页头部header和尾部footer进行了设置，因此，本案例中主要利用绝对定位对页面的中间部分进行整体布局。— — 案例一 对页面进行整体布局——CSS定位属性案例步骤下面开始构建整个新闻页面的整体布局。该页面可分为3大部分：头部header、主体contrainer和尾部footer。其中主体contrainer又可分为2行5个栏目：图片新闻 tpnews、集团新闻jtnews、公司简介gsjj、项目展示xmshow和站内搜索searcher。— — 案例一 对页面进行整体布局——CSS定位属性案例步骤1. 构建HTML结构 步骤 01将第8章制作的名为xinwen.html的网页另存在bljt站点根文件夹中，命名为main.html。步骤 02— —调整main.html网页的结构：删除id名为content的div和id名为lujing的section（分别是新闻网页的主体部分和页