预览加载中，请您耐心等待几秒...

网站后台开发：div+css.doc

预览
1/7
2/7
3/7
4/7
5/7
6/7
7/7

在线预览结束，喜欢就下载吧，查找使用更方便

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

div+css是网站后台开发和网页设计的重要部分，本章迪派就为大家讲解什么是div+css 以及div+css的作用和应用案例.首先来了解什么是div+css。 div+css是什么?（division、CascadingStyleSheets） div+css是一种目前比较流行的网页布局技术 div来存放需要显示的数据(文字，图表..),css就是用来指定怎样显示，从而做到数据和显示相互的效果 在div+css用来布局之前，行业里都使用TABLE布局和实现数据。但是TABLE的缺点很多。 1、显示样式和数据是绑定在一起的 2、布局的灵活度不高 3、一个页面可能会有大量的<table>元素 4、增加带宽 5、不同的浏览器看到的效果有时不一样 6、搜索引擎不友好 了解了TABLE的缺点，接下来看看div+css的原理： 原理图如下： 有时候，我们也可能把css直接嵌入到html文件中，这种方式称为内联css 我们也可以简单的这样理解div+css: div是用于存放内容(文字,图片,元素)的容器。 css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观 (观点：用table显示数据比较方便) 网页设计快速入门案例(体验案例) demo.html <html> <head> <title>css网站后台开发小案例</title> <!--引入我们的css--> <linkrel="stylesheet"type="text/css"href="style/my.css"/> </head> <body> <divclass="style1"> <imgsrc="images/sohu.jpg"/> </div> </body> </html> my.css .style1{ /*宽度*/ width:400px; height:300px;/*电脑培训*/ background-color:silver; border:1pxsolidred; margin-left:400px; margin-top:250px; padding-top:20px; padding-left:40px; } div+css是用来做网页设计的，在div+css流行应用之前一共经历了三个时期： ①table网页设计 内容和样式(外观和布局)混合 ②table+css网页设计 table布局，CSS指定外观 ③div+css网页设计 div放内容，CSS指定样式(外观和布局)，内容和样式彻底分离 css使用必要性 1、可以很好的统一网站的显示风格. 2、可以使用滤镜 css使用的基本语法 选择器{ 属性1:属性值; 属性2:属性值; …. } css案例： html文件: <html> <!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件--> <linkrel="stylesheet"type="text/css"href="style/my.css"/> <body>www.dldipai.cn <!--span元素通常用于存放小块内容--> <spanclass="s1">栏目一</span> <spanclass="s2">栏目二</span> <spanclass="s3">栏目三</span> <spanclass="s4">栏目四</span> <spanclass="s5">栏目五</span> </body> </html> css文件： /*.s1用术语类选择器*/ /*font-style属性值有：normal(默认值,正常字体)、italic(斜体)、oblique(倾斜的字体)*/ /*text-decoration属性值有：none(默认值,无装饰)、underline、blink(闪烁)、overline(上划线)、line-through(贯穿线)*/ /*font-weight属性值有：normal(默认值,相当于400)、bold(粗体,相当于700)、bolder(比normal粗)、lighter(比normal细)、100、900等*/ .s1{ color:blue; font-size:30px; font-style:italic; text-decoration:underline; } .s2{ color:yellow; font-size:12px; } .s3{ color:blue; font-style:italic; } .s4{ color:green; font-weight:bold; } .s5{ color:#9C3131; } 案例： <html> <head> <!--如何把css