HTML
Manta__
这个作者很懒,什么都没留下…
展开
-
canvas 画布基本操作
canvas 画布基本操作https://www.cnblogs.com/wgs-blog/p/10045130.htmlconst canvas = document.getElementById(‘canvas’);// 2、画笔 — canvas的上下文对象const ctx = canvas.getContext(‘2d’);// 3、设置颜色 ---- 调色ctx.fillStyle = “red”; // 填充颜色的设置ctx.strokeStyle = ‘blue’; // 轮廓原创 2020-12-04 10:57:06 · 216 阅读 · 0 评论 -
029 Flex应用
flex-内容宽度等分//css .box { display: flex; } .box div { flex: 1; border: 1px solid red; }//html <div class="box"> ...原创 2020-03-30 16:25:54 · 202 阅读 · 1 评论 -
028多列布局
column- width 指定每一栏的宽度(这是多列布局的第一种分法)column-count 指定要多少栏(这是多列布局的第二种分法)column-gap 栏目距离column-rule 栏目间隔线...原创 2020-03-19 14:50:06 · 102 阅读 · 0 评论 -
027媒体查询
css3媒体查询是响应式方案核心操作符(only,and,(, or),not)-only:防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。@media only screen and (min-width:800px ){ 规则; 规则}@media screen and (min-width: 800px ){ 规则;}在老款的浏览器下@media ...原创 2020-03-19 14:47:25 · 124 阅读 · 0 评论 -
026FLEX
flex布局CSS3弹性盒子(Flexible Box或Flexbex),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行/列。对于许多应用程序,弹性盒子模型提供了对块模型的改进,因为它不使用浮动,flex容 器的边缘也不会与其内容的边缘折叠。弹性盒模型,分老版与新版老版本的我们通常称之为box新版本的我们通常称之为lex...原创 2020-03-19 01:22:12 · 192 阅读 · 0 评论 -
025动画
css3动画使元素从一种样式逐渐变化为另一种样式的效果animation属性是一个简写属性形式: (可以用来描述可动画的属性)简写属性animationanimation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimati...原创 2020-03-18 22:55:56 · 202 阅读 · 0 评论 -
024 3D
3D变形在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外3D平移transform: translateZ(length)是3D Transformaton特有的,其他两个2D中就有translateZ它不能是百分比值;那样的移动是没有意义的。transform: translate3d( translateX, ,translateY, translateZ);3D缩放...原创 2020-03-18 13:32:31 · 225 阅读 · 0 评论 -
023 2D
transform 属性 -允许你修改CSS视觉格式模型的坐标空间 -只对 block 级元素生效!基点的变换transform-origin CSS属性让你更改一个元素变形的基点。平移 X方向平移:transform: translateX(tx) Y方向平移:transform: translateY(ty) 二维平移:transform: translat...原创 2020-03-18 02:19:48 · 167 阅读 · 0 评论 -
022过渡
transition众所周知,css效率极高,其变化的过程往往都是在一瞬间完成,速度极快。CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色,按照一定的曲线速率变化。这...原创 2020-03-17 11:56:57 · 143 阅读 · 0 评论 -
021径向渐变
径向渐变radial gradient()函数创建-个,用来展示由原点<渐变中心)辐射开的颜色渐变-默认均匀分布radial-gradient(red,blue);-不均匀分布radial- gradient(red 50%,blue 70%);-改变渐变的形状radial- gradient(circle ,red,blue)circleellipse (默认为椭圆)-...原创 2020-03-16 01:08:09 · 150 阅读 · 0 评论 -
020线性渐变
线性渐变为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)。 你还要定义终止色。终止色就是你想让测览器去平滑的过渡过去,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。要与background-image绑定-默认从上到下发生渐变linear-gradient(red,blue);-改安新变方向: ( top bottom left righ...原创 2020-03-16 01:02:23 · 145 阅读 · 0 评论 -
019背景补充
background-color-会设置元素的背景色默认值: transparent 不可继承background-image-属性用于为-个元素设置一个或多个背景图像,图像在绘制时,以z轴方向堆叠的方式进行。先指定的图像会在后指定的图像上面进行绘制。注意: background-color会在image之下进行绘制,边框和内容会在image之 上进行绘制默认值: none 不可继承...原创 2020-03-16 00:46:13 · 243 阅读 · 0 评论 -
018边框
==border-image == -CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单,也不用在某些情况下使用九宫格了。使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。== border-image-source== -用于声明元素的边框图片(border-image)的资源默认值:none,不继承border-...原创 2020-03-16 00:20:08 · 152 阅读 · 0 评论 -
017新增UI方案
box- shadow以逗号分割列表来描述-个或多个阴影效果,可以用到几乎任何元素上。如果元素同时设置了border-radius,阴影也会有圆角效果。多个阴影时和多个text shadows规则相同(第-个阴影在最上面)。快认值:none 不可继承值:inset默认阴影在边框外。使用inset后,阴影在边框内。 这是头两个dength>值,用来设置阴影偏移量。设置水...原创 2020-03-15 23:57:04 · 155 阅读 · 0 评论 -
015text补充
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ wi...原创 2020-03-15 00:03:20 · 89 阅读 · 0 评论 -
014
1.css而全称是什么?CSS的全称是Cascading Style Sheet,2.样式表的组成3.浏览器读取编译css的顺序? |原创 2020-03-14 23:46:47 · 197 阅读 · 0 评论 -
013Vertical-align
Vertical-align -用来指定imline-block的垂直对齐方式 ps:我们经常会在img (管换元素)上使用vertical- align属性 默认值: baseline |不可继承值:大部值是相对于父元素来说的:baseline -元素基线与父元素的基线对齐对于一些可替换元素,比如<textarea> ,HTML标准 没有说明它的基统,这...原创 2020-03-14 23:44:13 · 92 阅读 · 0 评论 -
012行高
顶线、中线、基线、底线1.行高:是指上下文本行的基线间的重直距离,即图中两行红线间昏直距离。2.行距:是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线的重直距离3.半行距:是行距的一半,即区域3垂直距离/2,区城1,2, 3, 4的距离之和为行高,而区域1, 2, 4距离之和为字体size,所以半行距也可以这么算: (行高-字体size) /24.内容区:底线和顶线包裹的...原创 2020-03-14 19:36:52 · 493 阅读 · 0 评论 -
011清楚浮动方法集合
清除浮动1.给父级加高度 -扩展性不好 2.开启BFC -ie67底下不支持BFC 浮动盒子的特点,定位盒子的特点:高宽都由内容撑开overflow:hidden定位浮动3.br标签 -ie6不支持 -也违反了结构行为样式相分离的原则 4.空标签-违反了结构行为样式相分离的原则 -ie6下元素的最小高度为19px ...原创 2020-03-14 17:16:16 · 124 阅读 · 0 评论 -
010BFC
在解释BFC是什么之前。需要先介绍Box, Formatting Context的概念。Boxc CSS布局的基本单位Box是CSS布同的对象和基本单位,直观点来说。就是一个页面是由很多个Box组成的。元素的类型和display属性。决定了这个Box的类型。不同类型的Box,会参与不同的Formatting Context (-个决定如何宣染文档的容器) ,因此Box内的元素会以不同的方式...原创 2020-03-14 17:00:26 · 104 阅读 · 0 评论 -
009两列布局,及商品列布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ min...原创 2020-03-14 16:45:14 · 432 阅读 · 0 评论 -
008垂直水平居中
。原创 2020-03-14 16:26:17 · 260 阅读 · 0 评论 -
007stickyfooter
什么是stickyfooter-经典的 “粘连”footer布局。-我们有一块内容<main>.-当<main>的高度足够长的时候,<footer>应该紧跟在<main>元素的后面。-当<main>元素比较短的时候 (比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连” 在屏幕的底部...原创 2020-03-13 19:41:50 · 107 阅读 · 0 评论 -
006包含块
1.定位参照于谁块来定位 没有定位:包含块 相对:元素本来的位置 绝对:包含块 如果最近的祖先元素中存在定位元素,则这个定位元素就是包含块 如果没有,包含块为初始包含块 固定:视口2.什么是初始包含块 是一个视窗大小的矩形,不等于视窗包含块对于浮动元素,其包含块定义为最近的块级祖先元素。对于定位,情况则没有这么简单。CS...原创 2020-03-13 18:25:19 · 119 阅读 · 0 评论 -
005clearfix
使用空table标签隔离父子元素的外边距,阻止外边距重叠.以及高度塌陷<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>ceshi</title> <style type="text/css"> .b1{ ...原创 2020-02-27 23:45:23 · 104 阅读 · 0 评论 -
004hack
有一些情况,有一些特殊的代码我们只需要在某些特殊的浏览器中执行,而在其他的浏览器中不需要执行,这时就可以使用CSS Hack来解决该问题。CSS Hack实际上指的是一个特殊的代码。这段代码只在某些浏览器中可以识别,而其他浏览器不能识别,通过这种方式,来为一些浏览器设置特殊的代码.csshack 不到万不得已不使用.1.条件Hack:条件Hack.条件hack只对IE浏览器有效,其他的浏览器都...原创 2020-02-27 23:12:42 · 110 阅读 · 0 评论 -
003css
CSS层叠样式表A.可将css样式编写到标签(元素)的style属性中,“名:值”,多个之间用;隔开,称为内联标签,只对当前标签有作用。不方便复用。不方便后期维护,不推荐。B.编写到head中的<style></style>...原创 2020-02-19 01:40:48 · 398 阅读 · 0 评论 -
002HTML基础
1.框架<html> <!--根标签,一个页面有且只有一个--> <head> <!--帮助浏览器解析网页--> <title></title><!--标题标签,搜索引擎在检索页面时,首先检索title--> </head> <!--子标签,与body为兄弟标签-->...原创 2020-02-18 16:29:45 · 299 阅读 · 0 评论 -
001软件架构
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200218150038772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01hbnRhX18=,size_16,color_FFFFFF,t_70...原创 2020-02-18 15:01:43 · 104 阅读 · 0 评论