JayaChou的博客

原创 addClass与className的区别

addClass:相当于追加类名,不影响原来的类名className:会覆盖元素原先的类名

原创 flex布局

弹性容器(Flex container)弹性子元素(Flex item)display: flex;flex-direction 属性指定了弹性子元素在父容器中的位置。row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。justify-content:内容对齐flex-start：内容内容空空空flex-end：

原创 3d

透视perspective单位是像素值越大表示视距越远，反之越小写在观察元素的父盒子上transform-style: preserve-3d让物体在空间3d呈现 flat默认值 2d平面呈现写在父盒子上

转载 前端引入网络上仓库图标

https://www.iconfont.cn自己看啊，右手就彳亍。

原创 html插入音乐或视频

audio:音乐video:视频controls:控制source:源src:音频路径autoplay: auto自动 play播放 自动播放loop：循环播放muted:静音preload: auto自动 metadata加载元数据 none不加载

原创 动画

@keyframes ad-namekey:钥匙frames:帧name:动画名字form:从哪里来;动画开始to:到哪里去;动画结束animation:动画(要给需要添加动画的元素)name(动画名字)+动画时间infinite 无限循环backwards默认值回到动画最初的状态forwards动画最后的状态课外科普:当一个大盒子里有几个小盒子想集体控制小盒子时div[class=“共同前缀”]元素百分之百居中大盒子内position定位top:50%;left:50%

原创 转换

transition: 效果延迟transition-property: 规定过渡的css属性名称属性: all（所以属性） color（颜色） transform（转换）等等transition-duration: 过渡花费的时间属性: 单位s（秒） 0不用写单位， 0.3s可写为.3stransition-timing-function: 过渡效果的时间曲线属性: ease(默认;慢-快-慢)linear：匀速ease-in：低速开始ease-out：低速结束ease-in-out：

原创 背景

background-color: 背景颜色background-imgaes:背景图片可插入多张图片例如:background-image:url(路径),url(路径);background-position：背景图像位置属性:关键字定位：top、right、bottom、left像素定位：第一个水平位置，第二个垂直位置百分比定位：X轴 ， Y轴repeat：背景图像将垂直和水平方法重复。默认效果repeat-x：水平位置重复背景图像repeat-y：垂直位置重复

原创 清除浮动的方法

1.给装div里的div再添加一个div。它的样式为 clear(清楚浮动):both;(不推荐使用)科普 clear：里的属性有left,right,both,none,inherit.当为left只为左浮动的目标起作用,就是取消左浮动当为right时只为右浮动的目标起作用,就是取消左浮动当为both时则是左右两边当为none时允许浮动元素出现在两侧优点：通俗易懂，方便缺点：添加无意义标签，语义化差2.给父元素加上样式overflow:auto或overflow:hidden(不推荐使用

原创 html定位

原创 html块级元素与行内元素

块级元素:1.独占一行2.可以设置width/height3.默认width是父级元素100%4.块级元素里可以放块级元素和行内元素文字内标签不能使用块级元素行内元素:1.一行可以显示多个2.width/height设置无效3.width默认内容的宽度4.行内元素里只能放文字或其他行内元素链接里不能再放链接行内块元素：1.一行可以显示多个2.默认宽度是内容的宽度3.可以设置width/heightalgin：图片对齐属性center：图片和文字居中top文字显示在图片的顶

原创 HTML盒子

盒子重要的四个元素1.边框border2.内容content3.内边距padding4.外边距marginpadding内边距的值:上 右 下 左(为顺时针;margin一样)

原创 CSS选择器

标签选择器类选择器id选择器

原创 Css样式

Css:层叠样式表(Cascading Style Sheets){web三个记在了html5和CSS3里面}也叫Css样式表、级联样式表。用来设置HTML页面中的文本内容、图片的外形、以及版面的布局和外观显示样式。CSS引入样式1.内联样式:用标签的style属性实验2.内部样式:用style标签实现3.外部样式:第一步:在CSS文件夹下新建,CSS文件,写样式第二部:在head里用<link />引入。href=链接.css文件路径rel:stylesheet当多个样

原创 htm5表格

<table border="值"><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>thead数据表头部分tr:table row表格的行th:表格的头td:table data 表格的数据,数据单元格tbod

原创 html表单

表单标签1、表单域<form>:表单域内的信息提交给服务器2、表单标签:<input/> <select></select> <textarea></textarea>文本域3、提示信息<input type="password">(密码框)<input type="radio">(单选框)<input type="checkbox">(多选框)<input type="but

原创 htm5简单的标签

html5怎么插入图片<img src=""/>单标签img图片标签，src属性图片地址(路径){必须要有}widht属性可以设置图片的宽（注意单位）hight属性可以设置图片的高（注意单位）html5怎么添加链接<a href="#"></a>a标签:连接标签，双标签href属性:指向链接地址,必须要有#代表空链接正确链接方式:http://www.xxx.com(xxx为每个网站的网址)...

原创 htm5需记代码

font-family—字体系列font-size—字体font-style—字体样式（normal正常）(italic斜体）(oblique偏斜体)line-height: normal—行高（normal正常）font-weight—粗细（normal正常）（bold粗细)（bolder特粗）（lighter细体）font-variant—变体(small-caps小型大写字母) （normal正常）color—颜色text-decoration—文本修饰(underline下

原创 htm5和CSS3的介绍

DW课结束，今天迎来了新的课程-----CSS3、html5，感觉还不错