解决相关css基础问题
//html代码 <div class="operateWays"> <label> <input type="radio" name="Sex"> <span>男</span> </label> <label> <input type="radio" name="Sex" checked="checked"> <span>女</span> </label> </div> //css代码 .operateWays label{ line-height: 3rem; height: 3rem; margin-right: 5px; position: relative; } .operateWays label input[type='radio'],.operateWays label span{ width: 50px; height:3rem; margin-top:5px; } .operateWays label span{ position: absolute; top: 0px; left: 0px; display: block; text-align: center; border: 1px solid #ddd; background: #fff; color: #666; border-radius: 2px; } .operateWays label input[type='radio']{ opacity: 0; filter: alpha(opacity=0); } .operateWays label input[type='radio']:checked+span{ background: #4A943D; border-color: #4A943D; color: #fff; } .operateWays label span:hover{ cursor:pointer; }
1).单选按钮最终显示的效果:
//css代码 .fileinputBtn { height: 35px; position: relative; width: 80px; overflow: hidden; } input[type="file"] { position: absolute; top: 0px; left: 0px; font-size: 100px; opacity: 0; filter: alpha(opacity=0); }
.btn-success{
background-color: #3a9d5d;
border-color: #3a9d5d;
-webkit-appearance: push-button;
white-space: nowrap;
font-size: inherit;
-webkit-user-modify: read-only;
margin: 0px;
} //html代码 <div class="fileinput-button fileinputBtn btn btn-success"> <input type="file" name="AdPicture" data-upload-type="IMAGE" accept="image/*"> 上传文件
</div>
2).上传按钮最终显示的效果是:
3).这是一段纯css清楚浮动:
/*清除浮动效果*/
.clearfix:after{
content:"020";//或者使用"."来代替
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1;
}
4).bootstrap中清除浮动:
// Mixin itself
.clearfix(){&:before,&:after{content:" ";display:table;}&:after{clear:both;}}// Usage as a mixin
.element{.clearfix();}
5).css中伪类和伪元素的区别:
a.伪类:用于向某些选择器添加特殊的效果(可以用来指定一个或者多个语气相关的选择符的状态)
b.伪元素:用于将特殊的效果添加到默写选择器中(是指在HTML的文档指定的信息之外,创建了文档的额外信息。(选择符:伪对象{属性:属性值}))
![](https://images2015.cnblogs.com/blog/699302/201606/699302-20160622181050406-1759680190.png)
6).css中基本字体引用格式
基本的格式是:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值的简单说明:
YourWebFontName:是指你自定义的字体名称
source:指你自定义的字体的存放路径
format:指你自定义字体的格式
weight/style:前者是定义字体的粗体,后者是定义字体样式
/*为了让各个浏览器支持的写法*/
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot');
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'),
url('YourWebFontName.woff') format('woff'),
url('YourWebFontName.ttf') format('truetype'),
url('YourWebFontName.svg#YourWebFontName') format('svg');
}
7).设置隐藏并使用背景图片来修饰:
selected::-ms-expand————下拉框(ie中删除select的方法)
input::-ms-check————单选、复选框
input::-ms-clear————表单文本框
-moz-appearance:none; -webkit-appearance:none;————下拉框删除默认背景图片
8).在解决type="number"的问题上:
a.移除type="number"在浏览器中显示出来的上下箭头
1.在谷歌上:
1 input::-webkit-outer-spin-button, 2 input::-webkit-inner-spin-button{ 3 -webkit-appearance: none !important; 4 margin: 0; 5 }
2.在火狐上:
1 input[type="number"]{ 2 -moz-appearance:textfield; 3 }
b.在解决type='number'的问题上,如果再苹果手机解决不了的时候,可以通过使用type='tel'来做替换操作