CSS:利用相對定位及位移量做精美輸入介面

來源:互聯網
上載者:User
css

  利用相對定位和位移量屬性,可以很好的實現以前需要用圖片才能實現的介面,而且實現起來比也很方便。例如,當需要使用者輸入某些資訊,我們常常會用到:標題列-內容-確定按鈕 這種結構,下面是利用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代碼:

<div class="title">
    <span>請填寫角色基本資料</span>
</div>
<div class="main">
    <div class="item">角色名稱:
      <input name="textfield" type="text" size="20" />
    </div>
    <div class="item">角色描述:
      <textarea name="textfield2" cols="50" rows="5"></textarea>
    </div>
<div class="foot">
    <a href="#nogo">確定</a></div>
</div>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。