摘要：
概述 flex布局是一维布局，grid是二维布局。 flex考虑的是项目按行或列布局，grid需要同时考虑行和列 应用场景 左边的列表用flex布局实现更加简单，而右边整体的布局由grid来实现更适合。 grid容器 <!DOCTYPE html> <html lang="en"> <head> < 阅读全文
摘要：
概述 此前我们制作的所有网页都是基于盒子模型和浮动布局完成的 今天学习flex布局，又叫弹性布局(或者叫弹性盒子布局) 这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。 将元素设置成display:flex;元素会变成一个flex容器，容器内部的元素称为flex元素或flex项目（fle 阅读全文
摘要：
应用场景 嵌入到网页中运行，实现一些动态效果，表单验证，操作cookie，操作DOM等 使用方法 外部方式 在body内使用scipt标签 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta 阅读全文
摘要：
动画属性animation <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor 阅读全文
摘要：
概述 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= 阅读全文
摘要：
CSS3新特性 圆角：border-radius radius:半径 四个值是顺时针的顺序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .pill{ width: 阅读全文
摘要：
html5 html5是html的第5个版本，简称h5 html5新特性 布局元素 布局元素相当于一个有语义的div标签，但不加样式就还是相当于一个普通的div 和之前没什么不同，布局元素就是更规范化了，产生的效果看样式。 header：网页头部 红线框住的区域就是网页的头部 h5之前，要表示一个头 阅读全文
摘要：
应用 图片上的俩箭头 网页中回到顶部的按键，不管滚轮到哪，它都是一直在右下角 CSS定位(position) 建议电脑屏幕分辨率调100%，不然可能会显示额外的内外边距的情况 绝对定位（absolute） 脱离文档流：跟浮动类似，不占位 默认参照物为网页左上角，top、left等计算以左上角为起点 阅读全文
摘要：
概述 每一个标签都是一个元素节点，“水果列表”这四个字就是文本节点，id="banana"就是属性节点 看到这个页面，脑内要想到一个树状结构，在body中分为两部分用div包裹，上半部是一个“精选手册”的标题标题，还包含一个a标签"查看更多" 下半部是一个列表ul，有两行li，li中又分为照片和文本 阅读全文
摘要：
HTML元素分类 块元素：h1-6、p、div、ul、li 可以设置宽高，独立成行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I 阅读全文