解决相关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 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
随机推荐
- 给指针malloc分配空间后就等于数组吗?【转】
首先回答你的问题:严格的说不等于数组,但是可以认为它是个数组一样的使用而不产生任何问题. 不过既然这样,那它应该算是个数组吧.所以,一般我们都用“动态数组”这种名字来称呼这种东西. 要讲清楚这个东西, ...
- Spring Boot 学习笔记--整合Thymeleaf
1.新建Spring Boot项目 添加spring-boot-starter-thymeleaf依赖 <dependency> <groupId>org.springfram ...
- Python 列表(List) 的三种遍历(序号和值)方法
三种遍历列表里面序号和值的方法: 最近学习python这门语言,感觉到其对自己的工作效率有很大的提升,特在情人节这一天写下了这篇博客,下面废话不多说,直接贴代码 #!/usr/bin/env pyth ...
- 【react学习】关于react框架使用的一些细节要点的思考
( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的) 这篇文章主要是写关于学习react中的一些自己的思考: 1.set ...
- linux命令之crontab定时执行任务
一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...
- STM32之呼吸灯实验
首先,我想引用一下在一片博文里 看到 的一段话,写的很详细, 首先来说,你要使用PWM模式你得先选择用那个定时器来输出PWM吧!除了TIM6.TIM7这两个普通的定时器无法输出PWM外,其余的定时器都 ...
- IDEA第四章----配置模板
idea提供很多模板从而提高编写代码的效率,比如说一些经常用的代码及生成文件时的模板. 第一节:实时代码模板 顾名思义,实时代码模板是指在编写程序中输入一段固定的字母可以快速生成自己想要的代码,例如: ...
- [bug] Cannot proceed because system tables used by Event Scheduler were found damaged at server start
本地:mac 10.12.3 mysql 5.6 远程:linux 7.3 mysql 5.7.18. (远程数据库yum安装,又5.6升级到5.7) 步骤:从本地数据库导出数据到远程数据库 ...
- Java多线程中线程间的通信
一.使用while方式来实现线程之间的通信 package com.ietree.multithread.sync; import java.util.ArrayList; import java.u ...
- shell中的Mysql查询
1 #!/bin/bash 2 #查询 3 echo -e 4 for i in `cat id.txt` 5 do 6 A=`mysql -h10 -uw -p2012 -Ne "sel ...