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. Windows 2003 + IIS6.0 相关 401.1 或 401.2 等问题解决

    我自己处理的过程: 1. 问题场景: 1.1 我本身有一个虚拟机为 win2003 + iis6.0 的环境 c:\ 为NTFS 格式 D:\为Fat32 格式 1.2 我需要部署一个 asp.net ...

  2. 【好文要转】Python：模拟登录以获取新浪微博OAuth的code参数值

    [转自]http://www.tuicool.com/articles/zAz6zi [原文]http://blog.segmentfault.com/hongfei/1190000000343851 ...

  3. hdu1864

    use the cnt as the limit. #include <string.h> #include <stdio.h> ],sum; ]; double a,b,c; ...

  4. 【风马一族_Android】通过菜单的点击，跳转到不同界面

    ---恢复内容开始--- 布局的代码:activity_main.xml <?xml version="1.0" encoding="utf-8"?> ...

  5. input文本框实现宽度自适应代码实例，input文本框

    本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...

  6. 502 bad gateway 错误

    在安装好使用过程中出现502问题,一般是因为默认php-cgi进程是5个,可能因为phpcgi进程不够用而造成502,需要修改/usr/local/php/etc/php-fpm.conf 将其中的m ...

  7. url 编码（percentcode 百分号编码）

    http://www.imkevinyang.com/2009/08/%E8%AF%A6%E8%A7%A3javascript%E4%B8%AD%E7%9A%84url%E7%BC%96%E8%A7% ...

  8. phpMyAdmin提示“Access denied for user 'root'@'localhost' (using password: NO)”的解决办法

    一.错误内容 在用thinkPHP登陆phpMyAdmin时遇到以下错误 #1045 - Access denied for user 'root'@'localhost' (using passwo ...

  9. Android消息推送完美方案[转]

    转自 Android消息推送完美方案 推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原因,Android消息推送我们不得不大费周折.本文就是用来 ...

  10. Tomcat工作原理

    http://www.cnblogs.com/shootercheng/p/5838645.html