采用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. 4.4 CUDA prefix sum一步一步优化
			
    1. Prefix Sum 前缀求和由一个二元操作符和一个输入向量组成,虽然名字叫求和,但操作符不一定是加法.先解释一下,以加法为例: 第一行是输入,第二行是对应的输出.可以看到,Output[1]  ...
    
			
    2. 
						
  2. 6.1 CUDA: pinned memory固定存储
			
    CPU和GPU内存交互 在CUDA编程中,内存拷贝是非常费时的一个动作. 从上图我们可以看出:1. CPU和GPU之间的总线bus是PCIe,是双向传输的. 2. CPU和GPU之间的数据拷贝使用DM ...
    
			
    3. 
						
  3. HDU-4651 Partition 整数拆分,递推
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4651 题意:求n的整数拆为Σ i 的个数. 一般的递归做法,或者生成函数做法肯定会超时的... 然后要 ...
    
			
    4. 
						
  4. 在Windows操作系统中，如何终止占有的8080端口的tomcat进程
			
    在Windows操作系统中,我们在启动一个tomcat服务器时,经常会发现8080端口已经被占用的错误,而我们又不知道如何停止这个tomcat服务器. 本文将通过命令来强行终止这个已经运行的tomca ...
    
			
    5. 
						
  5. 解决各大浏览器兼容问题hack
			
    解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari. 浏览器兼容是网站前端页面制作最基本的问题,通常I ...
    
			
    6. 
						
  6. Oracle- 表的自增长创建
			
    Oracle创建自增长要先写序列还要去写触发器,不像MSSQLSERVER那样方便.但也是麻烦,记录如下: Oracle中,可以为每张表的主键创建一个单独的序列,然后从这个序列中获取自动增加的标识符, ...
    
			
    7. 
						
  7. (1/18)重学Standford_iOS7开发_iOS概述_课程笔记
			
    写在前面:上次学习课程对iOS还是一知半解,由于缺乏实践,看公开课的视频有时不能很好地领会知识.带着问题去学习永远是最好的方法,接触一段时间iOS开发以后再来看斯坦福iOS公开课,又会有许多新的发现, ...
    
			
    8. 
						
  8. 《MEF程序设计指南》博文汇总
			
    <MEF程序设计指南>博文汇总 在MEF之前,人们已经提出了许多依赖注入框架来解决应用的扩展性问题,比如OSGI 实现以Spring 等等.在 Microsoft 的平台上,.NET Fr ...
    
			
    9. 
						
  9. linux教程：[4]配置Tomcat开机启动
			
    http://jingyan.baidu.com/article/6525d4b1382f0aac7d2e9421.html 方法/步骤 1 请自行下载安装配置tomcat的服务器环境 本经验仅仅介绍 ...
    
			
    10. 
						
  10. 让Visual Studio 2015 支持ASP.NET MVC4.0.0.1
			
    近日装上了Visual Studio 2015 ,打开之前vs2013创建的MVC4的项目发现无法编译通过,提示System.Web.MVC,System.Web.WebPages 等找不到,网上搜索 ...
    
			
    11.