一、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. Mybatis在xml文件中处理大于号小于号的方法

    第一种方法:用了转义字符把">"和"<"替换掉,然后就没有问题了. AND start_date <= CURRENT_DATE AND en ...

  2. t-sql中字符串前加N代表什么意思

    比如 select @status = N'stopped' 那么其中的字符串 stopped 前面为什么要加 N 呢?而且我们发现有些地方加 N 与否都没有影响,有些地方又必须加 N. N 在这里表 ...

  3. 简述Docker镜像、容器、仓库概念

    Docker镜像 Docker镜像(Image)类似于虚拟机的镜像,可以将他理解为一个面向Docker引擎的只读模板,包含了文件系统. 例如:一个镜像可以完全包含了Ubuntu操作系统环境,可以把它称 ...

  4. node.js render模板

    在用node组织前端架构和后端的时候,如果不用nginx做反向代理,则会考虑怎么样render模板. 在现有的项目中没有以下几种方式render模板: 1.将.html当做静态文件,如果url定位到哪 ...

  5. PHP编码规范（转）

    一.文件格式 1. 对于只含有 php 代码的文件,我们将在文件结尾处忽略掉 "?>" .这是为了防止多余的空格或者其它字符影响到代码.例如:<?php$foo = ' ...

  6. Mysql 5.7.7

    1.安装Mysql(需要管理员权限) 2.启动Mysql 3.连接Mysql Mysql刚安装成功后可输入 mysql -u root -p ,然后回车,提示输入密码,由于是第一次连接,不用输入密码也 ...

  7. javascript设计模式学习之十三——职责链模式

    一.职责链的定义和使用场景 职责链模式的定义是,职责链模式将一系列可能会处理请求的对象连接成一条链,请求在这些对象之间一次传递,直到遇到一个可以处理它的对象.从而避免请求的发送者和接收者之间的耦合关系 ...

  8. Entity FrameWork初始化数据库的四种策略

    程序猿就是苦逼,每天还得分出一些时间去写博文.天真的很热,今天就随便写一点啦! 1.EF初始化数据库的四中策略 EF可以根据项目中的模型自动创建数据库.下面我们就分类看看Entity Framewor ...

  9. iOS 事件穿透

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  10. mysql management note

    related url : http://willvvv.iteye.com/blog/1563345 http://lxneng.iteye.com/blog/451985    这篇文章对vari ...