divcss5布局

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:des   class   style   com   http   si   使用   代码   it   

一、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="images/i160x90.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>     
        <li>
            <a href="#" target="_blank">
               <img src="images/i160x90-2.jpg" />
               <span>标题内容 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="images/i160x90-3.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="images/i160x90-2.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="images/i160x90.jpg" />
               <span>自制快手糟黄瓜 吃完整个</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
               <img src="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="images/ad1.gif" /></a></div>
    <div class="box-right"><a href="#"><img src="images/ad2.gif" /></a></div>
    </div>
    <p>使用靠左float:left和padding实现布局:</p>
    <div class="boxs2">
    <div class="box-left2"><a href="#"><img src="images/ad1.gif" /></a></div>
    <div class="box-right2"><a href="#"><img src="images/ad2.gif" /></a></div>
    </div>

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

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

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

divcss5布局

标签:des   class   style   com   http   si   使用   代码   it   

原文:http://www.cnblogs.com/bwteacher/p/4947753.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区