您现在的位置是:门户> 编程语言> HTML/CSS

利用相对定位及偏移量做精美输入界面
2020-05-22 17人围观 0条评论
简介利用相对定位及偏移量做精美输入界面

    利用相对定位和偏移量属性,可以很好的实现以前需要用图片才能实现的界面,而且实现起来比也很方便。例如,当需要用户输入某些信息,我们常常会用到:标题栏-内容-确定按钮 这种结构,下面是利用CSS样式的相对定位及偏移量做的输入界面。主要特点是:


    标题栏图片有向上的偏移量。利用样式:top:-10px;position:relative; 可以让图片脱离容器,定位于容器之外(本例子中图片的容器是class="main"的div)。但有一点需要注意的是,图片位置虽然脱离容器了,但它依旧在容器里占有一定空间,该例子中,无论怎么设置.main选择器的height属性,绿色条纹的高度总不会小于20px(图片的高度)。
    标题栏的文字我同样用了top,bottom,left,right这些偏移量属性,一开始想只利用vertical-align:middle; 属性让文字垂直居中,但失败了,文字一直和底线对齐,无奈又用了偏移量。
    绿色条纹使用了CSS滤镜产生渐变效果,可惜据说只有IE支持:-(
    末端“确定”按钮也是用了相对定位及偏移量的技术。


    CSS代码:

    a:link,a:active,a:visited{}{
        color: #2D4D97;
        text-decoration: none;
    }
    a:hover {}{
        text-decoration: none;
        color: #FF9900;
    }
    .title{}{
        color:#006600;
        display:block;
        height:20px;
        width:65%;
        border:none;
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
    }
    .title span{}{
        display:inline;
        position:relative;
        top:-4px;
    }
    .title img{}{
        position:relative;
        top: -10px;
        left: 5px;
        display:inline;
        margin:0px 10px 0px 0px;
        padding:0px;
        height:20px;
    }
    .main{}{
        margin:10px 20px 30px 20px;
        padding: 10px 20px 10px 20px;
        width:100%;
        border:#CCCCCC 1px solid;
    }
    .main .item{}{
        vertical-align:middle;
        margin:5px 0 5px 0;
    }
    .main .foot{}{
        position:relative;
        bottom:-10px;
        left:80%;
        display:block;
        border:#CCCCCC 1px solid;
        border-bottom:none;
        width:15%;
        text-align:center;
    }
    .main .foot a{}{
        background-color:#F3FCE0;
        padding:2px;
        width:100%;
    }
    .main .foot a:hover{}{
        background-color:#D8EBFE;
        padding:2px;
        width:100%;
    }
    html代码:


        http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> 请填写角色基本信息


       
    角色名称:
         
       

       
    角色描述:
         
       


        确定

     

分享:

文章评论