网页制作

css中的计算函数calc在网站布局中一个示例

calc在css 中是一个函数,用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局,提供了方便。示例的显示的效果... 查看详情
收藏 0 赞 0 分享

控制Flex子元素在主轴上的比例的方法

背景flex布局更有效的实现对齐,空间分配。最近又学习下flex子元素的尺寸计算规则,主要是flex-grow, flex-shrink的计算规则的学习。一、基本概念1.1 主轴(Main axis)定义了flex元素布局起始点和方向,flex子元素在主轴上依次放置。主轴有4个方... 查看详情
收藏 0 赞 0 分享

CSS 外边距(margin)重叠及防止方法

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况:1、水平... 查看详情
收藏 0 赞 0 分享

CSS3 毛玻璃效果

毛玻璃效果做的好能使页面显得非常生动立体。直接上图body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 15... 查看详情
收藏 0 赞 0 分享

六大布局之FrameLayout的使用

前言上一期我们给大家讲解了LinearLayout,这一期我们为大家讲解一下FrameLayout(帧布局)的使用,相较于其他布局,FrameLayout可以说的上是最简单的一个,并且其使用范围相对来说也相对较小,但是也是Android中的六大布局之一,面试的时候还是会碰到的,所... 查看详情
收藏 0 赞 0 分享

CSS实现照片堆叠效果的实例代码

实现效果 步骤1.初始index.html为了建立第一张照片,也就是最上面的那张。我们只需要添加一个div,里面包含照片的img。就这么多,剩下的效果都是通过CSS来实现的。确保div的class为stackone。<!DOCTYPE html><ht... 查看详情
收藏 0 赞 0 分享

CSS Reset 样式重置的实现示例

前言:所有浏览器都有附带的默认样式,这些样式应用在每一个页面,叫做“用户代理样式表”。(如下需要梯子)Chromium UA stylesheet -Google Chrome & OperaMozilla UA stylesheet - fire... 查看详情
收藏 0 赞 0 分享

移动端适配 使px自动转换rem

先安装postcss-pxtorem: npm install postcss-pxtorem --save-dev 进行安装 通过屏幕的变化,设置动态根元素 font-size : 我写在vue的html中function setRem () { ... 查看详情
收藏 0 赞 0 分享

详解flex和position兼容采坑笔记

今天有空写了一个自己主页的网站,浏览器兼容(主要ie 9以上和chrome),有一个以前的问题也是很常见的问题,既然遇见了,索性就记录下来。直接看问题吧<!DOCTYPE html><html><head><meta charset=&q... 查看详情
收藏 0 赞 0 分享

详解css粘性定位position:sticky问题采坑

前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px);positio... 查看详情
收藏 0 赞 0 分享

css设置Overflow实现隐藏滚动条的同时又可以滚动

css设置Overflow实现隐藏滚动条的同时又可以滚动,具体代码如下所示:.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; ... 查看详情
收藏 0 赞 0 分享

css画一个棒棒糖的实例代码

背景:每天进步一点点,多积累一点点.就会越来越棒代码:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title&... 查看详情
收藏 0 赞 0 分享

css如何实现n宫格布局的方法示例

常见应用场景现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"... 查看详情
收藏 0 赞 0 分享

CSS3 animation – steps 函数详解

这几天在看一些 css3 动画的源码实现时,发现 css 代码的 animation 当中有一个比较陌生的单词 steps ,在源码中是这么写的:animation: thunder 2s steps(1, end) infinite;查阅相关资料后发现 steps 函数是 an... 查看详情
收藏 0 赞 0 分享

纯css实现输入框placeholder动效及输入校验

更多精彩内容请关注 https://github.com/abc-club/free-resources背景话不多说,我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类及html5 input patt... 查看详情
收藏 0 赞 0 分享

CSS自适应布局实现子元素项目整体居中,内部项目左对齐

日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下:有如下代码:<div class="wrap&q... 查看详情
收藏 0 赞 0 分享

你必须要知道关于响应式布局的几件事

一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。想阅读更多优质文章请猛戳GitHub博客二、视口移动前端中常说的 view... 查看详情
收藏 0 赞 0 分享

使用CSS混合模式和SVG来动态更改产品图片的颜色

前两天在Codepen看到了@Kyle Wetton写的一个示例, 使用CSS混合模式和SVG来改变沙发的颜色 。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用,比如说一些美妆的应用中,就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果?如果是,那么请继续... 查看详情
收藏 0 赞 0 分享

css新手教程之背景图充满整个屏幕

想让整个界面有一个背景图片,自然想到的是在body上加background,代码如下:body { width:100%; height: 100%; /* 加载背景图 */ background: url("../static/images... 查看详情
收藏 0 赞 0 分享

用CSS防Lightbox实现点击小图无刷新显示大图代码

用CSS防Lightbox实现点击小图无刷新显示大图代码代码简介:CSS的“Lightbox”是一个人见人爱的图片显示技术,她可以实现点击小图无刷新显示大图的功能。Discuz论坛就有这种功能,不过好像它还用有JS,这一款没有用到JS,完全用纯CSS实现,... 查看详情
收藏 0 赞 0 分享