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. 为Magento2新主题添加使用Grunt

    Go to \dev\tools\grunt\configs, open your themes.js file, and change it according to the following e ...

  2. CentOS 安裝 VMware Workstation / VMware Player

    参考:http://www.vixual.net/blog/archives/650 序列号:1F04Z-6D111-7Z029-AV0Q4-3AEH8 注意说明:刚开始有很长的一系列协议信息,可以用 ...

  3. 响应式Web设计基础

    本文所有内容来自Responsive Web Design Fundamentals 手机.大屏手机.平板电脑.桌面电脑.游戏控制台.电视.甚至是可穿戴设备,如此多的设备也形成了多种多样的屏幕尺寸.屏 ...

  4. Android IOS WebRTC 音视频开发总结（十二）-- sufaceview

    谈到音视频不得不谈谈对视频呈现的理解,为了让大家能有一个更好的理解,先看看android里面SurfaceView的原理,后续陆续分享其绘画原理. 说明:本文是转载的,转载自哪里我也不知道,貌似经过很 ...

  5. Android IOS WebRTC 音视频开发总结（十一）-- stun&turn部署

    本篇文章主要介绍webrtc里面的stun,turn服务的安装与配置(转载请说明出处: http://www.cnblogs.com/lingyunhu, RTC.Blacker) 说到STUN,TU ...

  6. .NET中的字符串你了解多少？

    字符串的特性 1.不可变性        由于字符串是不可变的的,每次修改字符串,都是创建了一个单独字符串副本(拷贝了一个字符串副本).之所以发生改变只是因为指向了一块新的地址.        ps: ...

  7. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  8. objective-C基本知识

    预编译指令 1.自己写的头文件最好用双引号,而系统自带的可以用尖括号. ************************************************* 点语法 p.age= 10; ...

  9. Outlook 2007无法打开链接"由于本机的限制 该操作已被取消"

    编写人:CC阿爸 2014-2-17 近来在日常维护中,经常性的遇到用户在outlook中打开链接,提示[由于本机的限制,该操作已被取消],第一次的在网上搜索到解决办法后, 第二次再处理时,又没能记住 ...

  10. PHP MYSQLI中事务处理

    MYSQL事务处理让所有sql语句执行成功后才去处理,如果有一条没有成功或者报错就会回滚事务,防止敏感操作处理失败.MYSQL中只有INNODB和BDB类型的数据表才能支持事务处理!其它类型是不支持的 ...