zoukankan      html  css  js  c++  java
  • css布局左右技巧分享

    无意之间发现左右侧布局很多技巧在里边,接下来分享下实例:

    <div style="40px;height:36px;float:left;overflow:hidden; background-color:#CCC;position:relative;">左右测试</div>
    <div style=" background-color:#F00;margin-left:50px;">文字图</div><!--比较推荐用于这种方式实现-->
    
    <div style="40px;height:36px;float:left;overflow:hidden; background-color:#CCC;">左右测试</div>
    <div style=" background-color:#F00;margin-left:50px;position:relative;">文字图</div>
    
    <div style="float:left;40px;height:38px; background-color:#ccc;margin-right:10px;position:relative;overflow:hidden;">左侧测试</div>
    <div style=" background-color:#0F0;overflow:hidden;_display:inline-block;">文字图</div>
    
    <div style="100%;position:relative;">
        <div style="40px;height:38px; background-color:#ccc;position:absolute;left:0px;top:0px;">左侧测试</div>
        <div style=" background-color:#FF0;margin-left:50px;">文字图</div>
    </div>
    
    <div style="float:left;40px;height:38px; background-color:#ccc;margin-right:10px;overflow:hidden;">左侧测试</div><!--在自适应布局情况下很少应用到这个-->
    <div style=" background-color:#00F;float:left;400px;">文字图</div>

    <
    div style="float:left;40px;height:38px; background-color:#ccc;margin-right:10px;overflow:hidden;">左侧测试</div><!--在右侧内容不超过左侧时应用--> <div style=" background-color:#00F;">文字图</div>


    text-indent:-999em; //隐藏文本的一种方法
    css IE6 下去掉 input等元素 的边框 border: 0 none; 所有浏览器都可以了
    outline: 5px solid #e3e3e3;thick属性点点)加在边框之外的一层,轮廓线不会占据空间。

    <p style=" background-color:#FF0;background-color:#0F0;*background-color:#F00;_background-color:#000;">
    请用CSS来定义标签,要求实现以下效果:字体颜色再IE6下为黑色,IE7下为红色,IE8下为绿色,其他浏览器下为黄色。
    </p>

       注:带有粉色代码为左右布局关键词,此代码仅代表个人意见。哈哈O(∩_∩)O哈哈~

  • 相关阅读:
    私有程序集的探测过程
    程序集版本控制
    浅谈对对象clone的理解
    [导入]WCF后传系列(3):深入WCF寻址Part 3—消息过滤引擎
    [导入]WCF后传系列(5):深入WCF寻址Part 5—逻辑地址和物理地址
    强名称程序集
    [导入]WCF后传系列(4):深入WCF寻址Part 4—自定义消息筛选器
    绑定过程小结
    概述
    UpdatePanel 的更新与触发环境
  • 原文地址:https://www.cnblogs.com/ninali/p/3557730.html
Copyright © 2011-2022 走看看