资讯专栏INFORMATION COLUMN

自己平时收集的css、html笔记(适合初级前端攻城狮)

番茄西红柿 / 3230人阅读

摘要:实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些以后会持续更新扩展,现在把碰到的知识点归纳于此,方便翻阅一部分取消自动识别数字为拨打号码移动开发响应式布局二部分字母强制大写解决中滑动速度慢或者卡的问题防止复制,兼

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

一、html部分

  1.取消iPhone自动识别数字为拨打号码

    

  2.移动开发、响应式布局

    

二、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>11111111111label>
div>

  以上有些是复制别人博客的内容,具体是哪些大神,由于我是直接复制到我的txt文件上的,所以请见谅没标明转载,以后碰到了会注明的

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2065.html

相关文章

  • 回顾自己三次失败面试经历

    摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...

    DC_er 评论0 收藏0
  • 回顾自己三次失败面试经历

    摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...

    Hwg 评论0 收藏0
  • 回顾自己三次失败面试经历

    摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...

    spacewander 评论0 收藏0
  • 微信小游戏前端城狮玩法

    摘要:转自自己在开源中国上的博客前言公司群里经常有人会发一些微信小游戏,每次下面都会跟好多晒分截图。因为前端攻城狮有前端攻城狮的玩法。取消断点继续游戏。这时在手机微信里访问游戏的链接,在端里就可以看到手机发出的请求。 转自自己在开源中国上的博客:https://my.oschina.net/u/7247... 前言 公司群里经常有人会发一些微信小游戏,每次下面都会跟好多晒分截图。比如这个《看...

    habren 评论0 收藏0
  • Android研发进阶之路

    摘要:市面上也多是谈论知识图谱,缺少体系和成长节奏感,特此编写一份研发进阶之路,希望能对大家有所帮助。中级而到达中级就需要付出一些努力了,需要了解更多知识,可以仿照开源库去造轮子练习。能够熟练掌握开源库的使用,如图片库网络库工具等。前言 移动研发火热不停,越来越多人开始学习android开发。但很多人感觉入门容易成长很难,对未来比较迷茫,不知道自己技能该怎么提升,到达下一阶段需要补充哪些内容。市...

    idisfkj 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<