css
wayne丶
不忘初心
展开
-
css 多列布局
记载几种常见的 多列布局方案 ,比较基础 不做解释 看不懂的可以参考文档属性定宽+自适应html结构 左侧定宽右侧自适应消除默认padding,margin并且给左右p标签设置眼色以便区分 <div class="parent"> <div class="left"> <p>left</p> </di...原创 2019-12-06 14:26:08 · 368 阅读 · 0 评论 -
css 水平居中,垂直居中,居中整合。
记载的都是比较基础的 css常见属性。child在不固定长宽的情况 分享几种不同居中。html就公用一种结构,<div class="parent"> <div class="child"> wayne </div></div>水平居中1.text-align: center +disp...原创 2019-12-06 10:22:06 · 182 阅读 · 0 评论 -
自用reset
清除和重置是紧密不可分的/* Reset理念:清除和重置是紧密不可分的维护:wayne(2557551314@qq.com)*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list ...原创 2019-11-26 10:08:41 · 251 阅读 · 0 评论 -
移动端1px边框
1px问题产生的原因从移动端的角度说个具体的场景,以iphone6为例。iphone6的屏幕宽度为375px,设计师做的视觉稿一般是750px,也就是2x,这个时候设计师在视觉稿上画了1px的边框,于是你就写了“border-width:1px”,so…1px边框问题产生了。对设计师来说它的1px是相对于750px的(物理像素),对你来说你的1px是相对于375px的(css像素)“实...原创 2019-04-27 10:41:03 · 197 阅读 · 1 评论 -
使用 CSS 解决 @2x 和@3x 图片问题
移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:使用css通过@media 判断像素比去切换不同照片如下 再通过css预处理器封装为一个公用方法 方便使用使用 CSS 的 devicePixelRatio 媒查询属性/*默认大小*/.photo {width:100px;height:100px;}.photo {background-...原创 2019-04-27 16:00:05 · 8152 阅读 · 0 评论 -
css3 实现3D立方体的两种方法
1,使用positon +rotate <style> .box{ width: 200px; height: 200px; padding: 50px; margin: 100px auto; perspective: 800; ...原创 2019-05-20 13:47:16 · 2534 阅读 · 0 评论 -
多边形实现圆环效果
c's's实现效果图 更直观的可以看图2主要思路 利用多边形的特性 吧图片裁成等份的效果 用css属性实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...原创 2019-05-21 17:47:05 · 396 阅读 · 0 评论 -
让单行文本以及多行文本溢出显示省略号(…)
1,单行省略当我们在编写网页代码的时候,肯定会遇到过文字列表中的文字太多超出了我们所写的宽度,导致文本换行或者文本超出了界限,我们在做响应式的时候由于是百分比布局,无法计算一行会显示多少个文字,所以这并不是一个好的解决方案,我们使用css3就可以轻松的实现,而且简单好用。核心css语句:overflow:hidden; (顾名思义超出限定的宽度就隐藏内容) white-space: ...原创 2019-05-29 11:31:34 · 791 阅读 · 0 评论