采用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. Idiomatic Python手记一:  average in FP way
			
    方法一: import operator def average(*args): return reduce(operator.add, args) / len(args) if args else  ...
    
			
    2. 
						
  2. Error starting static Resources java.lang.IllegalArgumentException: Document base D:\Program Files\apache-tomcat-xxx\webapps\xxx does not exist or is not a readable directory
			
    网上的答案大多数如下: 但并没有解决我的问题  经过我的观察: 在tomcat的server.xml有Lottery项目描述,但实际上,该项目已被我删除,不存在于webapps中了    该行Cont ...
    
			
    3. 
						
  3. CA1060
			
    Move P/Invokes to NativeMethods class 规则描述: 平台调用服务访问非托管代码. 平台调用方法(使用了System.Runtime.InteropServices. ...
    
			
    4. 
						
  4. Spring MVC整合logback日志框架实战
			
    1.引入依赖,本项目maven构建,普通项目导入想要的jar包即可 版本 <properties> <slf4j-api.version>1.7.7</slf4j-api ...
    
			
    5. 
						
  5. CSS样式表优先级
			
    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...
    
			
    6. 
						
  6. prestashop二次开发 笔记（支付插件）
			
    //主函数 public function __construct() { $this->name = 'CilPay';    //模块名称         $this->display ...
    
			
    7. 
						
  7. .NET 基础 一步步 一幕幕[面向对象之静态、非静态]
			
    静态.非静态 先来看一段代码来区分静态与非静态: using System; using System.Collections.Generic; using System.Linq; using Sy ...
    
			
    8. 
						
  8. ASP.NET中配置应用程序
			
    1.   配置文件简介 1.1 分类 1.2关系 Machine.Config和Web.Config都是设置应用程序的配置信息,它们按照类似于继承的关系对应用程序起作用. Machine.Config ...
    
			
    9. 
						
  9. Java foreach操作（遍历）数组
			
    语法: 我们分别使用 for 和 foreach 语句来遍历数组 运行结果: 练习: import java.util.Arrays; public class HelloWorld { public ...
    
			
    10. 
						
  10. 解决下载Android Build-tools 19.1.0失败
			
    准备从Eclipse转到Android Studio了.今天尝试Android Studio的时候,被它提醒我SDK的Android Build-tools版本过低,需要升级. 于是打开Android ...
    
			
    11.