采用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. “Clean Code” 读书笔记序
			
    最近开始研读 Robert C.Martin 的 “Clean Code”,为了巩固学习,会把每一章的笔记整理到博客中.而这篇博文作为一个索引和总结,会陆续加入各章的笔记链接,以及全部读完后的心得体会 ...
    
			
    2. 
						
  2. codeforce 606A - Magic Spheres
			
    题意:a,b,c三种球,能把俩个一样的球变成另一颜色不一样的球.给你目标x,y,z,问能否经过变化至少达打目标. #include<iostream> #include<stdio. ...
    
			
    3. 
						
  3. 数电课设——琐碎
			
    这几天没有更新过网站了,也没继续开发VellLock了,可是感觉还是没有闲着,一直在跟下面的一些元器件在打交道,当然下面的都是小儿科,英文文档都看得我快吐血了.数电基本属于棺材边上过的我,是各种头大, ...
    
			
    4. 
						
  4. 如何写出性能好的sql
			
    开发人员是很少注意SQL对数据库性能影响的重要性的,大多程序员都会认为SQL是比较简单的,需要的时候查查手册就可以了,很少有深究的. 这样的观念对大型系统的开发是致命的,需要纠正这样的观念. 造成这样 ...
    
			
    5. 
						
  5. hdoj 2151 Worm【动态规划】
			
    Worm Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
    
			
    6. 
						
  6. hdoj 1257 最少拦截系统
			
    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
    
			
    7. 
						
  7. shell 检测ip的合法性与检测网络掩码的合法性
			
    有时我们需要检测IP输入的正确性与网络掩码的正确性,用shell脚本写的: #验证ip地址的正确性 check_ip_format() { echo $1 | grep "^[0-9]\{1 ...
    
			
    8. 
						
  8. emWin -- 模拟器系列1 - 如何建立模拟器开发环境
			
    面对如此强大的emWin,大家是否都有跃跃欲试的冲动呢?但是没有硬件可以调试的童鞋,难道只能望洋兴叹?非也.非也.Segger公司早就考虑到了.Segger推出模拟器的目的不仅仅是为了解决没有硬件的烦 ...
    
			
    9. 
						
  9. web.xml(spring/spring mvc/hibernate)
			
    <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" ...
    
			
    10. 
						
  10. Css基础-id选择器
			
    id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...
    
			
    11.