首页 CSS

CSS 第5页

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

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

    一、前言 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。想阅读更多优质文章请猛戳GitHub博客 二、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异,电脑端的视口宽度等于分辨率,而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的...

    CSS 2020-03-27 11 0
  • 使用CSS混合模式和SVG来动态更改产品图片的颜色

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

    前两天在Codepen看到了@Kyle Wetton写的一个示例, 使用CSS混合模式和SVG来改变沙发的颜色 。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用,比如说一些美妆的应用中,就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果?如果是,那么请继续往下阅读。 使用CSS混合模式和SVG来改变沙发颜色案例 下面这个Demo是来自于Codepen上@Kyle Wetton写的一个效果: 尝试着改为颜色,你会看到不同的沙发颜色: 是不是很有意思。 其实在实际场景中也有类似的一...

    CSS 2020-03-27 11 0
  • 用CSS防Lightbox实现点击小图无刷新显示大图代码

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

    用CSS防Lightbox实现点击小图无刷新显示大图代码 代码简介: CSS的“Lightbox”是一个人见人爱的图片显示技术,她可以实现点击小图无刷新显示大图的功能。Discuz论坛就有这种功能,不过好像它还用有JS,这一款没有用到JS,完全用纯CSS实现,而且用起来非常方便。注意,图片的边框和大小这个根据你的网页布局自己设置一下,这里只是演示一下,不一定正好适合你的网页。 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD...

    CSS 2020-03-27 10 0
  • CSS loading效果之 吃豆人的实现

    CSS loading效果之 吃豆人的实现

    emmm 名字瞎想的2333 前言 这是一个用来练习的css demo,如果有哪里写的不好,还请各位指正,一定虚心接受。嘻嘻 HTML布局 <div class="container"> <div class="loading"> <div class="eat"></div> <div class="load"><...

    CSS 2020-03-27 11 0
  • css如何实现n宫格布局的方法示例

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

    常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在"功能导航"页面 无边框, 常用在首页分类 设计目标 在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": @include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形 @include grid(2, 5, false, fals...

    CSS 2020-03-27 13 0
  • CSS实现宽高等比自适应容器的方法

    CSS实现宽高等比自适应容器的方法

    在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半。 于是我们就需要实现一个 宽度自适应,高度为宽度一半的容器 。 这里先以高度为宽度一半为例,也可以是其他任意比例 。 一、思考如何实现 这个问题类似于:我们在移动端页面,上面有一张宽度 100% 的图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放。 我们可以借助这个想法,根据元素高度,来为元素设置一个相应比例的高度即可。 二、实现方法1 - 通过 vw 视口单位实现 所谓 视口单位 (...

    CSS 2020-03-27 11 0
  • CSS 样式的使用方式、选择器

    CSS 样式的使用方式、选择器

    在html中使用css的三种方式: 1、行内样式:同过元素的style属性来设置 <p style="font-size:20px; color:red">hello</p> 属性之间分号隔开。 2、内部样式:在<head>的<style>元素中定义css样式 <style> p{font-size: 20px;color: red} </style> 3、外部样式:在...

    CSS 2020-03-27 12 0
  • 详解flex和position兼容采坑笔记

    详解flex和position兼容采坑笔记

    今天有空写了一个自己主页的网站,浏览器兼容(主要ie 9以上和chrome),有一个以前的问题也是很常见的问题,既然遇见了,索性就记录下来。直接看问题吧 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <div class="aaa&...

    CSS 2020-03-27 14 0
  • css中的计算函数calc在网站布局中一个示例

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

    calc在css 中是一个函数,用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局,提供了方便。 示例的显示的效果 使用cacl 布局的一个示例 想做个一个效果, 就是在 #div1 的背景,延伸到 #div2 可见区域,在 #div2 显示固定60个像素。就是黑色框宽度是60px。而不用考虑 #div1 的宽度。 css代码...

    CSS 2020-03-27 10 0
  • 控制Flex子元素在主轴上的比例的方法

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

    背景 flex布局更有效的实现对齐,空间分配。最近又学习下flex子元素的尺寸计算规则,主要是flex-grow, flex-shrink的计算规则的学习。 一、基本概念 1.1 主轴(Main axis) 定义了flex元素布局起始点和方向,flex子元素在主轴上依次放置。 主轴有4个方向,通过flex-direction指定: row 水平方向,从左到右,默认的 row-reverse 水平方向,从右到左 column 垂直方向,从上到下...

    CSS 2020-03-27 11 0
  • CSS 外边距(margin)重叠及防止方法

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

    两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例外情况: 1、水平边距永远不会重合。 2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下: a、全部都为正值,取最大者; b、不全是正值,则都取绝对值,然后用正值减去最大值; c、没有正值,...

    CSS 2020-03-27 9 0
  • CSS3 毛玻璃效果

    CSS3 毛玻璃效果

    毛玻璃效果做的好能使页面显得非常生动立体。直接上图 body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 serif; background: url("iphone.jpg") fixed 0 center; background-size: cover...

    CSS 2020-03-27 12 0
  • 六大布局之FrameLayout的使用

    六大布局之FrameLayout的使用

    前言 上一期我们给大家讲解了LinearLayout,这一期我们为大家讲解一下FrameLayout(帧布局)的使用,相较于其他布局,FrameLayout可以说的上是最简单的一个,并且其使用范围相对来说也相对较小,但是也是Android中的六大布局之一,面试的时候还是会碰到的,所以让我们赶紧开始学习吧~ 简介 在FrameLayout中,这个布局直接在屏幕上开辟出一块空白的区域,所有添加到这个布局中的视图都是以层叠的方式显示,而它会把这些试图默认放到这块区域的左上角,第一个添加到布局中视图显示在最底层,最后...

    CSS 2020-03-27 16 0
  • CSS实现照片堆叠效果的实例代码

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

    实现效果 步骤 1.初始index.html 为了建立第一张照片,也就是最上面的那张。我们只需要添加一个div,里面包含照片的img。就这么多,剩下的效果都是通过CSS来实现的。确保div的class为stackone。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi...

    CSS 2020-03-27 9 0
  • 移动端适配 使px自动转换rem

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

    先安装postcss-pxtorem: npm install postcss-pxtorem --save-dev 进行安装 通过屏幕的变化,设置动态根元素 font-size : 我写在vue的html中 function setRem () { let htmlWidth = document.documentElement.clientWidth ||document.body.clientWidth; //检测html的屏幕宽度和body的屏幕...

    CSS 2020-03-27 12 0