基于div+css的技能实训教学实践

《基于div+css的技能实训教学实践》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

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

2、，ChinaAbstract：WiththegradualpromotionofWebstandards，requiringseparatepagecontentanditsmanifestations.BuildstructuresusingDIVpagesusingCSStocontroltheappearanceofthepage，thus，DIV+CSStechnologyhasbecomeamainstreamtechnologytocreateWebpages，separationofcontentandperformancenotonlygreatlyimpr

3、ovethebrowsingspeedofthepage，butalsoimprovethe4efficiencyofmaintenancesite.Inthispaper，DIV，CSS，boxes，etc.DIV+CSSdescribesthebasictechnology，andthroughcaseresolution，DIV+CSSmakeWebpageswillflowtoshare.Keywords：DIV；CSS；teachingpractice随着网络技术的发展以及Web2.0标准化设计理念的普及，基于DIV+CSS的制作方式成为网站设计者的新宠，从门户网

4、站到个人网站都采用DIV+CSS制作网页。DIV+CSS技术方法，实现了表现形式与内容的分离，便于维护和修改，大大简化了代码，减少了网络带宽资源的占用。当访问者的网速过慢时，可先将网页内容呈现出来；方便访问者使用如手机等设备浏览网页，即使看不到外观样式，也可看到网页的内容；网页易于被检索。1DIV+CSS技术简介DIV+CSS的布局方法，简单来说就是使用DIV标签作为容器，使用CSS技术排布DIV标签的布局方法。盒模型是DIV+CSS布局的基础，要实现DIV+CS4S布局，必须了解盒模型的原理。页面上的每个元素都能看作一个容器，这个容器就是一个盒子。例如：p标签是一个能装文

5、字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，DIV标签就是布局中所用到的容器。大部分人认为，只有DIV标签能作为容器来安排布局。其实在XHTML页面中，所用的标签大部分是容器，可被当做容器使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，形成一个页面的布局。2DIV+CSS技术制作个人网站首页流程解析本案例为个人网站的首页（如图1所示）。网站的配色方案以黑色为背景主色调，白色和灰色为文字辅助色调，粉色为导航色调。页面布局采用的是一种典型的一行三列的形式，很常见且很实用。使用DIV+CSS技术方法进

6、行制作。图12.1页面盒模型结构分析通过分析效果图，可将页面分为左中右三个部分，可分别用三个盒子放置相应的栏目，三个盒子分别命名为leftbox，midbox，rightbox。其中，在midbox中，有三块垂直排列的文章列表，分别用articleone，articletwo，articlethree放置；rightbox中放置页面导航，用名称为nav的盒子放置。盒模型的结构图如图2所示。图2盒模型的结构图2.2利用DIV构建整体网页的结构　　2.4实现首页面左中右浮动布局4.leftbox{float：left；width：437px；height：568px；backg

7、round：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楚天：有准时吃饭吗4