一、ie9不支持line-height字体垂直居中兼容问题
    原因:CSS中使用了中文字体，而中文字体使用汉字。如：font-family:"微软雅黑"
   1、将中文字体汉字转换为Unicode编码
       “黑体”对应Unicode编码为“\9ED1\4F53”
       “宋体”对应Unicode编码为“\5B8B\4F53”
       “仿宋”对应Unicode编码为“\4EFF\5B8B”
       “微软雅黑”对应Unicode编码为“\5FAE\8F6F\96C5\9ED1”
    将汉字转换为Unicode编码的字符，即成功设置相应字体，又兼容IE9浏览器支持垂直居中line-height样式。汉字字体中文字转换为Unicode编码后字体效果相同，不受影响，兼容各大浏览器。记不住可以http://www.divcss5.com/jiqiao/j325.shtml查看。
   2、将中文字体汉字使用英文名
       将CSS+DIV布局中CSS设置中文字体汉字转换对应英文名字体，转换后设置中文字体效果不变，并兼容各大浏览器。
        “黑体”对应英文名为“SimHei”
        “宋体”对应英文名为“SimSun”
        “仿宋”对应英文名为“FangSong”
        “微软雅黑”对应英文名为“Microsoft YaHei”
        将div css布局中css字体使用汉字字体转换为英文名的字体，其设置字体效果不变不受影响，并兼容各大浏览器，大家可以放心使用。
二、div居中
    主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。
    body{ text-align:center}
    .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
    /* css注释：为了观察效果设置宽度 边框 高度等样式 */
    此居中方法是让div居中效果完美兼容各大平台、兼容各大浏览器，无论高版本ie还是高版本的ie均兼容。
三、DIV CSS布局图文列表布局案例 ul li图文列表
    CSS
    ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
    ul.imglist li{ float:left; padding:4px 8px; width:160px}
    ul.imglist li img{ display:block; width:160px; height:90px}
    ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px;     background:#F6F
    HTML
        <ul class="imglist">
        <li>
            <a href="#" target="_blank">
               <img src="data:images/i160x90.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>     
        <li>
            <a href="#" target="_blank">
               <img src="data:images/i160x90-2.jpg" />
               <span>标题内容 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="data:images/i160x90-3.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="data:images/i160x90-2.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="data:images/i160x90.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="data:images/i160x90-2.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
    </ul>    
    关键代码解释：
    使用margin:0 auto，让ul结构布局居中；
    overflow:hidden，因为ul的子级使用float属性会产生浮动，所以使用清除子级使用float对父级产生不能撑开问题；
    display:block对图片设置独占一行；
    display:block让span设置宽度高度生效同时独占一行效果；
    line-height:30px; 设置文字在30px中垂直居中；
四、DIV+CSS模板初始化
    样式：
    @charset "utf-8";
    /* DIVCSS5 - www.divcss5.com */
    body, div,iframe, ul, ol, dl, dt, dd, li, dl,
    h1, h2, h3, h4, table,th, td, input, button, select,
     textarea {margin:0; padding:0;
    font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif;}
    /* \5B8B\4F53 宋体 更多中文字体
    转换Unicode编码表网址 http://www.divcss5.com/jiqiao/j325.shtml */
    ol, ul ,li{list-style: none;}
    img {border: 0; vertical-align:middle;}
    body{color:#000000;background:#FFF; text-align:center;}
    .clear{clear:both;height:1px;width:100%;
     overflow:hidden; margin-top:-1px;}
    a{color:#000000;text-decoration:none; }  
    a:hover{color:#F00;}     
    .red ,.red a{ color:#F00;}
    .blue ,.blue a{ color:#1E51A2;}     
    .lf{float:left;}
    .rt{float:right;}     
    .pt5{padding-top:5px;}
    .pb5{padding-bottom:5px;}     
    #header ,#main ,#footer{ margin:0 auto;
     width:980px; overflow:hidden}     
    #main_left{ float:left;}
    #main_right{ float:right;}
    模版
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>DIVCSS5-HTML模板 UTF-8 - www.divcss5.com </title>
    <meta name="keywords" content="关键词" />
    <meta name="description" content="关键词描述" />
    <link rel="stylesheet" href="images/style.css" />
    <script src="JS文件路径地址" type="text/javascript"></script>
    </head>
    <body>
    欢迎您使用初始化的HTML+CSS模板！<br />
    <div class="clear"></div>
    </body>
    </html>

五、靠左靠右布局与只靠左布局DIV CSS实例
     .boxs{ margin:0 auto; height:70px; width:550px; background:#4089B2;
     padding-top:32px; overflow:hidden}
    .box-left{ float:left; width:250px; text-align:right}
    .box-right{ float:right; width:250px; text-align:left}
     
    .boxs2{ margin:0 auto; height:70px; width:550px; background:#4089B2; padding-top:32px}
    .box-left2{ float:left; width:154px; padding-left:96px}
    .box-right2{ float:left; width:154px; padding-left:50px}

<p>使用靠左float:left 靠右float:right实现布局：</p>
    <div class="boxs">
    <div class="box-left"><a href="#"><img src="data:images/ad1.gif" /></a></div>
    <div class="box-right"><a href="#"><img src="data:images/ad2.gif" /></a></div>
    </div>
    <p>使用靠左float:left和padding实现布局：</p>
    <div class="boxs2">
    <div class="box-left2"><a href="#"><img src="data:images/ad1.gif" /></a></div>
    <div class="box-right2"><a href="#"><img src="data:images/ad2.gif" /></a></div>
    </div>

六、div css绝对定位布局案例 不规律业务流程CSS布局实例
   1、position:relative
 　　父级赋予其定位

2、position:absolute
　　子级设置其样式，相等于父级设置定位样式

3、left、top、right、bottom
　　对子级设置定位在父级位置

divcss5布局的更多相关文章

  1. 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码

    原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...

  2. nav布局 在线演示 DIVCSS5

    <!doctype html> nav布局 在线演示 DIVCSS5 传统 div ul li布局导航条效果 网站首页 HTML教程 HTML入门 HTML5教程 CSS教程 CSS入门 ...

  3. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  4. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  5. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

  6. DIV+CSS布局命名规范

    一.命名规则说明 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divc ...

  7. CSS布局总结及实际应用中产生的问题

    布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...

  8. 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    转载  原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术   -    ...

  9. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

随机推荐

  1. Java 实现网站当前在线用户统计

    1. import java.util.HashSet; import javax.servlet.ServletContext; import javax.servlet.http.HttpSess ...

  2. java 获取请求客户端的真实IP地址

    转载自:http://leiyongping88.iteye.com/blog/1545930 用request.getRemoteAddr();方法获取的IP地址是:127.0.0.1或192.16 ...

  3. 移动端公共css样式

    @media screen and ( min-width: 319px){html{ font-size: 100px;}}@media screen and ( min-width: 359px) ...

  4. POJ 1528问题描述

    Description From the article Number Theory in the 1994 Microsoft Encarta: ``If a, b, c are integers ...

  5. Highcharts动态赋值学习

    最近老大让做项目中的统计图表功能,需要使用highcharts这个插件,弄出来了两种类型的图表动态赋值的实现,首先贴上中文网的官网和api地址,使用这个英语不好的同学肯定会用到的: 中文网官网:htt ...

  6. AWE、加载计数器错误

    错误#1 16:28 2012-7-25数据库服务器A想开启下sql server 2000的AWE.结果发现在查询分析器中执行RECONFIGURE时报错.运行的语句为: sp_configure ...

  7. CentOS下netstat + awk 查看tcp的网络连接状态

    执行以下命令: #netstat -n | awk ‘/^tcp/ {++state[$NF]} END {for(key in state) print key."\t".sta ...

  8. swift 异步加载图片

    import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: ...

  9. C#线程系列讲座(1)：BeginInvoke和EndInvoke方法

    一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能,将要执行的任务分解成多个子任务执行.这就需要在同一个进程中开启多个 ...

  10. MVC Router学习

    Route顾名思义就是路由的意思了. 我们先打开Global.asax查看代码 可以看到 routes.MapRoute(     "Default", // 路由名称     & ...