随笔分类 - CSS
摘要：网站重构： 在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。 也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。 对于传统的网站来说重构通常是： 表格(table)布局改为div+css 使网站前端兼容于现代浏览器(针对于不合规范的css、如对I
阅读全文
posted @ 2020-07-16 22:37
前端一点红
摘要：小小的字体其实有大大的学问，可能与字体相关的很多知识都偏设计，不过俗话说技多不压身，艺高人胆大，多了解了解总归没错。 字体的分类 就 Web 常用的一些字体而言，经常听说的字体类型，大致可以分为这几种： serif(衬线) sans-serif(无衬线) monospace(等宽) fantasy(
阅读全文
posted @ 2020-07-16 22:36
前端一点红
摘要：一. 字体属性：(font) 1. 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 2. 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 3. 行高
阅读全文
posted @ 2020-07-16 22:31
前端一点红
摘要：写css时发现，图片加起来刚好是900px的多张图片，不能在一个900px宽容器放下，因为图片之间有间隔，我猜是浏览器把两个img标签之间的空格当成了空白节点。 在网上整理了一些解决多个img标签存在间隙的方法。 1、多个img标签写在一行 <img src="/i/eg_tulip.jpg" he
阅读全文
posted @ 2020-07-16 22:29
前端一点红
摘要：瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲下multi-column相关的部分属性 column-count设置列数 co
阅读全文
posted @ 2020-07-16 21:52
前端一点红
摘要：一般遮罩 background : #000； 在body标签的最后加上div标签作为遮罩，如下： <div class="mask"></div> 其css样式： .mask{ position:fixed; top : 0; left : 0; bottom : 0; right : 0; ba
阅读全文
posted @ 2020-07-16 21:41
前端一点红
摘要：在项目的实际开发中，我们总会遇到前后端分离的项目，在这样的项目中，跨域是第一个要解决的问题，除此之外，保存用户信息也是很重要的，然而，在后台保存用户信息通常使用的session和cookie结合的方法，而在前端的实际情况中，跨域产生的ajax是无法携带cookie信息的，这样导致了session和c
阅读全文
posted @ 2020-07-16 21:22
前端一点红
摘要：前言 随着 Web 的发展，用户对于 Web 的实时推送要求也越来越高 ，比如，工业运行监控、Web 在线通讯、即时报价系统、在线游戏等，都需要将后台发生的变化主动地、实时地传送到浏览器端，而不需要用户手动地刷新页面。本文对过去和现在流行的 Web 实时推送技术进行了比较与总结。 本文完整的源代码请
阅读全文
posted @ 2020-07-16 18:51
前端一点红
摘要：我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的，但存在的问题
阅读全文
posted @ 2020-07-16 18:48
前端一点红
摘要：作为个人开发者，为自己的辛苦开发的项目配上支付功能，才有盈利的盼头！但是目前大部分都需要企业资质，那对应个人而言如何在网站、应用中接入支付功能呢？这里找了一些不需要企业资质的第三方支付平台。 1、PayPal 个人，企业都可以接入，作为一款主打跨境支付的产品，主打境外收付款，那么对于做外贸的朋友来说
阅读全文
posted @ 2020-07-16 18:46
前端一点红
摘要：在html中一个table表单主要由tr、td、th元素组成,比较复杂一点的表单还会包含caption、 col、 colgroup、 thead、tfoot、 tbody等元素. 一、table内标签含义: <tr>:表格的行标签,有多少对<tr></tr>就有多少行.<td>:普通单元格标签,位
阅读全文
posted @ 2020-07-16 18:32
前端一点红
摘要：css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的 drop-shadow 代码如下： <style> .icon{ display: inline-block; widt
阅读全文
posted @ 2020-07-16 18:28
前端一点红
摘要：前几天，在写完一个功能模块上线测试的时候，出现了一个诡异的问题。input 框在输入查询内容之后，按回车键居然有两种不同的表现形式（input 框没有绑定键盘事件），谷歌和火狐功能正常，但IE在按了回车键以后居然自动调用方法。 页面结构：标签上没绑定任何键盘事件，控制器内也没有给元素绑定键盘事件。
阅读全文
posted @ 2020-07-16 18:27
前端一点红
摘要：The web has evolved. Finally, testing has too. 事实上对于 UI 自动化测试来说，许多所谓框架之间并没有太多差别，也从来不是影响整套测试用例是否健壮的关键性因素。相比之下，如何提高测试用例稳定性以及出现错误时 debug 的便捷性才是让 UI 自动化测试
阅读全文
posted @ 2020-07-16 18:21
前端一点红
摘要：css3 动画给 Web 的用户体验带来了巨大提升，本文将尝试从浏览器渲染的角度，来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。 60fps 与设备刷新率 目前大多数设备的屏幕刷新率为60fps（Frame per Second），即每秒60帧。因此，如果在页面中有一个动画或渐变效
阅读全文
posted @ 2020-07-16 18:18
前端一点红
摘要：不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快：使用css sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等。我曾经介绍过本站
阅读全文
posted @ 2020-07-16 18:16
前端一点红
摘要：css3非常强大，我们可以利用css3相关特性绘制很多平面图形，并且可以制作很多简单的动画。今天要分享的是一款用纯css3实现的可爱表情动画，一共有7组表情动画。 这些表情图实在太可爱了，哈哈CSS真的是太强大了 效果如下： pixabayhttps://www.wode007.com/sites/
阅读全文
posted @ 2020-07-16 18:15
前端一点红
摘要：什么是css sprites? css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量 css sprites优点： 1、减少网页的HTTP请求，提高页面性能2、图片命名上的困扰3、更
阅读全文
posted @ 2020-07-16 18:12
前端一点红
摘要：作为网页内容的一部分，图像和视频通常要消耗很多资源加载。要提高网页应用的性能，如何避免资源浪费在加载图像和视频上就很重要了。但是，很多时候我们都不愿意减少网页上的媒体资源，所以我们经常无从下手。幸运的是，我们有懒加载这个绝招，它可以帮助我们减少加载时间和降低负载，而不在内容上偷工减料。 什么是懒加载
阅读全文
posted @ 2020-07-16 18:11
前端一点红
摘要：Sass和Less这样的预处理器，让我们的css代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性，增强了动态编写css的能力，从而减少重复代码，也加快了我们开发速度。 近年来，一些动态特性开始作为规范的一部分，出现在css语言中。css变量(css variables)，或
阅读全文
posted @ 2020-07-16 18:04
前端一点红
浙公网安备 33010602011771号