文章库ARTICLE COLUMN

  • CSS常见布局与居中

    CSS常见布局与居中

    摘要:常用于控制页面布局的定位机制普通流相对定位绝对定位和固定定位。左右布局最常用的就是通过浮动左浮或右浮来实现浮动。可以通过设置左右的外边距为值来居中包括图片。 这里,就CSS左右布局,左中右布局,水平与垂直居中,进行讨论。 CSS常用于控制页...

    AprilApril 评论0 收藏0
  • 【芝士整理】CSS基础图谱

    【芝士整理】CSS基础图谱

    摘要:为了实现文字环绕效果,规范规定的措施是使父容器塌陷,元素脱离文档流浮动产生,元素周围的内容转换为围绕元素排列。 选择器注意点 属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符...

    iOS122iOS122 评论0 收藏0
  • 手对手的教你用canvas画一个简单的海报

    手对手的教你用canvas画一个简单的海报

    摘要:啦啦啦,首先说下需求,产品想让用户在我们内,分享一张图片到微信等平台。图片中包含用户的姓名头像和带着自己信息的二维码。然后,如何生成这张海报呢首先我们老大告诉我有一个插件叫其作用就是可以将节点转化成图片,是个不错的东西。 啦啦啦,首先...

    cyixlqcyixlq 评论0 收藏0
  • 理解跨域及常用解决方案

    理解跨域及常用解决方案

    摘要:跨域的产生不用多讲,作为一名前端开发人员,相信大家都知道跨域是因为浏览器的同源策略所导致的。浏览器引入同源策略主要是为了防止,攻击。其指明了实际请求所允许使用的方法。 跨域,相信大家无论是在工作中还是在面试中经常遇到这个问题,常常在网...

    wemallshopwemallshop 评论0 收藏0
  • 移动端用下拉刷新的方式实现上拉加载

    移动端用下拉刷新的方式实现上拉加载

    摘要:样式最外面的盒子设置中间盒子不设置高度,靠子盒子撑起。 实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样? html结构 这里我...

    cod7cecod7ce 评论0 收藏0
  • 一个图片偶尔加载不出来的事故

    一个图片偶尔加载不出来的事故

    摘要:事故详情这周我做了一个显示图片的功能,出现一个,偶尔图片无法显示,只剩一个白框框。总结如果你也遇到图片偶尔加载不出来的问题而看到我这满篇的废话,我对此深感抱歉和误解。 事故详情这周我做了一个显示图片的功能,出现一个bug,偶尔图片无法显...

    bigdevil_sbigdevil_s 评论0 收藏0
  • 前端每日实战:164# 视频演示如何用原生 JS 创作一个数独训练小游戏(内含 4 个视频)

    前端每日实战:164# 视频演示如何用原生 JS 创作一个数独训练小游戏(内含 4 个视频)

    摘要:第部分第部分第部分第部分源代码下载每日前端实战系列的全部源代码请从下载代码解读解数独的一项基本功是能迅速判断一行一列或一个九宫格中缺少哪几个数字,本项目就是一个训练判断九宫格中缺少哪个数字的小游戏。 showImg("https://segmentfault.com/...

    OBKoro1OBKoro1 评论0 收藏0
  • HTML实现2列布局,左侧宽度固定,右侧自适应

    HTML实现2列布局,左侧宽度固定,右侧自适应

    摘要:实现列布局,左侧宽度固定,右侧自适应实现一根据定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流可以与右边块元素并列利用浮动利用绝对定位块级元素,默认自动填充父元素宽度,霸占一行当前右侧块元素宽度父元素宽度设置为左侧块元素的宽度。...

    JochenJochen 评论0 收藏0
  • Vertical-Align: 你应该知道的事情

    Vertical-Align: 你应该知道的事情

    摘要:引言说起大家都知道他是用在对相邻的文字和内联元素上,比如常见的将一个图标和相邻的文字居中对齐。每个内联元素也有其自己的基线,顶线和底线。内联元素的基线位置低于行框的基线。内联元素的基线相对于行框基线移动相应于行高百分比的数值。 平时遇...

    yachengyacheng 评论0 收藏0
  • 相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)等用法

    相邻兄弟选择器(+)、子选择器(>)、兄弟选择器(~)等用法

    摘要:前言我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录选择器中常见的选择器相邻兄弟选择器子选择器兄弟选择器的用法。 前言:我们在码代码的时候,经常会遇到...

    DrinkeyDrinkey 评论0 收藏0
  • 移动端适配方案

    移动端适配方案

    摘要:业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似,分为移动端页面和端页面,端页面同样有着左右的留白,这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。 移动端适配方案 移动端适配方案是一个老生常谈的话题,但是对于不...

    feng409feng409 评论0 收藏0
  • 前端每日实战:148# 视频演示如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效

    前端每日实战:148# 视频演示如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效

    摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器是一个无序列表,列表项代表按钮居中显示去掉列表项前面的符号设置按钮的文字样式用伪元素在按钮的左侧增加一个方块用伪元素在按钮的右侧增加一条下划线接下来设置鼠标悬停效果。 sh...

    beanlambeanlam 评论0 收藏0
  • python大佬养成计划----CSS样式类练习

    python大佬养成计划----CSS样式类练习

    摘要:导航栏拥有易用的导航条对于任何网站都很重要。通过,您能够把乏味的菜单转换为漂亮的导航栏。导航栏需要标准的作为基础。导航栏基本上是一个链接列表,因此使用和元素是非常合适的制作水平导航栏有两种创建水平导航栏的方法。 导航栏 拥有易用的导航...

    cnswordercnsworder 评论0 收藏0
  • 关于scroll,client,innear,avail,offset等的理解

    关于scroll,client,innear,avail,offset等的理解

    摘要:在写实例理解,,,及等的时候,意外的又发现了值合并的问题,在这里同时记录下偏移量的区别文件自己写的示例样式较多见的属性指可见区的宽度网页,或者元素指可见区的高度网页,或者元素指元素的宽度网页,或者元素指元素的高度网页,或者元素滚动条的...

    neuneu 评论0 收藏0
  • [译]HTML&CSS Lesson7: 设置背景和渐变色

    [译]HTML&CSS Lesson7: 设置背景和渐变色

    摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设...

    TonnyTonny 评论0 收藏0
  • 手写react优惠券组件

    手写react优惠券组件

    摘要:表示从圆心开始范围内都是红色表示距离圆心的位置为,然后向两边扩散,直到里面的红色区域,和向外地方的区域表示从开始往外都是。组件代码折扣卷折折折扣卷张有效时间参考链接 先看效果图 showImg("https://segmentfault.com/img/bVbhGFm?w=1328&h=52...

    learn_shifenglearn_shifeng 评论0 收藏0
  • 从html,css,javascript三方面谈谈“浏览器兼容性”的问题

    从html,css,javascript三方面谈谈“浏览器兼容性”的问题

    摘要:可以理解为,在屏幕上通过浏览器窗口所能看到网页内容的高度。都表示浏览器中网页内容的高度,但稍有区别。解决等浏览器不支持标签的问题高版本的浏览器用了低版本的浏览器无法识别的元素,从而导致不能解析。这时候我们就会面临这个兼容性问题。 java...

    KaedeKaede 评论0 收藏0
  • CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    摘要:不耽误表单提交数据虽然我们无法看到的元素,但当表单提交时依然会将隐藏的元素的值提交上去。让元素在见面上不可视,但保留元素原来占有的位置。不过由于各浏览器实现效果均有出入,因此一般不会使用这个值。继承父元素的值。 前言  还记得面试时被...

    selfimprselfimpr 评论0 收藏0
  • 垂直方向margin重叠原因与解决方法

    垂直方向margin重叠原因与解决方法

    摘要:我们经常写样式的时候会遇到垂直方向重叠的问题,如下代码可以看出由于,应该显示但是只显示,是什么原因呢这就涉及到什么是,解释为块级格式化上下文一个元素要创建,则满足下列的任意一个或多个条件即可的值不是。 我们经常写样式的时候会遇到垂直方...

    moven_jmoven_j 评论0 收藏0
  • CSS 盒子模型及 float 和 position

    CSS 盒子模型及 float 和 position

    摘要:内联元素设置无效。内联元素的和属性,水平方向有效,竖直方向不会产生边距效果。和都是通过改变文档流来实现定位。有三种定位机制文档流浮动和绝对定位。元素框正常生成,元素顺序显示,在一个文档流中,一个挨着一个,内容遵守正常从上到下的流。 CS...

    付永刚付永刚 评论0 收藏0
  • Sublime Text3 配置less保存自动编译

    Sublime Text3 配置less保存自动编译

    摘要:配置保存自动编译环境下需要安装,语法高亮插件,通过在终端全局安装到这里,已经可以通过手动编译文件了,在终端通过手动编译如果需要在中保存文件时自动编译成,还需要下面的步骤需要安装,把编译为的插件到此处,按照官方的,或 Sublime Text3 配置...

    hedge_hoghedge_hog 评论0 收藏0
  • 使用 rem 设计网页

    使用 rem 设计网页

    摘要:使用伪类选择元素是顶层节点,就是我们需要设置的根元素。使用媒体选择器使用媒体选择器适配不同平台,可让你的网页看起来是响应式的。 rem 是根 em (root em)的缩写。rem 是和根元素关联的,不依赖当前元素。例如,不管你在文档什么地方使用这个单位...

    MoAirMoAir 评论0 收藏0
  • 伪元素的margin值挤压主体元素解决

    伪元素的margin值挤压主体元素解决

    摘要:伪元素的值挤压主体元素解决主体是两个标签,需要再其左侧添加一个竖线,很常见的需求目标前提条件右侧的文字个数不固定问题需要让元素为文字个数不固定时,整个元素的宽度是,根据文字的内容来算,此时使用伪元素时,如果伪元素占据的宽度过大,会导致...

    tulayangtulayang 评论0 收藏0
  • 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画

    前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画

    摘要:可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,只有个元素居中显示定义容器尺寸用伪元素画出个像宝路薄荷糖状的黑色圆环接下来制作动画效果。 showImg("https:/...

    avwuavwu 评论0 收藏0
  • 一篇文章搞定前端面试

    一篇文章搞定前端面试

    摘要:客户端发送包到服务器,并进入状态,等待服务器确认。再进一步接收到客户端的就进入状态。通常情况下连接就是连接,因此连接一旦建立通讯双方开始互发数据进行通信,直到其中一方或双方断开连接为止。统一资源定位符。 本文旨在用最通俗的语言讲述最枯...

    AirmusicAirmusic 评论0 收藏0

热门文章

<