《网页设计案例教程》教学课件 第9章 CSS浮动布局.pptxVIP

网页设计案例教程案例说明 本案例主要完成整个新闻列表页面的布局，包括构建HTML结构和设置CSS样式，并对浮动的基本原理有初步认识。案例步骤 下面开始构建新闻列表页面的整体布局。该页面可分为3部分：头部header、主体content和尾部footer。其中主体content又可分为2大部分：新闻菜单（左）leftlist和新闻列表（右）rightlist。案例步骤构建HTML结构1.将第8章制作的网页另存在bljt站点根文件夹中，命名为，然后调整网页的结构，删除其id名为content的div中的内容（不删除该div），以及“集团要闻”超链接（注意不要将后面的/section结束标签删除了）。步骤 01案例步骤在id为content的div中新建两个平行的div，id名分别为leftlist和rightlist。步骤 02设置CSS样式案例步骤2.步骤 01设置新闻菜单样式，包括设置宽度和左浮动。#content #leftlist{ width: 208px; /*这里盒子的宽度大小根据“新闻中心”背景图像确定*/ float: left; /*设置左边盒子左浮动*/ background-color:#0099FF; /*此背景只作为讲解知识时用，最后需要去除*/}案例步骤设置新闻列表背景。设置背景颜色后，观察效果，会发现当新闻列表的内容超出一行