![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
CSS 学习笔记
'"<>{{7*7}}
这个作者很懒,什么都没留下…
展开
-
Flex 弹性布局
总结:父元素{display:flex;将父元素变成一个弹性盒子flex-direction: xxx; 设置子元素的排布方向align-items:center 当子元素是横向排布的时候,设置为垂直居中(横向排布时,横轴为主轴,纵轴为交叉轴,center表示和交叉轴的中点对齐。当子元素是纵向排布时,设置为水平对齐。)}编程思想:flex布局代表是是一种样式编写的大局观,开发者在编写样式时,不应该将各个标签看成孤立的个体,而是应该看成一个整体,去考虑如何实现设计稿的样式,这样不.原创 2020-10-02 20:53:30 · 219 阅读 · 0 评论 -
纯CSS3 制作滚动文字通告动画
效果:思路:滚动部分其实就是一堆li,ul 容器设置好宽度和高度,然后overflow:hidden,将溢出的li部分隐藏掉然后将li relative定位,设置一个动画,不断改变li 的top值。就实现了滚动的效果。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten.原创 2020-06-11 13:57:51 · 947 阅读 · 0 评论 -
CSS3 五星打分效果
目录效果:思路:代码:效果:思路:本质上就是一排单选框,label和单选框通过id绑定,设置label的伪类元素before为 星星样式(使用font-awesome,'\f005'为实心星星,'\f006'为空心星星,color可以改变星星的颜色,text-shadow用来设置星星的阴影效果)首先设置全部的星星为黄色的实心星星然后设置被选中的单选框对应的label 之后 所有label为 空心星星同样的套路:先设置 当 容器 被hover时 所有的星星为黄色星星原创 2020-06-09 15:28:19 · 498 阅读 · 0 评论 -
HTML5&CSS3:Day03 2D动画 3D动画 CSS3过渡
目录0x00 2D动画0x03 3D动画0x04 CSS3过渡0x05 CSS3动画特效技能0x06 CSS3 flex弹性布局1.基本概念:2.flex容器(父元素)的六大属性3.flex item子元素的六大属性(1)order属性(2)flex-grow属性(3)flex-shrink(4)flex-basis属性(5)flex属性:(...原创 2020-02-05 18:01:59 · 475 阅读 · 0 评论 -
HTML5&CSS3Day02:CSS3新增选择器,用户界面属性,样式属性边框和盒阴影,渐变背景,文本效果,特殊文字,多列布局,多媒体查询
目录0x00 CSS3新增选择器0x01 CSS3新增的用户界面属性0x02 CSS3 常用的样式属性边框与盒阴影0x03 CSS3背景新特性0x04精灵图片的使用0x05 渐变背景1.标准语法:2.角度渐变:3.重复线性渐变:4.径向渐变:5.重复径向渐变0x06 css3文本效果及特殊字体的引入1.text-shadow:给文本添加阴影效果...原创 2020-02-02 20:45:38 · 469 阅读 · 0 评论 -
HTML5&CSS3Day01:html5常用结构元素,canvas,svg,媒体播放常用标签,本地存储localStorage,sessionStorage
目录0x00 HTML5介绍0x01 HTML5常用的语义化和结构元素0x02 HTML5图形绘画标签canvas0x03 HTML矢量图形SVG0x04 媒体播放常用标签0x06 HTML5常用的表单属性0x07 html5的本地存储1.localStorage0x00 HTML5介绍1.HTML4元素不能把文档结构表示清除,在HTML5中增加了与结构相关...原创 2020-02-01 14:22:21 · 256 阅读 · 0 评论 -
CSS before和after选择器
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-06-08 11:48:25 · 284 阅读 · 0 评论 -
纯CSS仿IOS开关按钮
效果:思路:本质上就是一个checkbox,我们将checkbox隐藏掉,然后用label和其绑定label中就是外面的大椭圆,给label中放一个em,就是里面的小圆形,当checkbox未被选中时,em左浮动当checkbox被选中时,em右浮动,并改变label的背景颜色为绿色。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-06-08 11:32:04 · 262 阅读 · 0 评论 -
CSS:小箭头的制作方法
思路:用i标签(行级元素,需要先修改为行内块级元素)先做一个边长为6px的正方形边框,然后tranform:rotate(-45deg) 逆时针旋转45deg。变成一个◇,然后只保留上边框和左边框。即可变成一个向下的小箭头<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2020-02-05 19:05:57 · 1118 阅读 · 0 评论 -
CSS:让图片保持长宽比 自适应缩小放大 解决方案
原理:width height 的百分比表示方式都是以父元素的宽度 长度为参照的(前提:父元素必须设置宽度和长度)而padding的百分比表示方式 是以 width的值为参照的。例如:width设置为100px padding设置为10% 则10%表示padding =width * 10% 即10px;所以,我们可以不设置div容器的高度,只设置宽度,然后用padding-top来撑...原创 2020-02-05 17:58:15 · 4485 阅读 · 0 评论 -
CSSDay04:页面实战
目录0x00 分析页面构造0x01 实战编写静态页面0x00 分析页面构造设计稿中每一个方框都是一个div。只要是我们认为应该捆绑在一起的元素,就应该用一个div包着它们头部就是三张图片,然后垂直居中轮播图暂时设置为一个静态的图片分类就是ul li 然后左浮动,每一个设置为25%0x01 实战编写静态页面编写移动端页面时加入这行信息配置<meta...原创 2020-01-24 00:18:50 · 166 阅读 · 0 评论 -
CSSDay03 盒子模型,经典三角形实现方式,经典圆形实现方式
目录0x01 盒子模型(面试必问 )0x01 经典三角形实现方式详解(面试)0x02 经典圆形的实现方式(面试)定位0x01 盒子模型(面试必问 )盒子模型:页面中所有的元素(标签)都可以看成一个矩形的盒子。它包括:内容content(width,height) 内边距padding:内容和盒子框之间的间距 边框border 外边距margin:两个盒子框之间的距...原创 2019-03-03 23:10:06 · 176 阅读 · 0 评论 -
CSSDay01选择器,关于选择器的权重计算,常见样式属性,定位,两栏自适应,水平居中和垂直居中实现方式
目录0x00样式写入的常见方式0x01选择器:0x02 关于css选择器的权重计算艺术0x03 css常见样式属性0x04 浮动布局 与清除浮动0x05 css定位position0x06 常见两栏自适应布局(重点,面试常问)1.利用浮动布局实现两栏自适应2.利用定位布局实现两栏自适应0x07常见水平居中、垂直居中实现方式css原理:1.优先原则:对...原创 2019-02-24 18:22:06 · 271 阅读 · 0 评论 -
纯CSS3 实现单选框和复选框的样式美化
#效果:#思路: 将原来的单选框隐藏,注意display:none 只是不显示该标签,该标签仍然存在于DOM树中, 虽然input框已经隐藏了,但是应为label和对应的input框是通过id关联的,所以我们仍然可以通过选择label来选中input框。 不论是radio 还是checkbox 在被选中的情况下,状态都是input:checked 所以,我们只要更换input被选中时的样式即可。#实现:<!DOCTYPE html&g...原创 2020-06-08 01:17:27 · 1298 阅读 · 0 评论