努力更加努力-优快云博客

原创初级前端的自我救赎【HTML+CSS篇】：15.flex布局

flex布局概述此前我们制作的所有网页都是基于盒子模型和浮动布局完成的， flex布局又叫弹性布局（或者叫弹性盒子布局）这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。基本概念将元素设置为display:flex;元素会变成一个flex容器。容器内部的元素为flex元素或者叫flex项目（flex-item) main axis:主轴 cross axis：交叉轴 flex容器中的默认效果 1.flex项目在flex容器中延主轴排列。 2.flex项目高度适应flex容器高度

2021-09-29 00:17:32 160

原创初级前端的自我救赎【HTML+CSS篇】：14.css3动画属性

动画属性（animation）： animation-name:规定需要帮规定到选择器的keyframe名称。 animation-duration:规定完成冬花所花费的时间，以秒或毫秒计。 animation-timing-function:规定动画的速度曲线。 animation-delay：规定在动画开始之前的延迟 animation-iteration-count:规定动画应该播放的次数定义动画 @keyframes anim{ 0%{ transform:transl

2021-09-28 02:33:09 111

原创初级前端的自我救赎【HTML+CSS篇】：13.过渡效果transition以及overflow属性

transition transition-property 过渡属性（例如transform) transition-duration 过渡持续时间（例如1S） transition-timing-function 过渡函数 transition-delay 过渡延迟时间过渡函数： ease:开始结束慢，中间快（默认值） liner：匀速 ease-in：开始慢 ease-out:结束慢 ease-in-out:和ease类似，但比ease幅度大简写： transition:属性秒数函数延

2021-09-28 00:58:11 541

原创初级前端的自我救赎【HTML+CSS篇】：12.css3新特性之边框圆角、阴影、形变

css3新特性一、边框圆角二、阴影三、形变：旋转、缩放、位移四、过渡效果五、动画效果六、媒体查询七、flex布局八、grid布局等等（选择器、字体）…… 以下先记录边框圆角、阴影、以及形变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed

2021-09-28 00:40:38 130

原创初级前端的自我救赎【HTML+CSS篇】:11.HTML5新特性之布局元素与媒体元素

HTML5新特性之布局元素与媒体元素布局元素布局元素相当于一个有语义的div。 header:网页头部 nav:导航栏 aside:侧标栏 article:显示文章 section:布局的一部分 footer:网页页脚媒体元素一、audio音频二、video视频媒体元素属性一、controls 显示控制面板二、autoplay 视频自动播放必须静音才能自动播放三、muted 静音 <!DOCTYPE html> <html lang="en">

2021-09-27 20:56:30 76

原创初级前端的自我救赎【HTML+CSS篇】:10.css定位

css定位（position) 绝对定位：absolute 相对定位：relative 固定定位：fixed 坐标属性（非定位元素不起作用） top,left,right,bottom,z-index 绝对定位（absolute) 脱离文档流；默认参照物为浏览器视窗的左上角相对定位（relative）不脱离文档流; 默认参照物为此元素的原位置固定定位（fixed）脱离文档流；默认参照物为浏览器视窗位置设置z轴（z-index）值为整数; 数值大则在前方显示。没有设置但是设置了

2021-09-27 17:07:48 71

原创初级前端的自我救赎【HTML+CSS篇】:9.float浮动元素

浮动元素的特性：脱离文档流造成文档流混乱解决方案：在浮动元素下方添加空div clear:both （效果：清除上方浮动元素对布局造成的不良影响）然而添加空div的方式并非正确合适的解决方法。所以最好利用伪元素::before和::after来清除浮动（如下方）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

2021-09-26 21:27:08 56

原创初级前端的自我救赎【HTML+CSS篇】：8.HTML元素的分类以及display属性

HTML元素的分类块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li 行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span 行内块元素：可以设置宽度和高度，不独立成行。img,input,button display属性 block：转换为块元素 inline：转换为行内元素 inline-block：转换为行内块元素 none：隐藏元素 <!DOCTYPE html> <html lang="en"> <head>

2021-09-26 21:12:05 119

原创初级前端的自我救赎【HTML+CSS篇】：7.盒子模型

将html元素看做是盒子，来实现的网页布局有关盒子模型的css属性边框：border-width;border-style;border-color; 外边距：margin(-top\-right\-bottom\-left) 内边距：padding(-top\-right\-bottom\-left) 默认情况：元素宽度和高度计算元素的实际宽度 = border-left + border-right + width + padding-left + padding-right

2021-09-26 20:15:28 96

原创初级前端的自我救赎【HTML+CSS篇】:6.选择器权重与样式权重

<!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>Do

2021-09-26 19:37:53 143

原创初级前端的自我救赎【HTML+CSS篇】：5.css选择器进阶

<!DOCTYPE html> <html lang="en"> <head> <meta charset

2021-09-26 19:33:14 72

原创初级前端的自我救赎【HTML+CSS篇】：4.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>Docume

2021-09-26 18:56:11 60

原创初级前端的自我救赎【HTML+CSS篇】：3.表单元素

<!

2021-09-26 17:55:31 69

原创初级前端的自我救赎【HTML+CSS篇】：2.表格元素及相关标签属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

2021-09-26 17:42:15 134

原创初级前端的自我救赎【HTML+CSS篇】：1.常用的html标签

辣鸡前端的自我修炼之路：1.常用的html标签    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

2021-09-26 17:04:28 64

weixin_44088319的博客