css/html
小张冲冲冲!
小张小张_遇事不慌
没什么本领的女大学生/认认真真当个电脑人/吃吃喝喝玩玩乐乐
展开
-
小张与css动画
呼呼transition实现渐变动画(css3)transform实现转变动画animation实现自定义动画transition实现渐变动画(css3)属性介绍transition:property duration timing-function delay默认值为transition:all 0 ease 0 - property:填写需要变化的css属性:比如说width,line-height,font-size 所有作用于dom样式的属性 - duration:完成过渡效原创 2020-09-19 19:27:08 · 73 阅读 · 0 评论 -
小张和CSS的一些知识
麻烦小张学一学css盒子模型CSS选择器CSS优先级算法CSS3新增伪类position属性CSS3的flex布局css盒子模型IE盒子模型/W3C盒子模型盒子模型:名称内容margin(外边距)清除边框border外的区域,外边距是透明的border(边框)围绕在padding和content外的边框,可有颜色padding(内边距)清除content周围的区域,透明content(内容)盒子的内容,显示文本和图像区别:IE的content原创 2020-08-25 15:10:16 · 87 阅读 · 0 评论 -
小张和弹性布局
flex布局,小张来啦!!!什么是弹性布局flex容器的六个属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content项目的属性orderflex-growflex-shrinkflex-basisflexalign-self什么是弹性布局flexible box,用盒状模型来提供最大的灵活性设为flex布局后display:flex,子元素的float,clear,vertival-align属性将失效fl原创 2020-08-25 14:34:17 · 75 阅读 · 0 评论 -
小张和html相关知识
小张,你真的学会html了吗DOCTYPE行内元素与块级元素行内元素行内元素注意的点块级元素display属性值页面导入样式对浏览器内核的理解DOCTYPE<!DOCTYPE>标签是一种标准通用标记语言的文档里类型声明——告诉标记语言解析器,应该用什么样的文档类型定义(DTD)来解析文档<!DOCTYPE>声明必须在HTML文档的第一行,位于<html>标签之前如果页面没有<!DOCTYPE>的声明,那么compatMode(document.com原创 2020-08-24 15:09:56 · 78 阅读 · 0 评论 -
小张和vue-router
参考资料router冲冲冲基本结构router-link to动态路由匹配响应路由参数的变化基本结构router-link to<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"><原创 2020-08-10 14:27:45 · 79 阅读 · 0 评论 -
小张与SCSS
SCSS的认识之路SCSS是什么Sass通过$去声明变量嵌套引入SCSS是什么Sass是CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能Sass通过$去声明变量$primary-color:#333;body{ color:$primary-color;}嵌套nav { ul { margin: 0; padding: 0; list-style: none; } li { displ原创 2020-08-04 10:17:51 · 140 阅读 · 0 评论 -
小张与水平垂直居中
水平垂直居中明确宽与高父元素relative+子元素absolute+top/bottom/right/left:0父元素relative+子元素absolute+top/left:50%+margin-top/left=-一半宽度不明确宽与高父元素relative+子元素absolute+top/left:50%+translateX(-50%)translateY(-50%)flex定位 justify-content:center+align-items:center明确宽与高父元素relativ原创 2020-07-24 11:29:24 · 78 阅读 · 0 评论 -
小张与三栏布局(多列等高)
实现三栏布局absolute+floattable和table-cellflex布局absolute+float<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小张与三列等高</title> <style> .box{ width:100%;原创 2020-07-23 17:35:53 · 76 阅读 · 0 评论 -
小张与SVG
什么是SVGSVG是指可伸缩矢量图形,用于定义网络的基于矢量的图形,使用XML定义图形,在放大或者改变尺寸不会有质量损失。SVG与Canvas的区别SVG是基于XML描述2D图形,而Canvas是通过js绘制2D图形SVG基于XML,意味着SVG DOM中每个元素都是可用的,可以为某个元素附加JS事件处理器。在SVG中,每个绘制的图形都被视为对象,如果SVG对象的属性发生变化,浏览器会自动重现图形。Canvas是逐像素进行渲染的,一旦绘制完成,浏览器不会再关注,如果位置发生变化,整个场景需要重新原创 2020-07-22 18:33:29 · 112 阅读 · 0 评论 -
小张与canvas
什么是Canvas< canvas >是一个图形容器,必须用脚本(通常js完成图形)绘制一个矩形<body> <canvas id="demo" width="200" height="100" style="border:1px solid red;"> </canvas> <script> var c=document.getElementById("demo");//获取<canvas>元素 var x=c.g原创 2020-07-22 17:44:04 · 88 阅读 · 0 评论 -
小张与css占满屏幕
CSS占满屏幕的方法给div设置定位通过设置html,body的宽高来让div充满屏幕给div设置定位position的五种属性static:默认值,没有属性absolute:绝对定位,相对于父级元素的定位relative:相对定位fixed:固定定位,相对于浏览器窗口inherit:从父级元素继承定位信息!!!除了static和inherit外,添加其他三种都可以实现窗口自适应<style> *{ margin:0; padding:0; } div{ wi原创 2020-07-22 15:43:43 · 70 阅读 · 0 评论