首页 > 其他 > 详细

demo3---定位菜单

时间:2017-08-19 10:32:18      阅读:231      评论:0      收藏:0      [点我收藏+]
设置最小宽度,以便容器内容为空时仍可显示默认宽度,内容较多时可自动扩展,也可称为安全宽度,默认为1004px

让元素“消失”的方法:
  display:none;//隐藏对象
  opacity:0//设置透明
  overflow:hidden;//隐藏溢出元素
  visibility:hidden;//设置元素不可见
  width:0;height:0;

input输入框无法添加图片,textArea文本域可以添加背景图片

 

        <div class="mainbox">
            <div class="btn">a
                <div class="title">菜单1</div>
            </div>
            <div class="btn">b
                <div class="title">菜单2</div>
            </div>
            <div class="btn">c
                <div class="title">菜单3</div>
            </div>
            <div class="btn">d
                <div class="title">菜单4</div>
            </div>
        </div>
.btn:hover{
    background: #900;
}
.btn .title{
    height: 50px;
    
    background: #900;
    border-radius: 5px;
    overflow: hidden;
    
    position: absolute;
    top: 0px;
    right:50px;
    
    /*1 使用display控制元素是否显示*/
    /*width: 80px;*/
    /*display:none;*/
    
    /*2 使用动画Transition,一旦width的值变化,就开始动画*/
    width: 0px;
    /*transition: width 1s;*/
    
    /*3 使用Opaicity透明度*/
    /*width: 80px;*/
    /*opacity: 0;*/
    
    /*4 使用动画监视多个变量*/
    /*width: 0;*/
    /*opacity: 0;*/
    /*transition: all 1s;*/
    
}
.btn:hover .title{
    
    /*1 */
    /*display: block;*/
    
    /*2 */
    width: 80px;
    
    /*3*/ 
    /*opacity: 1;*/
    
    /*4 */
    /*width: 80px;
    opacity: 1;*/
}

demo3---定位菜单

原文:http://www.cnblogs.com/roxy/p/7394749.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!