- 博客(18)
- 收藏
- 关注
RSS订阅原创 flex布局归纳大全-弹性盒模型详解
第十六章：flex布局-弹性盒模型前言一、弹性盒模型1.开启（使用）弹性和模型2.弹性盒模型的默认排列方式二、弹性盒模型父级的一些属性1.flex-wrap 控制子元素换行2.flex-direction 控制子元素的排列方向3.justify-content 控制子元素在主轴的对齐方式4. align-items 控制子元素在副轴的对齐方式5. align-content 控制子元素行与行之间的对齐方式三、弹性盒模型子级的一些属性四、使元素在父级居中的方法归纳总结前言在前面我们学过的页面布局主要依靠元
2021-12-05 22:54:14
1759
2
原创 利用CSS实现爱心跳动案例--浪漫爱心表白
CSS实现爱心跳动原理：具体步骤：先让大家看看心动的感觉吧：不是吧，不是吧，如此浪漫的爱心表白竟然用CSS就可以完成。是的，你没有听错！接下来小编带大家制作爱心表白：原理：利用两个长方形的盒子，让其使用定位或浮动等属性改变其位置，在经过平移、旋转等变形效果后，再使用圆角属性，此时爱心的形状即可完成，然后再结合动画属性最终实现爱心跳动。具体步骤：首先我们准备一个大盒子包裹着，在大盒子里准备两个小盒子通过变形属性使其变成爱心；2.通过定位或者浮动属性使两个盒子重叠在一起因为两个盒子是
2021-11-29 20:35:45
5264
4
原创 CSS3 transform变形属性、2D变形、3D变形
第十五章：transform变形属性一、2D变形1. rotate（）旋转属性值2. translate（）位移属性值3. scale（）缩放属性值4. skew（）倾斜属性值5. transform-origin 变化原点属性6. 复合写法、变换顺序组合二、3D变形1. 3D的方向感2. perspective视觉景深属性3. transform-style: preserve-3d;显示3D层级4. 3D变形总结一、2D变形transform属性可以使元素进行旋转、平移、缩放、倾斜等形状的变化，简称
2021-11-18 17:54:20
2297
原创 CSS过渡属性、动画属性详解
html零基础必看——html入门，编程就是如此简单第十四章：过渡属性和动画属性1. transition过渡效果属性1.1 transition属性的分解写法1.2 transition属性的复合写法1.3 多个属性,分开设置1.4 注意2. animation 动画效果属性2.1 @keyframes: 定义动画关键帧2.2 animation 动画属性分解 常用的2.3 复合写法规范的顺序: （不常用）2.4 补充：steps()总结1. transition过渡效果属性过渡：可以实现元素在变换
2021-11-11 18:23:31
2523
原创 CSS常用选择器归纳大全
html零基础必看——html入门，编程就是如此简单第十三章：CSS选择器汇总1. 初级选择器2. 属性选择器3. 伪类选择器3.1 状态类3.2 结构类4.伪元素选择器4.1 伪元素选择器的写法4.2 注意4.3 伪类选择器和伪元素选择器的区别5.样式的优先级比较总结1. 初级选择器以标签名 标签名选择器 如 p{ }以# id选择器 如 #one{ ]以 . 类名选择器 如 . box以 通配符选择器 如 { } 可用于清除默认样式以 空格 后代选择器（父 子 孙 …
2021-11-10 15:41:45
1166
原创 表单、表格常用属性大全
html零基础必看——html入门，编程就是如此简单第十二章：表单、表格标签一、form表单1.1 form表单标签1.2 input 输入表单控件标签1.2.1 text文本框1.2.2 password密码框1.2.3 radio单选框1.2.4 checkbox多选框1.2.5 普通按钮 提交按钮 重置按钮1.2.6 image 图像提交按钮1.2.7 css3新特性2 `：focus`表单获得焦点时被选中二、select下拉菜单三、textarea 多行输入文本框四、 表格总结一、form表单
2021-11-08 22:12:52
4685
原创 CSS定位属性position详解、定位分类、定位层级
html零基础必看——html入门，编程就是如此简单第十一章：position定位属性1.认识定位position属性1.1什么是定位1.2 position 属性的五个值2. 定位分类2.1 静态定位 position: static ；2.2 相对定位 position: relative;2.3 绝对定位 position: absolute;2.4 固定定位 position: fixed;2.5 粘性定位 position: sticky;3.定位层级z-index4.使用定位让元素
2021-11-07 00:33:45
2016
原创 CSS浮动布局、关于浮动布局引起高度塌陷问题的详解
第十章：float浮动布局1.什么是浮动1.1定义1.2 注意1.3 float属性值2.浮动的特点1.什么是浮动1.1定义浮动：是元素脱离文档流，然后按照所指定的方向进行移动（左右移动），遇到父级元素边缘或者相邻浮动元素就会停止。1.2 注意元素设置了浮动属性后，对该元素前面的元素没有影响，只影响该元素后面的元素。1.3 float属性值left 元素向左浮动；right 元素向右浮动none 没有浮动 默认值2.浮动的特点元素按照所设置的方向进行移动，遇到父级或相邻浮动的元素
2021-11-06 03:02:34
880
原创 通过CSS实现太极图案例
概述：所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。话不多说，先让我们看看太极图的形状~乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。思路先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一
2021-11-05 02:29:53
4944
2
原创 CSS线性渐变和径向渐变详解
html零基础必看——html入门，编程就是如此简单第九章：渐变色1.线性渐变1.1.什么是线性渐变1.2线性渐变的写法2.径向渐变2.1什么是径向渐变2.2径向渐变的写法总结1.线性渐变1.1.什么是线性渐变线性渐变，顾名思义就是以某条直线边开始沿着某个方向的渐变。属性是background，给背景的渐变色。属性值是linear-gradient（），是一个函数，（）里面写需要渐变的颜色；创建一个线性渐变，需指定两种及两种以上的颜色进行一个平滑过渡形成的渐变色，可以实现从不同方向、不同角
2021-11-04 21:15:45
6560
原创 CSS边框圆角属性、元素阴影、透明属性
html零基础必看——html入门，编程就是如此简单第八章：圆角、阴影、透明属性一、border-radius 圆角边框属性1.什么是圆角属性2.圆角边框属性值取值法：3.盒模型变为圆或是椭圆二、box-shadow 阴影属性三、opacity 元素透明度属性一、border-radius 圆角边框属性1.什么是圆角属性border-radius圆角属性就相当于是把一个盒模型的一个角或多个角变成一段圆弧（圆角）的边框，就达到了圆角的效果。属性的值就相当于变成这段圆弧的边框的半径。2.圆角边框属性值
2021-11-04 16:59:29
2396
1
原创 CSS背景图片常见相关属性详解
html零基础必看——html入门，编程就是如此简单第七章：背景属性1.什么是背景？2.background-color 背景颜色3.background-image 背景图片4.background-repeat 背景图片平铺方式5.背景图片大小6.背景图片位置7.background-attachment 背景图像固定8.背景图片和img标签对比总结1.什么是背景？背景：渲染浏览器元素背景层 , background属性用于设置盒子的背景颜色或者背景图片效果等。背景是在内容层的下方，背景与
2021-11-03 00:24:03
2551
原创 CSS颜色属性、文本文字属性、属性继承
html零基础必看——html入门，编程就是如此简单第六章：颜色属性、文本文字属性一、颜色样式（颜色取值法）1.颜色属性值取值方法一、颜色样式（颜色取值法）1.颜色属性值取值方法颜色属性常见有color、background-color。属性值：英文取值:如red、blue等，直接对应用相关颜色的英文16进制取值：这里是引用...
2021-11-02 22:08:43
758
原创 元素分类、基线对齐、元素类型转换
html零基础必看——html入门，编程就是如此简单第五章：元素类型（标签分类）前言一、块级元素1.常见块级元素2.块级元素特征二、行内元素1.常见行内元素2.行内元素特征三、行内块元素1.常见行内块元素2.行内块元素特征3.解决行内块元素之间的空隙问题4.解决行内块元素基线对齐问题5.元素类型转换总结前言我们在第一章学到，html标签主要有三种成份：元素、属性、值。此处的元素实际上就是指的是标签，元素类型就是对标签进行分类。常用元素类型: 块级元素、行内元素 、行内块元素，本章将对这三种元素类型进行
2021-11-01 20:00:50
726
原创 CSS盒模型、怪异盒模型
html零基础必看——CSS盒模型前言在我们使用css3进行网页布局时，往往会用到盒模型，一个大大小小的盒子就是来装内容的，可以说每一个标签元素都是一个盒子。本章将对盒模型展开讲述！第四章：CSS盒模型前言一、盒模型的基本认识1.1.什么是盒模型1.2.盒子的组成1.3.盒子的大小二、盒模型的四大组成部分2.1.内容区content2.2.内边距padding2.2.1padding属性值的写法：2.3.边框border2.3.1边框的风格2.3.2边框三个属性的值的写法2.4.外边距margin2.
2021-11-01 00:31:24
1121
原创 CSS基础知识、CSS常见选择器详解
html零基础必看——CSS的三种样式结构、CSS常见选择器详解第三章：CSS基础知识前言一、认识CSS1.1.CSS基本概念1.2.结构二、CSS的三种写法2.1.内部样式2.2.行内样式2.3.外部样式2.4.三种样式的优先级2.5.三种样式的比较三、CSS选择器3.1.基本选择器3.1.1.元素选择器（标签名选择器）3.1.2.类名选择器3.1.3.id选择器3.1.4.通配符选择器3.1.5.群组选择器3.1.6.优先级问题：3.2层次选择器3.2.1后代选择器3.2.2子代选择器3.2.3相邻兄
2021-10-31 21:18:22
559
原创 html中常见标签及其用法归纳大全
html零基础必看——htmlHTML常见标签大全第二章：html常见标签前言一、常见标签（一）1、body标签2、div盒子标签3、p文本段落标签4、h1~h6 标题标签5、b标签和strong标签（文字加粗标签）6、span文字包裹标签7、br换行标签和hr分隔符标签9、del删除标签10、center居中标签11、sup上标和sub下标12、pre预格式化标签二、常用标签（二）2.1.a标签（链接、超链接、锚点标签）2.1.1.超链接标签2.1.2 锚点链接2.1.3 空连接2.2 图片标签三、列表
2021-10-28 14:46:11
41697
11
原创 HTML基础知识
html零基础必看——html入门，编程就是如此简单第一章：HTML的基础知识前言一、HTML概述1.1 认识HTML1.2 HTML的由来及历史版本1.3 HTML5二、开发工具的选择安装2.1.VS vode特点：2.2.VS vode的安装与使用三、HTML页面基本结构3.1 doctype3.2 html3.3 head3.4 meta3.5 title3.6 body四、标签4.1 标签知识4.2 标签结构4.3 标签的注释总结前言从本文开始，小编将会把前端学习重点知识整理归纳，
2021-10-28 14:03:59
884
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人