CSS
文章平均质量分 76
关于css的内容分享
新生代农民工官方认证码农小拽
实践是检验知识的唯一标准!
展开
-
[ flex ] -- 父盒子ul为flex布局时宽度不够,子盒子li无法被撑开的问题(li的宽度被压缩)
[ flex ] -- 父盒子ul为flex布局时宽度不够,子盒子li无法被撑开的问题(li的宽度被压缩)原创 2022-09-14 17:52:35 · 2640 阅读 · 0 评论 -
三角形的制作html+css
css画一个三角形,更简单写法原创 2020-04-18 01:15:58 · 237 阅读 · 0 评论 -
记录一下css文本文字渐变色
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2022-04-21 15:01:46 · 134 阅读 · 2 评论 -
MDN扫盲篇之CSS
MDN扫盲篇之CSSCSS是如何工作的当浏览器遇到无法解析的css代码会发生什么CSS动画优点CSS动画事件监听器检测浏览器是否支持css动画rgba角度单位basic-shape基础图形clip-path图形动画shape-outside非常规图片的文字环绕效果blend-modecolor颜色表达方法currentColorhsl和hslacss功能符号CSS 基本数据类型用户自定义字符串标识符规则gradient渐变色CSS盒模型flex-boxgaptext-transform文本布局和方向writ原创 2022-03-28 20:42:03 · 1038 阅读 · 0 评论 -
Less知识整理
Less整理Less介绍安装嵌套注释@Mixins&+ - * /calc()~导入内置函数Less介绍less对于css,很像jquery对于js,让原生内容简化,代码写的少,但是实现的功能却更多。同时,less的表达,也更像js 。比如变量,嵌套,封装,函数,映射,作用域等等。所以,学习的时候,可以结合css和js来学习less,更容易理解。同时,在本篇中,我也会不断提醒这一点。官网https://less.bootcss.com/less对于css样式的表达,是通过各种各原创 2022-03-04 18:10:04 · 722 阅读 · 0 评论 -
2021.11.19 补充:由left:50%引发的问题及解决方法4
设置全偏移法包含块还有一个的特性,就是同时设置了left和right值,那么,宽度就变成了包含块的100%宽度,而不是包含块的50%宽度。这时, 再给子盒子一个最大宽度。所以把这个方法叫做设置全偏移法,意思就是把left right top都设置上。这样确保子盒子的位置和宽度。案例如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht原创 2021-11-19 13:09:39 · 246 阅读 · 0 评论 -
2021.11.18 每天进步一点点:由left:50%引发的盒子宽度问题及解决
这里写目录标题发现问题分析问题分析思路锁定问题说说包含块:关于包含块的那些事儿包含块的四种情况包含块对绝对定位的子盒子做了什么解决问题设置固定宽度内容为文字时设置为不换行用魔法打败魔法的方法参考文档发现问题有这么个例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-11-18 19:15:11 · 1041 阅读 · 0 评论 -
每天进步一点点2021.11.4 css动画之transition
transition简单介绍属性介绍transition-propertytransition-durationtransition-timing-functiontransition-delay兼容性多个过渡动画参考文档简单介绍前面介绍了css的animation动画及其属性,这次要说的也是css的一种动画实现–transition两者有一个很大的区别,transition是需要css或js事件触发的动画。举个例子:<!DOCTYPE html><html lang="en原创 2021-11-04 23:50:29 · 384 阅读 · 0 评论 -
每天进步一点点2021.11.2 css动画的steps运动帧
steps(n, state)steps(n, state)简介参数介绍看个例子,发现不同参考文档steps(n, state)简介如果不专门去查,都不知道还有这么个css动画属性。在3w school和 MDN介绍的animation上都没查到这个属性。steps是animation动画的属性animation-timing-function的一个值。 也就是用来控制动画运动方式的。steps(n, state) 有两个值。n 表示将单次运动分为几步来完成。而且从每一步都是直接从开始状态跳转到结原创 2021-11-02 14:12:45 · 352 阅读 · 0 评论 -
CSS之left:50% 、 margin-left: 50%写法的bug和解决
大家好,我是梅巴哥er。本篇一起来看一个关于left: 50%; 和 margin-left: 50%;写法产生的bug和解决方法。产品需求我们需要一个居中的盒子,底色是蓝色,水平居中放置,宽度随着字数做自适应调整。发现bug于是,我们就根据需求,来写这样一段代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="原创 2021-07-14 14:35:31 · 2611 阅读 · 0 评论 -
修改滚动条并对滚动条事件进行封装
大家好,我是梅巴哥er。本篇,我们介绍三个部分:css改变滚动条样式的方法。js做出滚动条效果。滚动条事件在项目中的完整封装。css改变滚动条样式的方法老规矩,先来看下效果图:直接上demo:/*demo.html*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con原创 2021-06-14 01:02:58 · 357 阅读 · 0 评论 -
页面布局(6):响应式布局
大家好,我是梅巴哥er。本篇介绍响应式布局,用js+rem来解决。响应式的介绍,在页面布局(2):腾讯首页中简单聊过,但是说的不够完善,所以本篇中,将会更具体的做介绍,并能实际应用。响应式和自适应的区别响应式是不管页面宽度怎么变化,主要布局不会变化,体现的内容主题也不会变化。自适应是随着页面宽度的变化,布局也会有一定变化。 其实在腾讯首页中,是做的自适应。详情可以查看这篇文章:响应式网站自适应网站的区别以及利与弊响应式的具体做法直接上代码来展示吧<!--demo.html--原创 2021-05-25 21:04:58 · 854 阅读 · 4 评论 -
页面布局(5):body背景为切片②
大家好,我是梅巴哥er。上篇介绍了背景切片的其中一种形式(点击查看页面布局(4):body背景为切片①)。 本篇介绍另外一种形式。即自适应形式。看过上篇博文后,本篇就可以直接写代码了。我们直接来看效果和代码:代码<!--demo.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-05-23 19:17:10 · 97 阅读 · 2 评论 -
页面布局(4):body背景为切片①
大家好,我是梅巴哥er。本篇介绍一种新的常用布局------body背景为图片切片的布局。布局介绍这种布局常用在公司活动页面的制作。起初UI给到的一般是一张宽度为1920的完整图片,为了缓解页面压力,我们需要把一张UI背景图,先切片成若干片,然后再放在body作为背景图。body有了背景图,根据产品需要,布局分为两种情况。一种是body背景只上不分三栏布局,也不做自适应的布局。即,如果缩小屏幕宽度,控制台直接就遮盖页面,body背景不会缩小自身宽度。另一种是body背景之上,分三栏布局,中间一原创 2021-05-23 19:04:31 · 236 阅读 · 0 评论 -
页面布局(3):网易首页
大家好,我是梅巴哥er。本篇介绍网易首页的布局。悼念专栏2021年5月22日,也就是昨天,吴孟超院士和袁隆平院士离世,沉痛悼念两位老人,愿两位老先生一路走好。网易首页链接https://www.163.com/页面特点公司常用布局形式响应式三栏布局,中间固定宽度,两边自适应页面宽度缩小到一定宽度,中间宽度不变手机模式下可以正常观看页面文字新闻类型,内容以文字为主图片说明先来看看首页全部宽度的情况下,顶部是一个全宽的nav栏。下面是一个wrap原创 2021-05-23 13:20:19 · 720 阅读 · 0 评论 -
MDN扫盲班开课啦!(2)
大家好,我是梅巴哥er。MDNcss学习:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/What_is_CSSMDNcss所有属性和特性:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element可以当作查询文档使用。计算属性值/*举例*/width: calc(90% - 30px);transform: rotate(0.8turn)@rules@原创 2021-05-18 19:15:14 · 174 阅读 · 0 评论 -
canvas基础功能介绍
大家好,我是梅巴哥er。 最近在看一些html基础知识,刚看了canvas的相关知识,做个基础整理。如需了解更多内容,请移步cavas在MDN上的教程,可以学习更多更深入的知识。本篇就以代码demo的形式,对基础功能进行罗列。Canvas就是一块画布。 用js在画布上画画的。基础步骤:<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px --><canvas id="canvas" width="300px" height="150px">&l原创 2021-05-17 19:50:11 · 351 阅读 · 0 评论 -
页面布局(2):腾讯首页
大家好,我是梅巴哥er。 本次看的是腾讯官网的布局(点击此处查看)。 他的官网,是典型响应式布局。下面就来细说一下,响应式的原理和具体实现方法,以及相应的代码案例。在了解响应式之前,先了解一下传统做法。一般来说,在写代码时,web端和手机端会分开。 web端一套代码,手机端一套代码,因为尺寸不同,排版方式也会有差别。这样做的好处很明显,就是写代码时,都是根据web和手机各自用户群体的特点来写的,针对性比较强。修改代码时,只修改某一个端的代码即可。其实,这种做法也是很常用的。什么是响应式布局原创 2021-05-17 12:05:10 · 1170 阅读 · 2 评论 -
来一起复习一下Flex布局吧!
大家好,我是梅巴哥er。本篇专门复习一下Flex布局的相关知识。参考学习网站:菜鸟教程:Flex布局阮一峰老师的总结:Flex布局什么是Flex布局flex布局,也就是弹性布局,是W3C在2009年提出的一种新的布局形式。Flex布局的特点灵活度高布局简单弹性盒子为啥要用Flex布局传统的布局方式,是通过 display + position + float来完成的。这种形式在某些特殊布局中不是很方面,比如垂直居中。flex布局具有很高的灵活性,完成这种布局,就原创 2021-01-23 22:47:43 · 254 阅读 · 2 评论 -
CSS知识总结
大家好,我是梅巴哥er。这篇是之前总结的css知识,忘了发出来了。今天分享一下。刚学前端的时候做的笔记,没有排版,看着可能缺了点美感。本篇内容是看的B站pink老师视频,边看边做的总结。有想了解更多用法的,可以去w3c或菜鸟教程或者B站看PINK老师的视频教程。看前预警:图片较多,如果是手机版,请尽量在wifi模式下观看!!!CSS层叠样式表第一天1,HTML的局限性2,CSS网页的美容师3,CSS初识4,引入CSS样式表(书写位置)要书写css样式,应该写在哪个位置呢?4.1原创 2021-01-10 23:57:23 · 303 阅读 · 4 评论