一、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. Ioc-Autofac实现自动的注入

    在开发过程中,最郁闷的莫过于当你新增一个Service时,你需要对该Service进行注册,有的是使用代码注入,有的是XML配置注入,不管是哪种类型的注入,经常会出现开发人员忘记注入的情况. 于是我试 ...

  2. iOS基础

    1.属性readwrite,readonly,assign,retain,copy,nonatomic 各是什么作用,在那种情况下用? readwrite 是可读可写特性:需要生成getter方法和s ...

  3. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  4. UVA 10127题目的解答

    #include <iostream>#include <cstdio>#include <cmath> int main(){ int num; while (s ...

  5. 使用weave实现跨主机docker容器互联

    关于weave的原理不做细致的说明,如果想了解weave可以登陆官网:https://www.weave.works/ In this post,使用阿里云3台ECS服务器进行weave搭建,并测试搭 ...

  6. 源码搭建SVN+Apache+Setpass

    1.安装配置apache2.2.18 http://download.csdn.net/download/YH555/3299526tar xf httpd-2.2.18.tar.bz2cd http ...

  7. 多台CentOS服务器时间同步（NTP时间同步）（转）

    1.用ntpdate从时间服务器更新时间 如果你的linux系统根本没有ntpdate这个命令 yum install ntp 安装完了之后,你不要做什么配置,也不需要,直接测试一下 [root@lo ...

  8. OC面向对象—多态

    OC面向对象—多态 一.基本概念 多态是基于继承的基础之上的,多态可以使得父类的指针指向子类的对象.如果函数或参数中使用的是父类类型,可以传入父类.子类对象,但是父类类型的变量不能直接调用子类特有的方 ...

  9. iOS开发 - 网络数据安全加密(MD5)

    提交用户的隐私数据 一定要使用POST请求提交用户的隐私数据GET请求的所有参数都直接暴露在URL中请求的URL一般会记录在服务器的访问日志中服务器的访问日志是黑客攻击的重点对象之一 用户的隐私数据登 ...

  10. Android图片缓存的框架ImageLoader的使用

    DisplayImageOptions options;        // DisplayImageOptions是用于设置图片显示的类 // 使用DisplayImageOptions.Build ...