您的位置:首页 > Web前端 > CSS

CSS整理的答疑

2015-12-03 10:18 218 查看
1.position:relavie  div元素,相对定位,如何居中

.jmx-file-box{
position: relative;
width: 340px;
left: 50%;
margin-left: -170px;  /*此处的负值是宽度的一半*/
}
<div class="jmx-file-box"></div>


2.普通元素如何居中(加margin:0 auto)

<table border="1" style="margin:0 auto;">
</table>文字如何居中,(此时body中的文字都居中)
body{text-align:center;}

3.opacity: 0属性控制不透明级别,0是完全被覆盖,透明

.jmxfile{opacity: 0}
<input type="file class="jmxfile" />

4.<input type="file" />控件难看

<style type="text/css">
/*jmx file 样式*/
input{vertical-align:middle; margin:0; padding:0}
.jmx-file-box{position:relative;width:340px;left:50%;margin-left:-170px;}/*position:relative;*/
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.jmxfile{text-align:center; position:absolute;top:0;right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }/*position:absolute;*/
</style>
<div class="jmx-file-box">
<form enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="jmxfile" class="jmxfile" id=jmxfile size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="button" name="submit" class="btn" value="upload jmx" onclick="ajaxJmxUpload()"/>
</form>
</div>


结果如下图:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: