-
水平垂直居中的六种方法
方法一: 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） 图片展示： 代码如下： div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-…- 592
- 0
-
css3有哪些新增属性？(回顾)
一、css3新增边框属性 1、css3新增属性之border-color：为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0000ff; } 这里说一下题外话，需要注意："border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 …- 602
- 0
-
2021年web前端面试集锦
一. HTML、CSS相关 html5新特性、语义化 语义化标签 ： header nav main article section aside footer 语义化意味着顾名思义，HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。 语义化的优点有: 代码结构清晰，易于阅读，利于开发和…- 1.1k
- 0
-
Web前端如何进行SEO结构优化
做前端的肯定离不开SEO，无论您是专职的SEOer还是其他什么别的，只要设计到前端就避不开SEO，前前后后做了几十个网站和个人博客网站建设的我，对与SEO仍然出于小白阶段，下面就介绍一下日常SEO注意的知识点： 一、合理的title、description、keywords 搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关…- 775
- 0
-
移动端常见问题解决方案
一、特殊样式 css3盒子模型 box-sizing:border-box; -webkit-box-sizing:border-boxx 清除点击高亮，设置transparent 完成透明 -webkit-tap-highlight-color:transparent; 取消ios里Button、Input上的默认样式 -webkit-appearance:none; 禁用长按页面时的弹出菜单 …- 935
- 0
-
20款CSS按钮鼠标HOVER效果展示
20款CSS Hover按钮样式特效，看看能否给你带来灵感，喜欢的可以自己尝试使用，或者直接修改他的代码，创作一个新的CSS HOVER样式出来。 扩展阅读《33个jQuery与CSS3实现的绚丽鼠标悬停效果》 Nanuk Antiman Nuka Nina Wapasha Saqui Aylen Moema Pipaluk Itzel Tamaya Wayra Ujarak Winona Shi…- 1k
- 0
-
-
CSS 最核心的几个概念
前言 本文将讲述 CSS 中最核心的几个概念，包括： 盒模型、position、float等。 这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。 元素类型 HTML 的元素可以分为两种： 块级元素（block level element） 内联元素（inline element 有的人也叫它行内元素） 两者的区别在于以下三点： 块级元素会独占一行（即无法与其他元素显示在…- 1.2k
- 0
-
20个编写现代CSS代码的建议
明白何谓Margin Collapse 不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; m…- 1.2k
- 0
-
15个国外最流行的CSS框架
摘要：CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。本文将介绍15个国外最流行的CSS框架，希望对您有所帮助。 CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。例如，typography.css是基本排版规、grid.css是基于网格的布局、layout.css通常的布局，…- 969
- 0
-
前端Js框架汇总
概述： 随着互联网飞速发展的时代，技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放，也是煞是羡慕。寻了寻.net的消息，也是振奋人心，.net core 1，mono，xamarin等等，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。 Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在…- 1.1k
- 0
-
伪元素的妙用–单标签之美
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 CSS2及CSS3伪类区分 CSS3伪元素单双冒号区分 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。 1 #…- 986
- 0
-
CSS基础：z-index详解
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。 IE6/7下position…- 1k
- 0
-
CSS实用技巧第一讲：文字处理
前言 作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 CSS实用技巧第一讲：文字处理 本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。 文本对齐方式 CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也…- 826
- 0
-
轻量级的CSS动画引擎——AniX
介绍 ANIX是一个轻量级且易于使用的动画库，在现代浏览器发挥优良的性能和良好的兼容性。它采用了原生的CSS属性的过渡，不是JS模拟动画，因此性能更好。并且可以使用硬件加速。ANIX不到3K的大小有多种版本的ANIX实现，UMD版本，jQuery的版本和React版本等... Github https://github.com/drawcall/AniX 简单使用 PS：可以先看demo标题进行预…- 988
- 0
-
前端开发，用 css3 做一个求婚小动画
首先放张效果图 然后一步步分析一下 首先是刚出现的新郎的动画 .w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both; } @keyframes toWoman{ 0%{ opacity: 0; transform: translate(-200px); } 1…- 1.1k
- 0
-
CSS实用技巧第二讲：布局处理
前言 在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会有其他相关知识点。 CSS实用技巧第二讲：布局处理 rem自适应布局 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下： /* 基于UI wid…- 677
- 0
-
解决华为手机用rem单位，内容超出屏幕宽度问题
前言： 在H5手机页面上，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！ 实例： 例如：设计稿是640px，用js计算出来的根节点font-size是100px（证明此时屏幕宽度是640px），那最外层的容器宽度就写成6.4rem（…- 1.3k
- 0
-
Gulp和Webpack对比
前言 在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且Webapp通常是一个单页面应…- 676
- 0
-
45个值得收藏的 CSS 形状
CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个…- 985
- 0
-
2019年Web前端行业发展的5个新趋势
IT行业发展迅速，瞬息万变，2019年前端行业又有哪些新趋势呢？ 1.新规范的更新与稳定 前端新标准和草案在不断更新，HTML、CSS、Javascript标准也在渐渐完善，尽管这些新的规范最终会淘汰旧的规范，新的项目也会以最新的标准作为开发依据，但要完全废弃旧规范，还需要一段时间。 目前前端三层结构实现已经形成了HTML5、CSS3、《Ecmascript 6》标准规范，后面的新变化也会越来越小…- 1.6k
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×