采用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. HDU 1029 Ignatius and the Princess IV DP
			
    kuangbin 专题 这题,有很多种解法. 第一种: 直接比较每个数出现次数. #include<iostream> #include<string> #include< ...
    
			
    2. 
						
  2. QQMusic绿钻兄，你可安好？我需要晴天。
			
    不好意思,年纪这样大了,还依靠吐槽来保持呆毛的正能量,实在对不住,先说对不起. QQMusic是我最喜欢的腾讯增值服务,正版内容,海量歌手,高清下载.实在是音乐软件中高大上的典范,除了歌手排名中前十中 ...
    
			
    3. 
						
  3. android AudioRecord 与 AudioTrack的录音加回放的使用
			
    http://stackoverflow.com/questions/32682952/audiotrack-audiotack-not-playing-fully-recorded-audio
    
			
    4. 
						
  4. python 使用__slots__
			
    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> class Studen ...
    
			
    5. 
						
  5. python的资料
			
    python2.7的类库:https://docs.python.org/2.7/library/index.html
    
			
    6. 
						
  6. eclipse快捷键补充
			
    编辑相关快捷键 注释          Ctrl + / 快速修复    Ctrl + 1 删除当前行 Ctrl + d 格式化文档 Ctrl + Shift + f 插入空行    Shift +  ...
    
			
    7. 
						
  7. 有如下Student 对象，  private String name;       private int age;       private int score;   private String classNum;  其中，classNum
			
    package homework003; import java.util.ArrayList; import java.util.List; public class Text { public s ...
    
			
    8. 
						
  8. ModSecurity--web应用防火墙
			
    Introducing ModSecurity IIS 2.7.2 Stable Release ★★★★★ ★★★★ ★★★ ★★ ★   swiatFebruary 11, 20130 0 0 0 ...
    
			
    9. 
						
  9. SQL Server内存性能分析
			
    内存概念: Working Set = Private Bytes + Shared Memory Working Set:某个进程的地址空间中,存放在物理内存的那一部分 Private Bytes: ...
    
			
    10. 
						
  10. 检查class排座位
			
    在写这篇文章之前,xxx已经写过了几篇关于改检查class主题的文章,想要了解的朋友可以去翻一下之前的文章     每日一道理 灯,带有一种明亮的光,每当深夜来临,是它陪伴着你,如此默默无闻.它是平凡 ...
    
			
    11.