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-name key:钥匙 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可写为.3s transition-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/height 3.默认width是父级元素100% 4.块级元素里可以放块级元素和行内元素 文字内标签不能使用块级元素 行内元素: 1.一行可以显示多个 2.width/height设置无效 3.width默认内容的宽度 4.行内元素里只能放文字或其他行内元素 链接里不能再放链接 行内块元素： 1.一行可以显示多个 2.默认宽度是内容的宽度 3.可以设置width/height algin：图片对齐属性 center：图片和文字居中 top文字显示在图片的顶

原创 HTML盒子

盒子重要的四个元素 1.边框border 2.内容content 3.内边距padding 4.外边距margin padding内边距的值:上 右 下 左(为顺时针;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，感觉还不错