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. javascript之for-in循环(for-in Loops)

    for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”. 从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的.因为如果数 ...

  2. MVC 项目 在前台使用DataTable

    1:后台控制器代码 //CreateTestOutputDataHeader生成一个测试DataTable public ActionResult UseDataTable() { DataTable ...

  3. javaSE第五天

    第五天    22 1. 方法(掌握)    22 (1)方法:就是完成特定功能的代码块.    22 (2)格式:    22 (3)两个明确:    23 (4)方法调用    23 (5)案例: ...

  4. 捣蛋phpwind之WindFrameWork

    一直都有关注phpwind这个开源产品,从9.0开始就好关注拉,因为官方说把之前的代码重写了一遍,融入了windFramework这个框架,代码真的挺优美的,今日在做社区的一些功能,心血来潮就参考了p ...

  5. [Cocos2d-x for WP8学习笔记] HelloWorld

    Cocos2d-x 是一个支持多平台的 2D 手机游戏引擎,使用 C++ 开发,基于OpenGL ES,基于Cocos2d-iphone,支持 WOPhone, iOS 4.1, Android 2. ...

  6. Linux下发包处理

    Linux下发包处理: 1.用top分析工具来查看哪个进程占用的CPU资源比较大  2. 通过命令来查看都是那些端口被占用了   netstat -antp | more  3.在top里面查看到的异 ...

  7. css3 文本效果

    CSS3 文本效果   1 CSS3 文本阴影在 CSS3 中,text-shadow 可向文本应用阴影,能够规定水平阴影.垂直阴影.模糊距离,以及阴影的颜色.text-shadow: 5px 5px ...

  8. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  9. Centos 7配置ntp时间同步

    1.NTP时钟同步方式说明     NTP在linux下有两种时钟同步方式,分别为直接同步和平滑同步: 1)直接同步      使用ntpdate命令进行同步,直接进行时间变更.如果服务器上存在一个1 ...

  10. Could not get JDBC Connection; nested exception is org.apache.commons.dbcp.SQLNestedException:

    七月 17, 2014 4:56:01 下午 org.apache.catalina.core.StandardWrapperValve invoke SEVERE: Servlet.service( ...