采用DIV+CSS模式的网站具有以下优势：1、表现和内容相分离 2、代码简洁，提高页面浏览速度 3、易于维护和改版 4、提高搜索引擎对网页的索引效率。

然后呢html文件中放置CSS有三种类型：内联、内嵌、外联三种。

感觉Css中必须要清楚它的六中选择符：1、HTML选择符  2、类选择符  3、ID选择符  4、伪元素选择符  5、关联选择符  6、组合选择符。

还有Css中包涵六大类属性：1、字体属性  2、文本属性  3、背景属性  4、边框属性  5、鼠标属性  6、列表属性。

以下实例：

——————————————html————————————————————--

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定义栏目区块</title>

    <link rel="stylesheet" href="./style.css" />

</head>

<body>

<div id="wrapper">

    <div class="title">

        <h3>

            <a>标题</a>

        </h3>

    </div>

    <div class="list">

        <ul>

            <li><a href="">一个大光头</a></li>

            <li><a href="">二个大光头</a></li>

            <li><a href="">三个大光头</a></li>

            <li><a href="">四个大光头</a></li>

            <li><a href="">五个大光头</a></li>

            <li><a href="">六个大光头</a></li>

            <li><a href="">七个大光头</a></li>

            <li><a href="">八个大光头</a></li>

            <li><a href="">九个大光头</a></li>

            <li><a href="">十个大光头</a></li>

            <li><a href="">11个大光头</a></li>

            <li><a href="">12个大光头</a></li>

        </ul>

    </div>

    <div class="one">

        <a href=""></a>

    </div>

</div>

</body>

</html>

——————————————Css————————————————————

body{

    text-align : center;/*这里是为了让IE中,内部区块居中显示而专门设计,兼容设计,迫不得以,这样设置以后,内部所有的文字都居中了*/

    font : 12px Arial,宋体；

}

#wrapper{

    margin :  auto;/*这里是火狐居中设计,上下为0,左右自动,区块就会居中对齐*/

    padding : 0px;

    width : 300px;

    text-align : left;/*这里是为了刚才IE居中设计,产生的所有文字都居中显示的一个补救措施,让文字按照正常居左显示*/　　

}

.title{

    font : left;

    width : %;

    height : 24px;

    background : url(./images/titbg.gif);

}

.title h3{

    margin : 0px;

    padding : 0px;

    line-height : 24px;/*能让该行内部的内容竖直居中显示,如果行高和外部区块同高的话,内容就会在外部区块中居中显示*/

    font-size : 12px;

    text-indent : 30px;

    background : url(./images/tittb.gif) no-repeat % %;

}

.list{

    width : 298px !important;/*在非IE浏览器中的宽度,IE不识别 !important标签*/

    width : 300px;  /*在IE浏览器中的宽度 是指IE浏览器内核:trident, webkit:苹果, FireFox*/

    float : left;

    border : 1px solid #d8d8d8;

    border-top : 0px;

}

.list ul {

    float : left;

    list-style-type : none;

    margin :0px;

    padding : 0px;

}

.list ul li {

    float : left;

   line-height : 20px;

    margin : 0px 5px;

    width : %;

    background : url(./images/sidebottom.gif) repeat-x % bottom;

}

.list ul li a{

    padding-left : 12px;

    background : url(./images/bullet.gif) no-repeat  %

}

.one{

    height : 5px;

    width : %;

    float : left;

    overflow : hidden

}

a:link, a:visited{

    text-decoration : none;

    color : green;

}

a:hover{

    position : relative;

    top : 1px;

    left : 1px;

    text-decoration : underline;

    color : black;

}

————————————效果图————————————————

有些需要注意的事项比如说：

1、在IE6规定最小高度不能小于18px,将超出的部分隐藏

2、内容为王，内容不可被遮挡,浏览器会自动给内容显示的空间

3、有事会出现和预期不一样的效果，但是,如果你做相关的设置,浏览器会放弃默认。

做的都是些最基础的东西，各位提些宝贵意见！谢谢了！

												


											
Div+Css的初步运用的更多相关文章
	

    
								
  1. div+css模式编写html静态网页例子_仿照网页制作
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    2. 
						
  2. 项目实战之玩转div+css制作自己定义形状
		
    项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
    
		
    3. 
						
  3. 前端之DIV+CSS布局
		
    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
    
		
    4. 
						
  4. DIV+CSS布局中主要CSS属性介绍
		
    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
    
		
    5. 
						
  5. div+css页面右侧底部悬浮层
		
    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>  ...
    
		
    6. 
						
  6. DIV+CSS规范命名大全
		
    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
    
		
    7. 
						
  7. DIV+CSS 清除浮动方法总结
		
    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
    
		
    8. 
						
  8. 十天学会<div+css>横向导航菜单和纵向导航菜单
		
    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
    
		
    9. 
						
  9. DIV+CSS布局网站基本框架
		
    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C语言基础--宏
			
    宏在C语言中经常使用,在linux的源码中可以看到很多宏的高级应用.因此不理解宏,就很难理解代码.本文参考一些互联网资料做一些总结,希望给大家带来帮助. 先说说使用宏的优点及缺点: 优点: 1.提高代 ...
    
			
    2. 
						
  2. NOIP2007 统计数字
			
    1．统计数字 (count.pas/c/cpp) [问题描述] 某次科研调查时得到了 n 个自然数,每个数均不超过 1500000000(1.5*109).已知不相同的数 不超过 10000 个,现在 ...
    
			
    3. 
						
  3. return遇到finally
			
    public class Test { public static void main(String[] args) { System.out.println("=============t ...
    
			
    4. 
						
  4. java@ What are C++ features missing in Java
			
    Following features of C++ are not there in Java. No pointers No sizeof operator No scope resolution  ...
    
			
    5. 
						
  5. Java修饰符关键词大全
			
    所以我以此主题写了这篇文章.这也是一个可用于测试你的计算机科学知识的面试问题. Java修饰符是你添加到变量.类和方法以改变其含义的关键词.它们可分为两组: 访问控制修饰符 非访问修饰符 让我们先来看 ...
    
			
    6. 
						
  6. 【转】hive简介安装 配置常见问题和例子
			
    原文来自:  http://blog.csdn.net/zhumin726/article/details/8027802 1 HIVE概述 Hive是基于Hadoop的一个数据仓库工具,可以将结构化 ...
    
			
    7. 
						
  7. Android实例-设置消息提醒(XE8+小米2)
			
    相关资料: 1.官网实例:http://docwiki.embarcadero.com/RADStudio/XE5/en/Mobile_Tutorial:_Using_the_Notification ...
    
			
    8. 
						
  8. 起底多线程同步锁(iOS)
			
    iOS/MacOS为多线程.共享内存(变量)提供了多种的同步解决方案(即同步锁),对于这些方案的比较,大都讨论了锁的用法以及锁操作的开销,然后就开销表现排个序.春哥以为,最优方案的选用还是看应用场景, ...
    
			
    9. 
						
  9. .NET MVC4 ApiController拦截器的使用
			
    目前在公司新开发了一个项目,第一次正式使用.NET MVC4来搭建,用拦截器来处理权限验证. 自定义拦截器需继承ActionFilterAttribute类,重写OnActionExecuting和O ...
    
			
    10. 
						
  10. ecshop在线手册前言及程序结构
			
    该在线手册是有模版堂转载而来:仅供参考 一.前言 为什么我们ecshop模板堂要重制ecshop在线手册呢?因为目前网上的一些教程有些是比较老的,有些是不全面的,官方的手册也已经很久没有更 新,很多刚 ...
    
			
    11.