随笔分类 - css
摘要：废话不多说，直接上干货。本文主要解决如何通过媒体查询适配所有iphone刘海屏。 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阅读全文
摘要：display:flex + justify-content: space-between 能够实现2端对齐的布局，这种布局在网页中很常见。不过这种布局方式有一个问题。举个例子，我们假设现在一排放4个图片，而我们数据库里面总共只有6张，此时布局结果如下： 第二排数量少于4张，2端对齐就出现上图这种局
阅读全文
摘要：我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部，就写如下代码： 我们现在可能通过css实现这一功能了，只需要添加一句样式即可： 兼容情况可以点击这里查看。 scroll-behavior的使用你就记住这么一句话—— 凡是需要滚动的地方都加一句scroll-behavior:smoo
阅读全文
摘要：对于Web开发者来说，网页布局一直是个比较重要的问题。 Web 布局主要经历了以下四个阶段： 1、table表格布局； 2、float浮动及position定位布局； 3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 “排列方向”、“对齐方式”，“自适应尺寸”。是目前最为成熟和
阅读全文
摘要：上一篇有讲到如何在浏览器端实现打印功能。后面发现有个问题，就是表格表头有背景颜色，但是实际打印出来无背景颜色。网上的方法主要有以下几种实现方式： 1.把背景颜色写成行内样式，如下图所示： 但是发现这样子写了，并不行。可能还需要设置其他的，如果有知道的亲，望不吝赐教~ 2.在打印的时候用户自己设置，如
阅读全文
摘要：列表左右的无缝滚动在网页中是一个很常见的效果了。但是为了给使用者一个更好的体验感受，我们会需要做到如下效果： 就是左右两边会有种半透明的效果。今天我们就来说一下如何实现它。 1.写静态页面，大致的页面布局如下: 2.写 CSS: 要实现左右半透明的效果就是通过伪类 + 渐变来实现的。 渐变的兼容性不
阅读全文
摘要：@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：1. 不可
阅读全文
摘要：我们在提交数据的时候，在开始提交数据与数据提交成功之间会有一段时间间隔，为了有更好的用户体验，我们可以在这个时间段添加一个那处点点点的动画，如下图所示： 汇总了一下实现这种效果主要有三种方法： 第一种：box-shadow + animate; 第二种：animate; 第三种：等宽字体 + ani
阅读全文
摘要：先看下面的效果图： 难点： 里面内容不确定，不能定高的同时要让左右两个div的高度保持一致。 解决方案： 利用 display:table 和 display:table-cell。因为display:table之后对margin不敏感，所以如果要调整两者之间的间距，需要用到border-spaci
阅读全文
摘要：做网站的时候，有时候会遇到某些字体系统里面没有自带。可能更多的时候我们会选择以图替文的方式来做。用图片的话不利于图片的放大缩小，更好的办法是我们可以自定义字体。 当然，在实际运用中我们需要权衡一下自定义字体的利弊。自定义字体的话，我们需要引入多种格式，如下图： 所以，如果自定义字体的话必然会增加网页
阅读全文
摘要：在网页中插件表格时，就算你有时定义了宽度，默认的也会根据里面内容的来自动拉伸。有时候自动拉伸是好，但是如果你表格里面的内容太长，表格就会拉伸的特别难看。 像下面的表格，正常的显示应该如下： 但是如果里面的数据太长的话，就会错位成下面这个样子： 我们如何保证抽奖时间固定宽度，让它显示一行，后面的奖品也
阅读全文
摘要：原文链接：https://isux.tencent.com/summary-of-100-dialog-design.html 弹框在网页中是属于非常常见的一种元素了。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。那么
阅读全文
摘要：本文过于陈旧，不建议阅读！请查阅网上其他更新的内容！！ 关于一些Retina，设备像素，移动适配的知识，网上一搜也是一大把，但是基本的东西并没有变化太多。下面就我看过的一些有关于这方面的知识做一些总结（仅以个人的角度出发，所以有不全的地方还请大家谅解）。后面会有不定期的更新~每个知识点我都会在开关写
阅读全文
摘要：我们在使用iframe的时候，iframe的高度并不会根据内容的多少来改变它的高度，如何让它根据内容来改变它的高度呢？在网上也找了好多代码，觉得下面这段代码是最有效的： html的源代码如下，index.html是你要引用的页面： Save Save
阅读全文
摘要：1.利用display:table-cell，具体代码如下： html代码如下： css代码如下： 效果如下： 2.采用背景法： html代码如下： css代码如下： 效果如下图： 3.图片外面用个p标签，通过设置line-height使图片垂直居中： html代码如下： css代码如下： 效果图如
阅读全文
摘要：项目需要做到全屏显示的同时还需要做到实时执行动画。但是发现在使用fullpage之后，wow.js（不知道这个是啥的点击这里）不起作用。 找了诸多资料，解决方法如下： 主要起作用的代码是要把scrollBar设置为true,并且把动画事件放在afterRender里面。
阅读全文
摘要：直接上干货: 需要的材料: change_select.js (文末会给出下载地址) 使用方法: 1.调用方法:<script type="text/javascript" > $(function(){ $("select").selectCss(); })</script> *使用时必须引用jq
阅读全文
摘要：css3现在越来越普及了。给我们前端人员也带来了极大的便利。以前要实现让溢出的内容显示省略号还得通过js实现，现在完全可以用css代替之。主要的代码如下： 显示不出用省略号显示不出用省略号显示不出用省略号显示不出用省略号显示效果如下：这个属性并须要与overflow:hidden;white-spa...
阅读全文
摘要：虽然框架不利于网站优化，但在类似于业务系统的后台中使用的还比较频繁。起初在写的时候，框架的高度与宽度的兼容着实让我很头疼。经过多方面查找资料，及通过自己的实践，特总结以下控制框架宽度与高度的方法。 主要是通过以下js控制框架的高度与宽度： <script type="text/javascript"
阅读全文
摘要：今天做网站时发现给添加border无效。起初还以为tr不支持这个属性，百度，原来只要给添加一句代码就可以了，代码如下：table{border-collapse: collapse;}border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显...
阅读全文
