文章库ARTICLE COLUMN

  • 移动端两端对齐 + 图片宽度自适应

    移动端两端对齐 + 图片宽度自适应

    摘要:自适应四宫格有这样一张设计稿,左右两边白色间距为,中间间距为,每一行的两张图是等宽的即平分去掉间距后的宽度有一种方法是和设计师商量,把所有的具体尺寸改为百分比尺寸。。 自适应四宫格 有这样一张设计稿,左右两边白色间距为4px,中间间距为10...

    JerryCJerryC 评论0 收藏0
  • flexbox 伸缩布局

    flexbox 伸缩布局

    摘要:同时定义了伸缩容器的主轴和侧轴。伸缩项目向一行的中间位置靠齐。伸缩项目会平均地分布在行里。伸缩项目的外边距盒在该行的侧轴上居中放置。默认值伸缩项目拉伸填充整个伸缩容器。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。 flexbox 研究 ...

    darcranddarcrand 评论0 收藏0
  • 快速判断浏览器是否支持特定css、js功能

    快速判断浏览器是否支持特定css、js功能

    摘要:,通过进行浏览器功能检测通过可以判断某一功能是否能够被当前浏览器支持,是一个可以插入到你的网页里面的文件,通过调用内部的函数可以完成对当前浏览器的某一功能的检验。我们已经可以通过来判断某一功能能否被当前浏览器所支持。 作为html5开发人...

    jokesterjokester 评论0 收藏0
  • 用vue和node写的简易购物车

    用vue和node写的简易购物车

    摘要:配置完成后运行和命令。另一张表存储的是用户和商品。连接数据库初始化查询商品列表和购物车。商品列表和购物车数据是直出,减少页面请求。 【新增vue中使用pug模板】 在webpack.config.js引入pug的loader,就可以在vue中使用pug模板。 module: { ...

    QiShareQiShare 评论0 收藏0
  • 巧用css实现无js的tab切换

    巧用css实现无js的tab切换

    摘要:切换一直是页面之中主要的结构,最近在写的项目,想到可不可以不用和做控制,实现纯和的切换。页面交换的原理无非是利用标签的属性在显示与否之间的切换。再之后利用的的选择器就可以关联上要切换的页面了。这里直接利用了绝对定位的方法。 tab切换一...

    DevTTLDevTTL 评论0 收藏0
  • 使用CSS clip 属性实现音频播放圆环进度条

    使用CSS clip 属性实现音频播放圆环进度条

    摘要:突然有需求要做一个圆环的音频播放进度条上图效果,自己琢磨尝试了半天,也没有实现。然后结合让这个半圆旋转,就实现了内的进度条,当超过时,取消对的剪裁,再使用一个半圆来保存的进条,就实现一个的进度条效果。 showImg("https://segmentfault.co...

    klivitamJklivitamJ 评论0 收藏0
  • 前端小白的全栈初体验

    前端小白的全栈初体验

    摘要:原文来源全栈初体验前言据说现在不会点后台的前端都找不到工作了吓得我这几天看起了和并且做了一个应该算是最简单的前后端例子,如图输入账户密码,提交表单,保存信息到数据库再重定向到页面获取数据库中的信息,渲染在浏览器上具体代码主要技术前端模...

    wangymwangym 评论0 收藏0
  • CSS的居中方式

    CSS的居中方式

    摘要:这样一来外部容器正好可以将内容垂直的包裹住并且由于外部容器是浮动的所以容器的宽度和内层的宽度一致这样可以做到完全自适应的实现居中。 刚学习CSS的时候尝试过几种居中的方法,这些方法不需要借助JS手段,所写的方法有一个原则,就是在不需要直接人...

    lushanlushan 评论0 收藏0
  • 用纯CSS 自定义radio checkbox 样式

    用纯CSS 自定义radio checkbox 样式

    摘要:以前做自定义样式的的时候,一直是如下结构文字然后定义的样式作为新再用做关联。知道今天才知道可以用标签的属性做,纯真是太不应该了,学东西还是要认真细致点。单选项示例如下效果示例作者 以前做自定义样式的radio, checkbox 的时候,一直是如下结...

    lolomacololomaco 评论0 收藏0
  • 【CSS】超出两行显示省略号

    【CSS】超出两行显示省略号

    摘要:看到了个问题,问题地址目前没想到怎样不用行高解决问题,但是想到了之前工作中遇到的文本超出两行显示省略号,所以从之前的代码里翻出代码段记录下来,便于之后使用。 看到了个问题,问题地址:https://segmentfault.com/q/10...目前没想到怎样不用行...

    cartooncartoon 评论0 收藏0
  • 有关响应式布局

    有关响应式布局

    摘要:范围为使用媒体查询对指定视图宽度范围的页面进行渲染例如 (持续更新中......) 设置meta 标签 注: width 和height 指令分别指定视区的逻辑宽度和高度,单位是以像素为单位的数字或特殊标记符号(如device-width); initial-scale 指页面初始缩...

    KavenFanKavenFan 评论0 收藏0
  • 重温"什么是响应式网页设计?响应式布局的实现原理"

    重温"什么是响应式网页设计?响应式布局的实现原理"

    摘要:概念响应式网页设计最初是由提出的一个概念为什么一定要为每个用户群各自打造一套设计和开发方案设计应该做到根据不同设备环境自动响应及调整。预计到年,移动互联网的数据流量将超越端的流量。 概念 响应式网页设计最初是由 Ethan Marcotte 提出的一...

    NekronNekron 评论0 收藏0
  • 快速构建一个使用axios的vue应用程序

    快速构建一个使用axios的vue应用程序

    摘要:要在我们的应用程序中显示模拟数据,可以在元素中写入指令用于渲染我们的列表。虽然这超出了本教程的范围,但建议用于更大或更复杂的应用程序。 这篇文章讲述了如何快速构建一个vue程序,并使用axios从远程获取数据。这是原文章的直通门 通常情况下,...

    williamwilliam 评论0 收藏0
  • border详解

    border详解

    border属性指定了盒的border区的width,color和style。这些属性适用于所有元素 border-width与百分比 border-width不支持百分比:不符合语义,边框不会因设备大小而变化 border-width默认是medium:3px,因为border-style:double至少3px才有效果 了解各种border...

    curriedcurried 评论0 收藏0
  • 盒模型(Box model)

    盒模型(Box model)

    摘要:盒模型描述了一个为文档树中的元素生成的并根据可视化格式模型进行布局的矩形框盒模型和盒模型在计算总宽度中存在一些差异在模型中和是指的宽度和高度在盒模型中和包含和以及的宽度和高度在中引入了属性它可以允许改变默认的盒模型对元素宽高的计算方式...

    gecko23gecko23 评论0 收藏0
  • 解剖CSS布局原理

    解剖CSS布局原理

    摘要:前言本文将带你重新认识布局,带你解剖布局原理,前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流,这是其他元素做不到的。 前言 本文将带你重新认识CSS布局,带你解剖布局原理,前提是你要...

    李文鹏李文鹏 评论0 收藏0
  • Object.defineProperty小记

    Object.defineProperty小记

    摘要:为属性时才能被删除,才能更改属性,否则会报错。决定这个对象是否可以通过遍历到该属性。必须是设置为时的设置才能生效。相当于把方法执行了一次使用构造函数主要是限定自定义的和方法适用范围,例如上面的代码,就把这两个方法限定在下。 作用 可以...

    kviccnkviccn 评论0 收藏0
  • padding详解

    padding详解

    padding属性指定了盒的padding区的宽度。"padding"简写属性一次性设置四周的padding,而其它padding属性只设置它们各侧的 padding与元素的尺寸 padding与block和inline元素尺寸 最后一个例子是用padding实现高度可控的分隔线 padding与百分比值 padding百分...

    tomenertomener 评论0 收藏0
  • 第三次直播总结,兼谈技术教学

    第三次直播总结,兼谈技术教学

    摘要:前几天完成了第三场直播永恒不变的主题布局,,,这里总结一下。因为第二场直播比第一场多了十个人,差不多,让我以为自己取得了不小的进步,甚至上一次总结的时候还信心满满。但是第三场,前后只有不到个人加了进来。 前几天完成了第三场直播:《Web ...

    WrBugWrBug 评论0 收藏0
  • CSS代码重构与优化之路

    CSS代码重构与优化之路

    摘要:代码重构的目的我们写代码时,不仅仅只是完成页面设计的效果,还应该让代码易于管理,维护。命名与备注命名是提高代码可读性的第一步,也是及其重要的一步。 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及...

    fou7fou7 评论0 收藏0
  • JQuery干货篇之插入元素

    JQuery干货篇之插入元素

    摘要:在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。当需要移走一个元素,不久又将该元素插入时,这种方法很有用。实例从中移除集合中匹配元素的所有子节点。 JQuery干货篇之插入元素 本次使用的html,css还是我上一篇的源代码,详...

    jemygrawjemygraw 评论0 收藏0
  • 页面架构HTML+CSS ヾ(o◕∀◕)ノ 常用居中&多列布局

    页面架构HTML+CSS ヾ(o◕∀◕)ノ 常用居中&多列布局

    CSS Reset 1.作用 (1)清除浏览器默认样式(2)全局样式定义 2.特别注意 (1)项目开发初期就定义好(2)reset.css 在引入的时候一定要放在第一位(3)不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 ...

    NervosNetworkNervosNetwork 评论0 收藏0
  • 移动端1px线的实现

    移动端1px线的实现

    摘要:那么如何在移动端展示时分割线的高度小于呢常用方案通常的做法如下兼容问题定义完这个样式,在手机上看看,幸运的你可能会看到想要的效果已经展示了,然而这个存在兼容性问题,有的手机上线条没有展示,有的手机上会出现滑动屏幕时线条时有时无。 起因...

    jaysunjaysun 评论0 收藏0
  • WebUploader上传插件使用说明

    WebUploader上传插件使用说明

    摘要:否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后,文件就会加入文件队列,并触发事件上传进度回调事件,在文件上传中,多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述 ...

    xbynetxbynet 评论0 收藏0
  • 360前端星计划学习-HTML + CSS

    360前端星计划学习-HTML + CSS

    摘要:设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时,会生成匿名块级盒来包含行级盒。 浏览器 浏览...

    lpjustdoitlpjustdoit 评论0 收藏0

热门文章

<