HTML与CSS基础
文章平均质量分 71
HTML+CSS基础知识
一生注定学霸命
这个作者很懒,什么都没留下…
展开
-
2-9 CSS动画案例:跳动的心
1.分析:一个心的构成由:两个圆和一个旋转45°的正方形构成具体的移动方法构成方法没有绝对,只要有足够的想象力,能够做出来就可以。<body> <div id="heart"> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div>*{margin:原创 2021-04-15 16:43:38 · 495 阅读 · 0 评论 -
2-10 CSS动画(transform全解、绝对定位元素居中、transition过渡、animation)
浏览器渲染原理1.概念帧:每个静止的画面叫做帧播放速度:每秒24帧(影视)或者每秒30帧(游戏)2.浏览器渲染过程步骤1.根据HTML构件HTML树2.根据CSS构件CSS树3.将两棵树合并成一棵渲染树(render tree)4.Layout布局(文档流、盒模型、计算大小和位置):相当于布局框架,一幅画的素描结构5.Paint绘制(把边框颜色、文字颜色、阴影等画出来)6.Compose合成(根据层叠关系展示画面):就像ps绘图一样,把每一层的内容合并拍平成一层。树:3.如何更新原创 2021-04-15 16:02:26 · 1886 阅读 · 0 评论 -
2-8 CSS定位(div分层、position取值、层叠上下文)
一个div的分层1.布局和定位的区别:布局是屏幕平面上的定位是垂直于平面的2.盒模型背景颜色范围?答:border外边缘围成的区域。(border的宽度颜色会覆盖背景,调成半透明可以进行验证)div分层内联子元素:文字块级子元素:正常的元素(没有加float: left)文字内容不管在哪都是按出现的顺序进行覆盖position的五个取值1.static默认值,当前元素待在文档流里,一般不写2.position: relative 相对定位,升起来但不脱离文档流使原创 2021-04-15 12:28:32 · 967 阅读 · 0 评论 -
2-7 CSS布局3-Grid布局
一维布局flex:选择横向或者纵向二维布局grid:两个方向同时布局1.容器 container成为container:在父元素上加 grid.container{ display:grid;/*or inline-grid*/}设置父元素的行和列(称为新时代的表格)方法一:宽度划分.container{ display: grid; grid-template-columns: 40px 50px auto 50px 40px; grid-template-ro.原创 2021-04-14 21:28:34 · 274 阅读 · 0 评论 -
2-6 用flex布局写页面框架
导航用flex做横向布局很简单,只需要在父元素上加 display:flex 就可以 <header class="header"> <div class="logo"> <img src="https://img-blog.csdnimg.cn/20210403114706585.jfif?x-oss-process=image/resize,m_fixed,h_224,w_224" alt=""> </div> &原创 2021-04-14 19:57:33 · 216 阅读 · 0 评论 -
2-5 CSS布局2-flex布局(新浏览器)
1.容器 containercontainer表示容器,一般用来做父元素,里面直接的子元素叫做items(项目)。2.container样式让一个元素变成flex容器 ,改变其中item的次序,现在item是弹性盒<div class="container"> <div class="item">1</div><!--其中的数字表示盒子次序--> <div class="item">2</div> <div cla原创 2021-04-14 11:32:48 · 123 阅读 · 0 评论 -
2-4 CSS布局1-Float布局(IE)
CSS布局1 布局是什么?-把页面分成一块一块,按左中右、上中下等排列。2 布局分类两种布局固定宽度布局:一般宽度为 960、1000、1024px不固定宽度布局:手机上使用,主要靠文档流的原理来布局。(文档流本来就是自适应的,不需要添加额外的东西就会根据页面大小进行排列,注意不要设置宽度。)第三种布局:响应式布局PC上固定宽度,手机上不固定宽度,也就是一种混合布局。3 布局的两种思路从大到小:先做大框架,再完成小布局从小到大:先完成小布局,组合成大布局4 用什么布局不兼容原创 2021-04-14 10:22:26 · 151 阅读 · 0 评论 -
2-3.CSS-盒模型
两种盒模型1.示意图content box:宽度包含内容区,叫内容盒模型border boxcontent:宽度包含border,则叫border盒模型外边距、边框、内边距、内容区一般border box更好用2.实例<body> <div class="content-box">content box</div> <div class="border-box">border box</div></body>原创 2021-04-04 12:42:16 · 66 阅读 · 0 评论 -
2-2CSS概念-文档流
重要概念文档流 Normal Flow块 内联 内联块margin合并两个何莫修文档流文档流指的是文档中元素的流动方向。1.流动方向——从左到右,从上到下内联元素(如span、inline元素)从左往右排列,排满另起一行,内联元素跳行时,最后一个元素会被拆分成两段block元素(如div)从上到下排列,每个元素占一行,div元素一个占一行,就算限定了宽度也不会靠拢div元素限定宽度:<div style="width: 100px;">第n个div元素</di原创 2021-04-04 11:34:28 · 122 阅读 · 0 评论 -
2-1 CSS前言
CSS基础知识CSS厉害之处:层叠样式表1 层叠指什么?可以不停的对已经有的样式进行覆盖样式层叠选择器层叠文件层叠2 CSS的版本目前世界上使用最广泛的CSS版本:CSS2.13 如何知道哪些浏览器支持哪些特性使用网站:caniuse体系化学习CSS1.语法语法一:样式语法选择器{属性名: 属性值;/*注释内容*/}p{color: red;/*颜色*/}语法二:at语法(只有三个语句)前面两个at必须要加分号charset是字符集的意思,UTF-8原创 2021-04-04 09:40:47 · 78 阅读 · 0 评论 -
HTML常用标签
1. a 标签的用法1.1 属性href 超链接<a href="https://google.com">超链接</a>a的href取值:1 .网址:一般选用 //google.com2 .路径3 .伪协议target 打开窗口<a href="https://google.com target=""_blank">超链接</a>a的target取值:1 .内置名字_blank :新页面打开_top :最顶层页面打开_pare原创 2021-01-14 23:38:48 · 161 阅读 · 0 评论 -
HTML入门笔记
HTML 是谁发明的 HTML是由英国计算机科学家李爵士发明。 HTML 起手应该写什么 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <m...原创 2021-01-14 12:13:14 · 159 阅读 · 0 评论