实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新、扩展,现在把碰到的知识点归纳于此,方便翻阅

一、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笔记(适合初级前端攻城狮)的更多相关文章

  1. 前端攻城狮学习笔记九:让你彻底弄清offset

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  2. Android攻城狮学习笔记-进阶篇一

    点击快速抵达: 第1章 AndroidManifest配置文件 第2章 使用ListView显示信息列表 第3章 使用DatePicker及TimePicker显示当前日期和时间 第4章 使用Grid ...

  3. Android攻城狮学习笔记—入门篇三

    第十章 CheckBox 与其他控件类似 有自己的监听方法 实现监听 并定义被选中或取消后的操作 第十一章 RadioGroup和RadioButton RadioGroup是RadioButton的 ...

  4. Android攻城狮学习笔记—入门篇二

    第七章  跑马灯 activity_main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  5. Android攻城狮学习笔记—入门篇一

    第一章 搭建Android开发环境 1.1 环境组成 JDK(Java Development Kit) Eclipse Android SDK(Software Development Kit) A ...

  6. Head First HTML与CSS阅读笔记(二)

    上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  9. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. javascript中for in与in的用法

    1.For...In 声明用于对数组或者对象的属性进行循环/迭代操作. 对于数组 ,迭代出来的是数组元 素,对于对象 ,迭代出来的是对象的属性: var x var mycars = new Arra ...

  2. java使用poi.3.10读取excel 2003 (xls格式)

    最近在做一个Excel导入数据库的案例,整理文档出来供大家参考. 1.下载 最新的 poi http://poi.apache.org/download.html    2.解压 把相关jar包引进项 ...

  3. node.js异步编程解决方案之Promise用法

    node.js异步编程解决方案之Promise var dbBase = require('../db/db_base'); var school_info_db = require('../db/s ...

  4. .net生成cookie,读取cookie,创建特性

    1.登录或注册成功时生成票据和cookie 注释:__JZY_Common_User_Login_Cookie__:就是为了判断当前登录人(例如:管理员和普通用户,可以定义两个常量,可有可无) 2.读 ...

  5. Sql server 0x80131904

    这是一个比较让人纠结的错误. 背景:添加了网站的分支,要拿一个现有的数据库做一个新的数据库的东东. 首先就是还原备份,然后做代码的修改.然而在登录的时候报了这个错误.0x80131904 什么插入的列 ...

  6. css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...

  7. 五款app原型设计工具对比

    五款app原型设计工具对比 Proto.io, Pixate, Origami, Framer & Form 本文由Panblack 翻译,原文作者 Tes Mat 我用五款“高保真”原型设计 ...

  8. 03_Jsoup

    [1.获取一个页面所有的链接] public static void main(String[] args) throws IOException { String url="http:// ...

  9. Eclipse 各版本名称的由来

    2001年11月7日 ,Eclipse 1.0发布 半年之后,2002年6月27日Eclipse进入了2.0时代.2.0时代的Eclipse经历了2.0和2.1两个大的版本.其中2.0在 之后又推出了 ...

  10. ubuntu下go开发环境

    https://qiita.com/necomeshi/items/676ccb669d6e6102117b 安装 https://golang.org/dl/ # 下载&解压 axel -n ...