基于DIV+CSS的技能实训教学实践

摘 要：随着Web标准的逐步推广，要求页面内容与其表现形式分离。使用DIV搭建网页结构，用CSS控制网页外观，由此，DIV+CSS技术成为制作网页的主流技术，内容与表现形式的分离不仅提高了页面的浏览速度，而且提高了网站的维护效率。从盒子、DIV和CSS等方面介绍了DIV+CSS基本技术，并通过案例的拆分，介绍DIV+CSS制作网页的流程。

关键词：DIV；CSS；教学实践

DIV + CSS skills practice training

Wen Liou

Beijing College of Finance and Commerce， Beijing， 101101， China

Abstract： With the gradual promotion of Web standards， requiring separate page content and its manifestations. Build structures using DIV pages using CSS to control the appearance of the page， thus， DIV + CSS technology has become a mainstream technology to create Web pages， separation of content and performance not only greatly improve the browsing speed of the page， but also improve the efficiency of maintenance site. In this paper， DIV， CSS， boxes， etc. DIV + CSS describes the basic technology， and through case resolution， DIV + CSS make Web pages will flow to share.

Key words： DIV； CSS； teaching practice

随着网络技术的发展以及Web2.0标准化设计理念的普及，基于DIV+CSS的制作方式成为网站设计者的新宠，从门户网站到个人网站都采用DIV+CSS制作网页。DIV+CSS技术方法，实现了表现形式与内容的分离，便于维护和修改，大大简化了代码，减少了网络带宽资源的占用。当访问者的网速过慢时，可先将网页内容呈现出来；方便访问者使用如手机等设备浏览网页，即使看不到外观样式，也可看到网页的内容；网页易于被检索。

1 DIV+CSS技术简介

DIV+CSS的布局方法，简单来说就是使用DIV标签作为容器，使用CSS技术排布DIV标签的布局方法。盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局，必须了解盒模型的原理。页面上的每个元素都能看作一个容器，这个容器就是一个盒子。例如：p标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，DIV标签就是布局中所用到的容器。大部分人认为，只有DIV标签能作为容器来安排布局。其实在XHTML页面中，所用的标签大部分是容器，可被当做容器使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，形成一个页面的布局。

2 DIV+CSS技术制作个人网站首页流程解析

本案例为个人网站的首页（如图1所示）。网站的配色方案以黑色为背景主色调，白色和灰色为文字辅助色调，粉色为导航色调。页面布局采用的是一种典型的一行三列的形式，很常见且很实用。使用DIV+CSS技术方法进行制作。

图1

2.1 页面盒模型结构分析

通过分析效果图，可将页面分为左中右三个部分，可分别用三个盒子放置相应的栏目，三个盒子分别命名为leftbox，midbox，rightbox。其中，在midbox中，有三块垂直排列的文章列表，分别用articleone，articletwo，articlethree放置；rightbox中放置页面导航，用名称为nav的盒子放置。盒模型的结构图如图2所示。

图2 盒模型的结构图

2.2 利用DIV构建整体网页的结构

2.4 实现首页面左中右浮动布局

.leftbox{float：left；width：437px；height：568px； background：url（images/leftCol_bg.gif）}

.midbox{ float：left；width：322px； height：568px； background：url（images/midCol_bg.gif） repeat-x}

.rightbox{float：right；width：113px；height：568px；background：url（images/rightCol_bg.gif） no-repeat}

2013-12-26米：你有没有啊紫的电话啊 2013-12-26楚天：有准时吃饭吗