CSS的特性(继承、层叠和优先级)
摘要:CSS的三大特性(继承、层叠和优先级) CSS的三大特性(继承、层叠和优先级) 1.css属性的继承 CSS中有些属性是可继承的,何为属性的继承? 一个元素如果没有设置某些属性的值,就会跟随(继承)父元素的属性值。当然,一个元素如果有设置自己的属性值,就会使用自己的。 比如color、font-si
阅读全文
css布局精髓
摘要:css精髓:这些布局你都学废了吗? 前言 最近忙里偷闲,给自己加油充电的时候,发现自己脑海中布局这块非常的凌乱混杂,于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来,在这里,分享给大家。 单列布局 单列布局是最常用的一种布局,一般是将一个元素作为容器,设置一个固定的宽度,水平居中对齐。 单
阅读全文
H5,JS国际化网站中英文切换
摘要:微软翻译 Microsoft Translator的示例和实用程序 https://www.microsoft.com/en-us/translator/blog/2019/06/27/the-translator-web-widget-will-be-retired-soon/ https://g
阅读全文
DIV右上角标签的CSS3实现技巧
摘要:CSS code: -- 双倍攒豆 <i><span class="aliPointView" style="background-color:orange;text-align:center;font-weight:bold;color:white"><p>双倍攒豆</p></span> <spa
阅读全文
CSS框架
摘要:原文出处:https://dzone.com/articles/how-to-speed-up-your-design-process-using-modern-c 现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来。
阅读全文
线性渐变
摘要:渐变 渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种。渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求,调试成本更低等。在平时,发挥自己的想象,利用渐变可以创造出许多奇妙的视觉特效。 一、线性渐变
阅读全文
浏览器输入www.baidu.com后干啥了-web性能优化指南
摘要:web性能优化指南 前端性能优化,是每个前端必备的技能,优化自己的代码,使自己的网址可以更加快速的访问打开,减少用户等待,今天就会从几个方面说起前端性能优化的方案, 看下面的一张图,经常会被面试官问,从输入URL到页面加载完成,发生了什么? 1.用户输入www.baidu.com2.浏览器通过DNS
阅读全文
CSS中盒子模型
摘要:深入了解CSS中盒子模型 CSS中盒子模型介绍# 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝、有填充物保护酒防止酒被摔坏、纸盒子。 我们怎么理解CSS中的盒子呢,CSS中盒子有什么组成的呢?有内容、内边距、边框、外边距。 CSS中盒子的主要属性有5种
阅读全文
UI书籍
摘要:[书籍]值得纪念的第100篇博客,推荐一些看过的UI书籍 1. 前言# 来到博客园11年,这两年闲下来了才有时间写写博客,不知不觉终于写到第100篇博客了。回顾过去发表的博客,居然大部分都与UI相关。明明我本来从事的是Oracle的相关开发,明明我当初的目标是成为Oracle DBA,明明我就很不想
阅读全文
css中单位px和em,rem的区别
摘要:css中单位px和em,rem的区别 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefo
阅读全文
CSS盒模型
摘要:中高级前端面试秘籍 引言 又是一年寒冬季,只身前往沿海工作,也是我第一次感受到沿海城市冬天的寒冷。刚过完金九银十,经过一场惨烈的江湖厮杀后,相信有很多小伙伴儿已经找到了自己心仪的工作,也有的正在找工作的途中。考虑到年后必定又是一场不可避免的厮杀,这里提前记录一下自己平时遇到和总结的一些知识点,自己巩
阅读全文
三栏布局
摘要:经典三栏布局之圣杯、双飞翼、弹性布局 经典三栏布局之圣杯、双飞翼、弹性布局 圣杯布局和双飞翼布局是前端工程师需要掌握的布局方式,两者功能相同,都是为了实现两侧宽度固定,中间宽度自适应的布局方式,此外,使用新增的flex布局,可以使布局更加简单。 双飞翼布局和圣杯布局虽然实现方式有所差异,但是基本上都
阅读全文
CSS 浮动和清除
摘要:CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰
阅读全文
静态页面
摘要:HTML5+CSS3静态页面项目-PayPaul的总结 学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少。师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛。于是决定在这个假期里,主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个H
阅读全文
UI表单
摘要:Monk.UI表单美化插件诞生记! 阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开
阅读全文
sass
摘要:css预处理器sass使用教程(多图预警) css预处理器赋予了css动态语言的特性,如变量、函数、运算、继承、嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目。css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可变。对于预处理器,广泛使用的有less和sass。在这不
阅读全文
Bootstrap
摘要:Bootstrap基础教程 Bootstrap——来自Twitter的流行前端框架 一:Bootstrap简介 Boostrap是一个非常受欢迎的前端开发框架,该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装,使开发人员可以
阅读全文
Bootstrap
摘要:Bootstrap 阅读目录 排版 表单 网格系统 菜单、按钮 做好笔记方便日后查阅o(╯□╰)o bootstrap简介: ☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 ☑ 基于html5、css3的bootstrap,具有大量的诱人特性:友好的学
阅读全文
css3绘制几何图形
摘要:用css3绘制你需要的几何图形 1、圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example1"></div> css: .size{ width:200px; height:
阅读全文
CSS hack方式
摘要:史上最全的CSS hack方式一览做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用...
阅读全文