页面重构技巧
爱编程的兔子
很帅
展开
-
纯CSS如何实现移动堆叠卡片行
1 必要CSS基础1.1 CSS伪类:not():匹配不符合选择器的元素:first-child:选择一组兄弟元素中的第一个子元素:last-child选择一组兄弟元素中的最后一个子元素:hover:鼠标悬浮在元素上方:focus-within:匹配元素自身或者其某个后代匹配:focus伪类1.2 CSS属性transform:对当前元素进行旋转、平移、倾斜及缩放操作,具体请自行查看文档。transition:为当前元素在不同状态之间切换设置过渡效果,具体请自行查看文档。translat原创 2020-05-12 16:09:04 · 2111 阅读 · 0 评论 -
radial-gradient()的前世今生
1、radial-gradient() 原理CSS radial-gradient()函数创建一个由原点(渐变中心)辐射开的颜色渐变的图片,边缘形状只能为为circle或者ellipse,其结果属于<gradient>数据类型,是一种特别的<image>数据类型。 径向渐变(radial-gradient)由其中心点、边缘形状轮廓及位置、色值的结束点(color-...原创 2018-05-10 14:37:42 · 6508 阅读 · 0 评论 -
纯CSS实现糖果按钮
废话不多说,直接上代码:原创 2018-05-10 14:49:47 · 888 阅读 · 0 评论 -
width/height新视界
众所周知,width height是用来指定元素的宽度和高度的,可能我们平时用到具体的<length> 和<percentage> 比较多,那他们还有其他的值吗?如果我们根据内容的宽度来决定元素的宽度(随着内容自适应)该如何做呢?我们以最小或者最大的元素内的内容的宽度或者高度来决定元素的宽高该如何实现呢?CSS3给我们提供了好方法,具体是什么方法呢?值wid...原创 2018-05-11 14:57:01 · 919 阅读 · 0 评论 -
CSS实现多重边框
想到多重边框,我们可能会通过多个元素来模拟实现,但是如何在一个元素上实现多重边框呢?如下图: 1、box-shadow我们可以通过box-shadow来实现。 box-shadow: h-shadow v-shadow blur spread color inset | outset; 分别是:水平阴影位置 垂直阴影位置 模糊距离 扩张半径 颜色 内部阴影或者外部阴影 实现多重边框...原创 2018-05-07 14:59:07 · 3214 阅读 · 0 评论 -
CSS3 calc()是怎么实现计算
css3的calc()函数允许我们在属性值中执行数学计算操作。例如,我们可以使用calc()指定一个元素宽度的固定像素值为多个数值的和。calc(表达式) - 表达式支持加、减、乘、除运算,同时也支持单位的混合使用(%、px、rem、em等); - 表达式中有”+”、”-“运算符的,前后必须要有空格,这个是向前兼容,后期可能会带入变量等有”-“连字符; - 虽然“*”“/”没有空格...转载 2018-05-07 16:32:52 · 8357 阅读 · 1 评论 -
如何实现边框内圆角
实现效果如下: 对于上述效果,我们可以用两个嵌套的div实现,如下:<div class="test-wrap"> <div></div></div>div{ width: 180px; height: 100px;}.test-wrap{ background: red; padding:...原创 2018-05-08 10:53:48 · 3008 阅读 · 0 评论 -
利用纯CSS实现条纹背景
原理: 如果多个色标具有相同的位置,他们会产生一个无限小的过渡区域,从效果上看,颜色会从这个位置突然变化,而不是一个平滑的过程。 linear-gradient() 函数用于创建一个表示两种或者多种颜色线性渐变的图片。其结果属于&amp;amp;lt;gradient&amp;amp;gt;数据类型,是一种特别的&amp;amp;lt;image&amp;amp;gt;数据类型,因此我们可以通过background-size来控制渐变的大原创 2018-05-08 18:05:44 · 8268 阅读 · 1 评论 -
box-shadow学习笔记整理
box-shadow不用多说,大家都知道是给元素设置阴影的,但是使用过程中有很多有意思的技巧。定义box-shadow是以逗号分隔列表来描述一个或者多个阴影效果。同时如果设置了border-radius,阴影同样对圆角生效。如果同时设置了多个阴影,那么第一个在最上面,以此类推。初始值:none适用于所有元素,包括伪类继承性:无语法box-shadow:inset...原创 2018-05-15 16:10:03 · 314 阅读 · 0 评论 -
CSS中clip-path属性
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状。例如:circle()等。 clip-path已经代替了现在已经弃用的剪切clip属性。初始值:none使用元素:所有元素,在SVG中,适用于不包括defs元素和所有图形元素的容器元素继承性:否语...原创 2018-05-15 18:56:19 · 1482 阅读 · 0 评论 -
清除Chrome浏览器下默认浅黄色背景(保存密码时出现)
当某个登录的页面我们保存密码之后,后面登录账户名和密码会自动填充,我们可以观察到,Chrome浏览器自动加了一层淡黄色的背景,如下图: 那么我们改如何清除默认的样式呢?首先我们看到它默认的代码如下: 看到这个,是不是马上想到如下代码:input:-webkit-autofill{ background:#fff!important; //这里可以是你想要的任何颜色}...原创 2018-07-11 17:29:22 · 2346 阅读 · 0 评论 -
CSS之mask实现方法汇总
在前端中,我们经常要实现遮罩层,来弱化后面的一切整体,从而突出显示某些特定的元素,比如我们的弹窗,那么mask(遮罩层)有多少种方法可以实现呢?&lt;body&gt; &lt;div class="mask"&gt;&lt;/div&gt; &lt;div class="dialog"&原创 2018-08-02 14:48:23 · 5800 阅读 · 0 评论 -
CSS中的斑马条纹
表格中的斑马条纹表格中的斑马条纹很容易实现 你可以使用nth-child来实现:tr:nth-child(even){ background: #E9E9E9;}也可以使用nth-of-type来实现:tr:nth-of-type(even){ background: #E9E9E9;}文本中的斑马条纹那么我们如何实现一段文本行中的斑马条纹效果呢?...原创 2018-08-03 14:44:22 · 4093 阅读 · 0 评论 -
DIV+CSS有哪些经典布局
DIV+CSS经典布局总结:1 圣杯布局定义:圣杯布局就是常见的三栏式布局——两边等宽,中间⾃适应的三栏布局。实现方式:设置三栏子元素浮动同向(如 float: left; );父元素设置左右栏宽度的padding(如 padding: 0 200px; );中间自适应宽度设置为width:100%;;设置左边元素margin-left:-100%;,右边元素margin-left...原创 2019-06-10 19:39:46 · 6157 阅读 · 0 评论 -
利用linear-gradient来实现信封边框效果
还是利用渐变来实现的,我们废话不多说,直接上代码:width: 200px;height: 80px;border-color: transparent;background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0,red 12.5%,tra...原创 2018-05-09 17:57:18 · 1495 阅读 · 0 评论 -
CSS之伪随机背景
前面文章中有说到渐变实现条形背景,如下:div{ width: 600px; height: 200px;}.grad-03{ background: linear-gradient(90deg,orange 15%,yellowgreen 0,yellowgreen 40%,brown 0, brown 65%,transparent 0),pink; ...原创 2018-05-09 17:22:27 · 995 阅读 · 0 评论 -
input中文字的垂直居中
我们一般设置文字垂直居中用line-height属性,但是在Chrome浏览器中使用line-height时input中的文字还是没有居中,针对这一问题,解决办法如下:input{ width: 100%; height: 0.4rem; padding: 0.1rem; line-height: normal; box-sizing: border-box;原创 2016-07-20 10:33:04 · 3787 阅读 · 0 评论 -
CSS写箭头
原理:当宽度和高度都为0时,整个大小就是由border撑起来的,也就是说每个边组成了一个三角形,当你变换三角形的颜色时,就会得到不同的的箭头甚至其他的图像<a class="select-box" href="#"></a>.select-box{ position: relative; display: block; width: 200px; height: 40原创 2016-07-20 11:19:31 · 345 阅读 · 0 评论 -
单选框重写
<div class="icon-radio"> <input class="r1" type="radio" name="" id="input-radio" value="" /> <label for="input-radio">单选框</label></div>.icon-radio{ display: inline-block;}.icon-radio .r1原创 2016-07-20 16:23:02 · 349 阅读 · 0 评论 -
复选框
<div class="icon-check"> <input class="c1" type="checkbox" name="" id="input-check" value="" /> <label for="input-check">复选框</label></div>.icon-che原创 2016-07-20 16:24:34 · 309 阅读 · 0 评论 -
开关按钮
<div class="switch-btn"> <input type="checkbox" class="c1" /> <div class="switch-inner"> <div class="btn"> <span class="active">ON</span> <span class="inactive">原创 2016-07-20 17:19:01 · 541 阅读 · 0 评论 -
table-layout属性
用来显示表格单元格、行、列的算法规则。 table-layout有三个属性值:auto、fixed、inherit。 auto:默认,自动表格布局,列宽度由单元格中没有折行的最宽的内容设定。此算法有时比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。 fixed:固定表格布局,水平布局仅仅取决于表格宽度、列宽度、表格边框宽度、单元格间距、而与单元格的内容无关。与自动表格布局相比,原创 2016-07-21 15:03:13 · 5588 阅读 · 0 评论 -
移动端滚动条的问题之一
问题描述:当移动端写滚动效果时,会多出一部分,而且移动端和PC端的大小不一样,问题如下图圈出红色部分: PC端: Android: iOS 原因:多出的红色部分其实是滚动条的宽度,咱们直接上代码看:.sq-combination-tit{ width: 100%; overflow: hidden; overflow-x: auto; -webkit-原创 2017-01-13 11:10:00 · 6370 阅读 · 0 评论 -
刻度尺效果
废话不多说,我们直接上代码<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/><meta name="format-detectio原创 2017-04-05 18:38:54 · 3317 阅读 · 0 评论 -
移动端的三种输入方式
移动端的三种输入方式:我们知道的有input和textareainputinput有很多形式的输入,输入的字段可以是文本字段、复选框、掩码后的文本控件、单选按钮等,但是只能输入一行。 例如:<input type="text" palceholder="请输入您的姓名" / >textareatextarea是文本域标签,定义多行文本,但是必须要固定高度,无法实现随着文本内容自动增加高度。 那么原创 2017-04-24 19:20:39 · 2186 阅读 · 0 评论 -
关于input不同type值的样式重置
所有type通用样式:.input-wrap input{ display: block; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 30px;}1、type=”button/submit原创 2017-05-26 20:00:22 · 8810 阅读 · 1 评论 -
marquee及纯CSS走马灯效果
marquee:创建滚动的字幕,可用于文字、图片、表格等。属性: 属性名 属性作用 值 behavior 表现滚动的方式,默认值为scroll alternate:来回滚动; scroll:单方向循环滚动;slide:只滚动一次。 direction 滚动的方向,默认值left left / right / down /up loop 决定滚动文字的滚动次数原创 2017-06-01 15:46:21 · 9159 阅读 · 0 评论 -
a标签href值解析
<a> 标签的href属性规定链接的目标。href属性的值可以是任何有效文档的相对或绝对的URL,包括片段标识符和JavaScript代码段。如果用户选择了<a>标签中的内容,那么浏览器会尝试检索并显示href属性指定的URL所表示的文档,或者执行JavaScript表达式、方法和函数的列表。 值 描述 URL 超链接的URL。可能的值:绝对的URL——指向另一个站点。例:href=”转载 2017-06-12 14:27:39 · 4683 阅读 · 0 评论 -
利用渐变实现多种几何图案
把多个渐变叠加起来会发生什么事呢?div{ width: 200px; height: 200px; border-radius: 100%; border: 8px solid rgba(255,255,255,0.6); background-clip: border-box;}例1background: #fff;backgroun...原创 2018-05-09 15:09:08 · 956 阅读 · 0 评论 -
设置div水平垂直居中
效果:设置div水平垂直居中,随着页面的大小变动,当页面的宽度或者高度减小到小于div的宽度或者高度,div始终居中,并且减掉两边的内容1、水平居中left: 50%;margin-left: -1.87px;(这里的大小是元素宽度大小的一半)2、垂直居中top: 50%;margin-top: -1.87px;(这里的大小是元素高度大小的一半)3、垂直水平居中top:50%;left:50%原创 2016-07-18 13:53:52 · 394 阅读 · 0 评论