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. 十一、Struts2封装请求参数的方式

    十一.Struts2封装请求参数的方式 方式一.Action 本身作为model对象,通过成员setter封装(一个名字为params的拦截器干的) 注意:表单中的名称要和动作类中的名称一致(这是必须 ...

  2. ChainOfResponsibility

    #include <iostream> using namespace std; class Chain { public: bool Handle() { return false; } ...

  3. jquery 分页控件功能

      <script>        //分页         function getPageNum(num) {             $("#PageNum ul" ...

  4. Oracle数据库中的Function调用参数问题

    在工作中用到了Oracle数据库,需要调用Oracle的Function,Function返回的游标和结果都是通过参数来获取的 比如Function定义如下: , intype, ininttype) ...

  5. Clearing Search Values

      Use the SearchClear() method which is part of the Field class to clear search values on a particul ...

  6. C#中如何将combox中的下拉项和一个枚举中的各项进行绑定

    实现一个combobox,将其各个下拉项与枚举进行绑定 效果图如下: 代码详解如下: 枚举: public enum StoreSite { /// <summary> /// 未知 // ...

  7. jquery easyui combobox

    $("#select_Dic").combobox({                        url: "http://www.cnblogs.com/Ajax/ ...

  8. thinkphp二维数组模板输出方法

    thinkphp二维数组模板输出方法 先写个记录,有空再整理发上来

  9. PHP+MYSQL会员系统的开发实例教程

    本文通过一个简单的实例完成了完整的PHP+MySQL会员系统功能.是非常实用的一个应用.具体实现步骤如下: 一.会员系统的原理: 登陆-->判断-->保持状态(Cookie或Session ...

  10. 自适应游标共享技术02(一个简单的例子来走近ACS)

    为了不让其他因素干扰实验,参数设置如下: optimizer_mode=ALL_ROWS(使用CBO) optimizer_features_enable=11.2.0.3(使用最新的优化参数) op ...