网页制作

CSS使用calc()获取当前可视屏幕高度的实现

先了解一下CSS3的相对长度单位(参考详细教程) :相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览... 查看详情
收藏 0 赞 0 分享

CSS中引用svg图片支持动态切换颜色的实现代码

当我们添加一张svg图片显示时,react提示找不到文件。我们可以在全局文件global.d.ts内,添加图片类型的声明:详见《TypeScript 引用资源文件后提示找不到的错误处理方案》声明之后,引用不报错了。然后我们看看svg图片,里面有颜色及其它设置:<?xml v... 查看详情
收藏 0 赞 0 分享

css高度随宽度比例变化的几种实现方法

【方案一:padding实现】原理:一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bot... 查看详情
收藏 0 赞 0 分享

CSS中@用法小结(示例详解)

at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。常规规则常规规则遵循下面的语法:代码如下:@[KEYWORD] (RU... 查看详情
收藏 0 赞 0 分享

纯CSS3实现鼠标滑过按钮动画第二节

有了之前的两章,小伙伴们对按钮悬浮动画是否又有了新的认识呢?前面两章主要是从背景着手,而本章主要是围绕边框动画做效果。并且,本章节(按钮组:有趣的CSS按钮动画,带你进入CSS世界)也就到此结束了,本章结尾会对前3小节进行一定的总结。下面继续本小节的主题,请先看一下效果示例:看过... 查看详情
收藏 0 赞 0 分享

纯CSS实现自定义单选框和复选框功能

1 实现效果2 知识点讲解2.1 <label>标签在html中,<label>标签通常和<input>标签一起使用,<label>标签为input元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果,<label... 查看详情
收藏 0 赞 0 分享

纯CSS实现iOS风格打开关闭选择框功能

1 效果演示地址: https://www.albertyy.com/2020/7/check2.html 另一篇文章:https://www.jb51.net/css/735639.html2 知识点2.1 <label>标签在html中,<... 查看详情
收藏 0 赞 0 分享

纯Css实现Div高度根据自适应宽度(百分比)调整

在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。然而,用的最多的标签一哥Div却不能做到自动调整(要么从父级继承,要么自行指定px,要么给百分比!但是这个百分比是根据... 查看详情
收藏 0 赞 0 分享

使用css写带纹理渐变背景图的示例代码

项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了。这次我们主要用到的网站是Hero Patterns——免费在线纹理素材库这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透... 查看详情
收藏 0 赞 0 分享

解决flex布局space-between最后一行左对齐的方法

首先看代码和效果↓<style> .main { outline: 1px solid; display: flex; justify-content: space-betwee... 查看详情
收藏 0 赞 0 分享

flex布局实现无缝滚动的示例代码

本文主要介绍了flex布局实现无缝滚动的示例代码,分享给大家,具体如下:案例的演示flex布局所谓flex布局就是弹性盒布局,这种布局在移动端比较常用,但随着浏览器的版本更新,flex布局因为自身的优点,日渐常用。思路: 首先分析这个小demo的结构,上下结构,我们可以用一... 查看详情
收藏 0 赞 0 分享

CSS 伪类修改input选中样式的示例代码

注:该表引自W3School教程伪元素的分类及作用:下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示:主要是用到了after伪类和字体符号。input{ -webkit-appearance: none; -moz-appearance: n... 查看详情
收藏 0 赞 0 分享

CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。 使用好了,可以在很多实际场景得以运用。我们先来看个例子,本例子是我在闲逛 Codepen 时看到了,很有意思:本例子,CodePen:  https://codepen.io/mikegolus/pen/... 查看详情
收藏 0 赞 0 分享

flex布局换行空白间隙之align-content的使用

一、本文实现的效果图如下:布局右侧使用flex布局,超过3个则换行。父元素代码如下:.nav-right{ width: 75%; padding: 10px; display: flex; /* 默认是水平的 */ flex-direction: row;/*设置子元... 查看详情
收藏 0 赞 0 分享

flex布局实现上下固定中间滑动的布局方式

本文主要介绍了flex布局实现上下固定中间滑动的布局方式,分享给大家,具体如下:例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。简单介绍一下如何实现固定头部和尾部,中间部分可滑动,使用flex布局1.设置html,body高度为100%2.设置最外层div的... 查看详情
收藏 0 赞 0 分享

css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素,给自己留个笔记,也分享给大家,具体如下:例子一:<!DOCTYPE html><html lang="en"><head> <meta charset="... 查看详情
收藏 0 赞 0 分享

CSS字体、文本、列表属性详细介绍

1.字体属性  color,规定文本的颜色,如 div{color:red;}  font-style,规定文本显示方式,如 p.normal {font-style: normal;} ,有normal(正常显示)、italic(斜体显示,字体结构有一定变化)、oblique(... 查看详情
收藏 0 赞 0 分享

深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。一、可能都知道的首先,讲两点大家可能都知道的知识点:1.background-blend-mode 本身就带有隔离特性,也就是一个元素应用 background-blend-mode 背景混合模式,... 查看详情
收藏 0 赞 0 分享

CSS中的四种定位区别详解

 我们都知道,前端开发里面的CSS中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别,在使用的时候都很不灵活,要知道,想做好网页布局,这4个定位方式都是精髓呀,学好定位布局,前端开发轻轻松... 查看详情
收藏 0 赞 0 分享

解决移动端1px边框最好的方法(推荐)

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2... 查看详情
收藏 0 赞 0 分享