自己平时收集的css、html笔记(适合初级前端攻城狮)
实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新、扩展,现在把碰到的知识点归纳于此,方便翻阅
一、html部分
1.取消iPhone自动识别数字为拨打号码
<meta name = "format-detection" content = "telephone=no">
2.移动开发、响应式布局
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes"/>
二、css部分
1.字母强制大写
text-transform: uppercase;
2.解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
-webkit-overflow-scrolling: touch;
3.防止复制,兼容主流浏览器
-moz-user-select : none;
-webkit-user-select: none;
4.固定背景图片
background-attachment: fixed;
5.去除iphone input默认样式
input {
-webkit-appearance:none;
}
-webkit-appearance 可用于渲染input风格,多用于移动端,有兼容性问题,请自行百度
6.设置表格的边框合并为一个单一的边框
border-collapse:collapse;
7.添加(显示)IOS下滚动条
.box::-webkit-scrollbar{
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.box::-webkit-scrollbar-thumb{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
8.文字超出部分省略号隐藏
.box{
width: 200px;
/** 单行显示隐藏 **/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/** 多行显示隐藏 **/
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
9.设置表格布局(我都不知道为什么我的笔记.txt里面会有这个...)
table{
table-layout:fixed;
}
10.如果想鼠标移动上去时显示被隐藏的文本内容,可以设置
.box:hover {
text-overflow:inherit;
overflow:visible;
}
11.css实现选中checkbox,文字内容颜色变化
<style>
.tgl-light + .tgl-btn {
background: #f0f0f0;
border-radius: 2em;
padding: 2px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.tgl-light + .tgl-btn:after {
border-radius: 50%;
background: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.tgl-light:checked + .tgl-btn {
background: #9FD6AE;
}
</style>
<div class='tg-list-item'>
<input class='tgl tgl-light' id='cb1' type='checkbox'>
<label class='tgl-btn' for='cb1'>11111111111</label>
</div>
以上有些是复制别人博客的内容,具体是哪些大神,由于我是直接复制到我的txt文件上的,所以请见谅没标明转载,以后碰到了会注明的
自己平时收集的css、html笔记(适合初级前端攻城狮)的更多相关文章
- 前端攻城狮学习笔记九:让你彻底弄清offset
很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...
- Android攻城狮学习笔记-进阶篇一
点击快速抵达: 第1章 AndroidManifest配置文件 第2章 使用ListView显示信息列表 第3章 使用DatePicker及TimePicker显示当前日期和时间 第4章 使用Grid ...
- Android攻城狮学习笔记—入门篇三
第十章 CheckBox 与其他控件类似 有自己的监听方法 实现监听 并定义被选中或取消后的操作 第十一章 RadioGroup和RadioButton RadioGroup是RadioButton的 ...
- Android攻城狮学习笔记—入门篇二
第七章 跑马灯 activity_main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...
- Android攻城狮学习笔记—入门篇一
第一章 搭建Android开发环境 1.1 环境组成 JDK(Java Development Kit) Eclipse Android SDK(Software Development Kit) A ...
- Head First HTML与CSS阅读笔记(二)
上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- ASP.NET MVC 生命周期
本文的目的旨在详细描述ASP.NET MVC请求从开始到结束的每一个过程.我希望能理解在浏览器输入URL并敲击回车来请求一个ASP.NET MVC网站的页面之后发生的任何事情. 为什么需要关心这些?有 ...
- sublime开启vi编辑器功能,与vi常用快捷键
sublime开启vi编辑器 install package -> vintageES 设置里面 ignored_packages 里面的vintage去掉 VI命令 游标控制 h 游标向左移 ...
- 软件项目技术点(2)——Canvas之坐标系转换
AxeSlide软件项目梳理 canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...
- 开发Windows RT平台下的Windows应用商店应用程序的遇到的问题备忘
1. 关于获取Win8开发者许可证的问题: 有一种情况是:如果系统是Win8.0, 那么如果先激活了windows8(用激活工具), 再安装VS2012,那么在新建项目时会提示获取windows8开发 ...
- angularJS 单页面 两个及以上个 ng-app 的处理方式
<div ng-app="myApp1" ng-controller="myCtrl1"> 名: <input type="text ...
- matlab练习程序(多线段交点)
很简单的算法,这里是把每对线段都进行比较了. 还有一种似乎先通过x和y排序再进行交点判断的,不过那种方法我还没看太明白. 这里的方法如下: 1.根据线段的端点求两条直线的交点. 2.判断直线的交点是否 ...
- asyncio标准库2 Hello Clock
如何调度协程,并发运行 asyncio.gather方法可以聚合协程or future def gather(*coros_or_futures, loop=None, return_exceptio ...
- 网络防火墙之iptables的前世今生和归宿
任何事物都有一个从无到有,再归于无的过程.是的,我这里用了一个绝对词:任何. 防火墙 在计算机领域中,防火墙(英文:Firewall)是一项协助确保信息安全的设备,会依照特定的规则,允许或是限制传输的 ...
- nginx中的location匹配规则
概述: 1. location在nginx配置文件中的作用是根据用户请求的URI来执行不同的应用. 2.URI的定义:标识.定位任何资源的字符串 协议://域名/目录a/目录b/文件c http:// ...
- QQ空间那年今日 & 人人过往的今天
都说天下文章一大抄!就看你会抄不会抄! 过往的今天这个功能很新颖,不过最后还是被企鹅抄走了~该出手时就出手! 自从过往的今天功能低调上线后,断断续续总是有人提到这个功能,有褒有贬: 顶的认为人人让自己 ...