解决相关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中伪类和伪元素的区别:
基本的格式是:
@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————表单文本框
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin:;
}
2.在火狐上:
input[type="number"]{
-moz-appearance:textfield;
}
b.在解决type='number'的问题上,如果再苹果手机解决不了的时候,可以通过使用type='tel'来做替换操作
解决相关css基础问题的更多相关文章
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- 第五模块:WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- CSS基础面试题,快来查漏补缺
本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
随机推荐
- ios 关于时间戳与时间转化的笔记
linux系统获取时间戳的方法:time() ; 时间戳转换成需要的时间格式: NSDateFormatter *formatter=[[NSDateFormatter alloc]init]; [f ...
- druid 搭建集群环境
下载druid 下载地址 http://static.druid.io/artifacts/releases/druid-services-0.6.145-bin.tar.gz 解压 tar -zxv ...
- UEFI+GPT下安装Win10+Ubuntu16.04双系统
安装环境 SSD+HDD双盘,Win10安装在SSD里,HDD分出来60G安装Ubuntu. 自行百度你的主板是否支持UEFI启动方式. Win10 下载Win10安装镜像.烧盘等步骤就不说了,重启后 ...
- 初识ElasticSearch
概述 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. 分布式的 ...
- 一条SQL搞定信息增益的计算
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 周东谕,2011年加入腾讯,现任职于腾讯互娱运营部数据中心,主要从事游戏相关的数据分析和挖掘工作. 信息增益原 ...
- 让你的JS代码更具可读性
一.合理的添加注释 函数和方法--每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用 的算法.陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值(因为这不能从函 数定义中推断 ...
- 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)
本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...
- 某公司HP-EVA4400数据丢失的恢复方法和恢复全过程
一.故障描述1.设备清单一台HP-EVA4400控制器(型号:AG638-53011)三台HP-EVA4400扩展柜(型号为AG638-63001),和28块HP-FC磁盘(型号为300G FC硬盘) ...
- 简谈-Python的注释、变量类型、标识符及关键字
在Python程序中,要想支持中文输出,则要在代码前面添加 标识符:开发人员在程序中自定义的一些符号和名称 标示符是自己定义的,如变量名 .函数名等 标识符的规则: 标示符由字目.下划线和数字组成, ...
- IntelliJ-项目配置,解决no artifacts的warnings
1.名词解释 artifacts:是maven中的一个概念,表示项目/modules如何打包,比如jar,war,war exploded,ear等打包形式, 一个项目或者说module有了artif ...