1    绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
元素被设置成，absolute，原有的位置会被占用，设为 relative原位置保留，此时不设置 left，top还是statuc的效果。但可以 对内部的绝对定位起到标准依据效果。 li width:100%  相对于 ul而言；

2    文本换行与不换行

一般都会使用word-break: keep-all;white-space:nowrap;使得强制不换行。
 word-wrap:break-word;word-break:break-all;white-space:normal; 换行

3    table样式

           <style>
        .classical_table1 {
            border-collapse: collapse;
            border: none; /*这样设计1px的边框才能细*/
        }
 
            .classical_table1 td {
                word-wrap: break-word;
                word-break: break-all;
                white-space: normal;
            }
 
        .classical_table1_top {
            padding: 5px 10px;
            font-size: 12px;
            font-family: Verdana;
            font-weight: bold;
           
            color: #fff;
            border-bottom-width: 0;
            text-align: center;
            border: 1px solid blue;
        }
 
            .classical_table1_top td:not(:first-child) {
                border-left: 1px solid yellow;
            }
 
 
        /* cont style */
        .classical_table1_middle td {
            padding: 5px 10px;
            font-size: 12px;
            font-family: Verdana;
            font-weight: bold;
            color: #000;
            border: 1px solid gray;
        }
 
        .classical_table1_bottom td {
            background: #eee;
            font-family: "Microsoft YaHei";
            color: #7a7676;
            line-height: 20px;
            font-size: 12px;
            line-height: 30px;
            border: 1px solid gray;
        }
    </style>

4    带三角的div css3

忌讳在三角形的父级div使用overflow，如需在可在div里面嵌套div再里面的div使用overflow

          /*放内容的div*/
    .triangleDiv_cont_div
    {
        padding: 20px;
        overflow: auto;
        max-height: 300px;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
    }
    
    
    /*上*/
    
    
    /*整体div*/
    .triangleDiv_UP
    {
        position: absolute;
       
        border-radius: 4px;
        border: 1px solid #545050;
        box-shadow: 1px 1px 5px #d1d1d1;
        -webkit-box-shadow: 1px 1px 5px gray;
    }
    .triangleDiv_UP em
    {
        position: absolute;
        left: 10px;
        margin-top: -11px;
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-bottom: 10px solid #1e242b;
        z-index: 5;
    }
    .triangleDiv_UP i
    {
        position: absolute;
        left: 10px;
        margin-top: -10px;
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-bottom: 10px solid white;
        z-index: 5;
    }
    
    
    /*下*/
    /*整体div*/
    .triangleDiv_DOWN
    {
        position: absolute;
       
        border-radius: 4px;
        border: 1px solid #545050;
        box-shadow: 1px 1px 5px #d1d1d1;
        -webkit-box-shadow: 1px 1px 5px gray;
    }
    .triangleDiv_DOWN em
    {
        position: absolute;
        left: 10px;
        bottom: 0px;
        margin-bottom: -11px;
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-top: 10px solid #1e242b;
        z-index: 5;
    }
    .triangleDiv_DOWN i
    {
        position: absolute;
        left: 10px;
        bottom: 0px;
        margin-bottom: -10px;
        width: 0;
        height: 0;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-top: 10px solid white;
        z-index: 5;
    }
    
    /*左*/
    /*整体div*/
    .triangleDiv_LEFT
    {
        position: absolute;
       
        border-radius: 4px;
        border: 1px solid #545050;
        box-shadow: 1px 1px 5px #d1d1d1;
        -webkit-box-shadow: 1px 1px 5px gray;
    }
    .triangleDiv_LEFT em
    {
        position: absolute;
        top: 10px;
        margin-left: -11px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #1e242b;
        z-index: 5;
    }
    .triangleDiv_LEFT i
    {
        position: absolute;
        top: 10px;
        margin-left: -10px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid white;
        z-index: 5;
    }
    
    /*左*/
    /*整体div*/
    .triangleDiv_RIGHT
    {
        position: absolute;
       
        border-radius: 4px;
        border: 1px solid #545050;
        box-shadow: 1px 1px 5px #d1d1d1;
        -webkit-box-shadow: 1px 1px 5px gray;
    }
    .triangleDiv_RIGHT em
    {
        position: absolute;
        top: 10px;
        right: 0px;
        margin-right: -11px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #1e242b;
        z-index: 5;
    }
    .triangleDiv_RIGHT i
    {
        position: absolute;
        top: 10px;
        right: 0px;
        margin-right: -10px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid white;
        z-index: 5;
    }
 

5、向右拉伸的 ul样式

 
.menu_righttype_ul ul {
    top: 0;
    left: 100%;
}
 
.menu_righttype_ul {
    width: 200px;
    margin: 0;
    padding: 0;
    font-family: Segoe UI, Arial;
    position: relative;
    list-style: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   
}
 
    .menu_righttype_ul li {
        display: block;
        width: 100%;
        padding: 0;
        font-size: 14px;
        position: relative;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
 
        .menu_righttype_ul li:hover {
           
        }
 
        .menu_righttype_ul li a {
            width: 100%;
            display: block;
            padding: 15px 20px 15px 19px;
            color: #fff6f6;
            text-decoration: none;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -o-transition: all .3s ease-in-out;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
 
    .menu_righttype_ul ul li ul {
        top: 1px;
    }
 
    .menu_righttype_ul ul, .menu_righttype_ul ul li ul {
        list-style: none;
        margin: 0;
        padding: 0;
       /* display: none;*/
        position: absolute;
        z-index: 999;
        width: 100%;
        background: #171515;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

//使用

  <ul class="menu_righttype_ul">
        <li><a href="javascript:void(0)">多级别</a>
            <ul style="display: block;"><li><a href="javascript:void(0)">111111111111111</a></li>
                <li><a>111111111111111 </a>
                     <ul style="display: block;"><li><a href="javascript:void(0)">522222222222</a></li>
                <li><a href="javascript:void(0)">3333333333 </a></li>
            </ul>
 
 
                </li>
            </ul>
        </li>
 

</ul>

##常用效果css##的更多相关文章

  1. 常用的CSS Hack

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  2. jS事件之网站常用效果汇总

    下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...

  3. 常用的CSS Hack技术集锦

    来源:http://www.ido321.com/938.html 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Ha ...

  4. 整理 W3CSchool 常用的CSS属性列表

    近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版 ...

  5. 常用的CSS框架

    常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了. 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3scho ...

  6. 常用的CSS属性列表汇总

    常用的CSS属性列表汇总 近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...

  7. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

  8. 常用的css命名规则：

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  9. android shape的使用详解以及常用效果（渐变色、分割线、边框、半透明阴影效果等）

    shape使用.渐变色.分割线.边框.半透明.半透明阴影效果. 首先简单了解一下shape中常见的属性.(详细介绍参看  api文档 ) 转载请注明:Rflyee_大飞: http://blog.cs ...

随机推荐

  1. solr5.5教程－solrconfig.xml，加载schema.xml

    布署完成后,接下来要更深入的研究solr的原理和使用. 首先进入testcore这个文件夹下面,发现这个core的conf里并没有schema.xml.那么数据格式是在哪里定义的呢? 打开 solr_ ...

  2. vim的.vimrc文件设置

    set nocompatibleset autowriteset autoreadset nobackupset noswapfile " --- syntax and indent --- ...

  3. /proc/cpuinfo

    /proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间. 它以文件系统的方式为访问系统内核数据的操作提供接口. 用户和应用程序可以通过 proc得到系统的信息,并可以改变内核的某些参数 ...

  4. 《Linux运维趋势》2010-2013年全部期刊下载

    <Linux运维趋势>2010.rar <Linux运维趋势>2011_上.rar <Linux运维趋势>2011_下.rar <Linux运维趋势>2 ...

  5. Linux动态库的查找路径

    前两天写了一个动态库,然后试图编译到程序里面去运行,结果发现编译的时候通过gcc的-L参数来指定路径仅仅能让编译通过,运行时还是会出问题的. 比如下面这个例子: main.c是主程序,sum.c中间含 ...

  6. 安装CMS遇到php5.3的问题

    DedeCMS Error: (PHP 5.3 and above) Please set 'request_order' ini value to include C,G and P (recomm ...

  7. JS焦点图 上下翻动 支持IE6

    <div class="slider"> <ul class="num" id="homePushName"> &l ...

  8. 新浪博客如何显示高亮代码，DIY

    新浪博客对代码的支持功能不尽完美,或者说一点都不好,可是对于一个追求完美的技术痴而言,代码不能够完美的显示,心里总有那么一些不爽,那么如何在新浪中显示那些带颜色的代码呢?经过探究,可以如下设置:   ...

  9. C# 修改IE 源代码参照样例

    using Microsoft.Win32; using System; using System.Collections.Generic; using System.ComponentModel; ...

  10. xtrabackup之Innobackupex全备恢复

    一.当前环境 [mysql@hadoop1 ~]$ mysql --defaults-/my.cnf -uroot -p123456 -P3306 mysql> show variables l ...