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

番茄西红柿发布于2019-04-23 13:35 / 3316人阅读

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

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

一、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文件上的，所以请见谅没标明转载，以后碰到了会注明的

GPU云服务器云服务器攻城狮怎么挑选适合自己的云服务器阿里云的哪个服务器适合自己 html5前端css3

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

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

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

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

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

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

spacewander 2019-08-29 13:50 评论0 收藏0
微信小游戏的前端攻城狮玩法

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

habren 2019-08-22 17:12 评论0 收藏0