2019
Momosaki
这个作者很懒,什么都没留下…
展开
-
Position定位
Position定位一、position属性二、z-index属性 一、position属性 position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 position属性常用的有四个值,值描述relative生成相对定位的元素,相对于其正常位置进行定位。(元素的位置通过 “left”, “t原创 2020-10-17 19:28:42 · 412 阅读 · 0 评论 -
实现旋转六面体(含动画的基本介绍)
实现旋转六面体(含动画的基本介绍)一、3d变换实现六面体二、动画实现旋转效果 为了实现旋转6面体,我们需要利用3d变换构建六面体和动画实现旋转 一、3d变换实现六面体 三层嵌套结构构建3d空间,最里层我们创建六个div分别表示六个面HTML <div class="d0"> <div class="d1"> <div class="dd">1</div>原创 2020-10-17 19:28:19 · 1453 阅读 · 0 评论 -
媒体查询、栅格系统与响应式布局讲解
媒体查询、栅格系统与响应式布局讲解一、什么是媒体查询二、栅格系统与响应式布局三、Less的使用 一、什么是媒体查询 媒体查询就是Media Query,即css3的@meida。关于其用法我们先来看下面的几行代码.d1 { height: 200px; loat: left;}@media only screen and (max-width:700px) { .col_sm_1 { width: 25%;原创 2020-10-17 19:27:53 · 1540 阅读 · 0 评论 -
文本样式,CSS字体和背景
文本样式,CSS字体和背景一、文本样式二、字体三、背景 一、文本样式 CSS的文本属性可以定义文本的外观。通过这些属性我们可以改变文本的颜色和字符间距等。 在设定样式之前我们需要了解一下,由于浏览器的默认样式会为页面中的元素添加一些padding和margin,具体这些是什么我们会在盒模型中了解到,在这里不作赘述。不过我们可以暂且认为他们是围在元素周围的一些空隙,他们会顶开其他元素,因此在style标签内最开始我们要这么设置 *{原创 2020-10-17 19:27:32 · 430 阅读 · 0 评论 -
元素浮动与清除浮动
元素浮动与清除浮动一、元素浮动二、清除浮动 我们知道,块元素具有的特点是具有完整的盒模型和自己占一行。当我们想让多个块元素同占一行时,我们通常使用的方法除了利用display属性之外,还可以利用float属性,使其浮动,达到同占一行的效果。 一、元素浮动 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 比如我们先对页面中添加三个div,对原创 2020-10-17 19:27:06 · 744 阅读 · 0 评论 -
JavaScript运算符
JavaScript运算符一、算术运算符运算符描述例子x 运算结果y 运算结果+加法x=y+275-减法x=y-235*乘法x=y*2105/除法x=y/22.55%取模(余数)x=y%215++自增x=y++56–自减x=y–54二、赋值运算符运算符例子等同于运算结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=原创 2020-10-17 19:28:58 · 234 阅读 · 0 评论 -
JavaScript数据类型详解
JavaScript数据类型详解 在对js的数据类型有一定的了解之后,我们还有一些对各类数据类型有一些要注意的点。对于不知道是什么类型的数据,我们可以利用关键字 typeof查看数据原型可以利用.__proto__ 查看最后一个属性 __proto__可以得知数据类型地原型一、字符串var str='123456'方法描述str.length获得数组长度。str.replace(‘被替换字符’,‘替换上的字符’)替换字符串中的某个字符,该方法执行后不改变原创 2020-10-02 13:34:48 · 154 阅读 · 0 评论 -
JavaScript入门(一)
JavaScript 入门一、基本使用二、数据类型 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 一、基本使用 在html文件中我们在script标签写入js部分 该标签可以写在head标签中,也可以写在body中的html部分的后面。在默认情原创 2020-10-02 13:34:18 · 100 阅读 · 0 评论 -
JavaScript入门(二)
JavaScript入门(二)一、命名 就像css一样,js也有自己的命名规范。 由于+号在js中可以进行字符串之间的的运算,而-号是js命名中不支持的字符,因此这两个字符都不可以出现在命名的名称中。不过下划线’_'可以出现在命名名称中的任意位置,包括开头。 其他时候我们会遵循驼峰式命名法。 ECMAScript 规范中标识符采用驼峰大小写格式,驼峰命名法由小(大)写字母开始,后续每个单词首字母都大写。根据首字母是否大写,分为两种方式:1、Pascal Case 大驼峰式命名法:首字母大原创 2020-10-02 13:33:36 · 93 阅读 · 0 评论 -
HTML入门结构与语法
结构与语法一、结构1、文档声明2、head标签二、常用标签及其用法1、常用标签2、图像标签及文件路径一、结构 首先我们先来了解一下html文件的基本框架<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic原创 2020-10-02 13:32:58 · 162 阅读 · 0 评论 -
HTML高级标签
HTML高级标签一、表格标签二、表单标签三、容器标签 一、表格标签 表格标签呈现一种嵌套关系,最外层是table标签,而我们的表格的内容是写在tbody标签内的。其中我们用tr标签创建行也就是tr标签内部的内容在同一行,后面的tr标签同理也是各占一行,依次排列下去。 我们知道,表格都有一行用于说明该行或者该列是什么数据的内容,这部分我们成为表格头,用th标签将其分隔开。后面的每一行中的每一项我们用td标签来分开。默认效果中th标签内的字要比tr标签内的粗,或者说字重比较大原创 2020-10-02 13:32:12 · 433 阅读 · 0 评论 -
CSS选择器一
CSS选择器(一)一、五种基本选择器1、标签选择器2、class 类名选择器3、id选择器4、通配符选择器5、属性选择器 一、五种基本选择器选择器 前面我们给元素添加样式,也就是字体颜色和元素宽高时,我们是直接写在标签内的。这种写在标签内的style我们称为行间样式。而且行间样式的优先级高于选择器的优先级。优先级就是实现样式的忧先顺序,优先级高的会覆盖掉优先级低的样式。 除此之外,我们还有其他实现样式变化的写法,内联样式表和外联CSS。我们下面先来介绍原创 2020-10-02 13:31:33 · 274 阅读 · 0 评论 -
CSS选择器二
CSS选择器(二)二、五种派生选择器1、后代选择器2、子元素选择器3、相邻兄弟选择器4、伪类选择器5、伪元素选择器 二、五种派生选择器派生选择器与五种基本选择器的一大区别是,派生选择器是通过依据元素在其位置的上下文关系来定义样式。这里称其为派生选择器是依循了CSS2中的叫法。在CSS1中,这种选择器被称为上下文选择器。这两种叫法都是指向那些依据上下文关系来定义样式的选择器。本文接下来统一称呼为派生选择器。而且很多时候我们都可以通过与普通家族关系类比原创 2020-10-02 13:30:48 · 223 阅读 · 0 评论 -
CSS盒模型
CSS盒模型一、盒模型介绍二、盒模型阴影三、display属性四、补充细节前面我们介绍标签时介绍过,标签元素可以分为块元素,内联元素和内联块元素。div属于块元素的一种,他的特点是具有完整的盒模型。 一、盒模型介绍为了方便解释,我们先创建一个div元素CSS .d1{ width: 200px; height: 200px; background-color: red;原创 2020-10-02 13:30:09 · 114 阅读 · 0 评论 -
CSS过渡和二维转换
CSS过渡和二维转换一、过渡二、二维转换 一、过渡 过渡指的是处理一个状态到另一个状态的过程。过渡属性处理了元素从一个样式变为另一个样式的逐渐改变的过程。我们一般使用transition属性去实现过渡效果。 需要注意的是,过渡与动画不同,过渡只处理一次变化 transition有以下语法属性描述transition简写属性,用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的 CSS 属性的名称。原创 2020-10-02 13:29:26 · 175 阅读 · 0 评论 -
3D转换
3D转换实现3d转换我们需要构建嵌套关系,创建3d空间。 <div class="wrap"> <div class="wrap-in"> <div class="d1">3d转换</div> </div> </div>对这三个嵌套关系的div,我们需要在css中定义一些样式 .wrap{ <!-- 视距 --&g原创 2020-10-02 13:27:50 · 299 阅读 · 0 评论