辣味蓓蓓酱-CSDN博客

原创 Vue框架常见指令

模板内容相关指令v-once该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次，不会随着数据的改变而改变v-html某些情况下，我们从服务器请求到的数据本身时一个HTML代码如果直接通过{{}}来输出，会将HTML代码一起输出而我们希望的是按照HTML格式进行解析，并且显示对应内容如果希望解析出HTML展示，可以使用v-html该指令后面往往跟上一个string类型会将string的html解析出来并且进行渲染<div id="app">

2021-02-07 22:02:30 231

原创 Vue中的MVVM

Vue中的MVVMView层视图层通常是DOM层主要作用是给用户展示各种信息Model层数据层数据可能是我们固定的死数据，更多的是来自服务器，从网络上请求下来的数据VueModel层视图模型层 View和Model沟通的桥梁实现了Data Binding，数据绑定，将Model的改变实时反应到View中实现了DOM Listener，DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data...

2021-02-04 23:00:10 400

原创 Vue初体验

Vue初体验<div id="app">{{message}}</div><script src=".../js/vue.js"></script><script> const app = new Vue({ el: '#app',//用于挂载要管理的元素 data: {//定义数据 message: 'hello,Vuejs' }})</scri.

2021-02-04 22:10:09 1145

原创 JavaScript字符串对象之根据字符返回位置、根据位置返回字符、字符串操作方法

一、根据字符返回位置字符串所有方法都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符串。方法名说明 indexOf('要查找的字符',开始的位置) 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 lastIndexOf() 从后往前找，只找第一个匹配的 var str = '改革春风吹满地，春天来了';console.log(str.indexOf('春')); //3console.log(str.inde

2020-12-27 16:47:23 1648

原创 JavaScript数组对象之检测、添加删除元素、排序、索引、转换为字符串

一、检测是否为数组//检测是否为数组//1.instanceof 运算符var arr = [];var obj = {};console.log(arr instanceof Array); //trueconsole.log(obj instanceof Array); //false//2.Array.isArray(参数)console.log(Array.isArray(arr)); //trueconsole.log(Array.isArray(obj)); //false

2020-12-27 10:14:44 179

原创 JavaScript 冒泡排序

2020-12-24 22:45:36 99

原创 JavaScript流程控制

流程控制的三种结构，分别是顺序结构、分支结构和循环结构。switch语句和 if else if语句的区别一般情况下，可以互换 switch...case语句通常处理case为比较确定值的情况，而if...else...语句更加灵活，常用于范围判断。 witch语句进行条件判断后执行到程序的条件语句，效率更高。而if...else语句有几种条件，就得判断多少次。当分支比较少时，if...else语句的执行效率比switch语句高。当分支比较多时，switch语句的执行效率比较高，而且结构

2020-12-24 22:39:47 48

原创 JavaScripte 输入输出语句、数据类型转换、逻辑中断、算数运算符优先级

一、输入输出语句方法说明 alert(msg) 浏览器弹出警告框 console.log(msg) 浏览器控制台打印输出信息 prompt(info) 浏览器弹出输入框，用户可以输入 prompt('请输入您的年龄');alert('弹出框');console.log('控制台输出');.length判断字符长度，空格也算var str = '123456';console.log(str.length);isNaN()用来判断一.

2020-12-21 16:12:45 297 1

原创 H5C3综合案例之旋转木马

效果图一、搭建HTML结构<setion> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></setion>二、CSS样式body { perspective: 1000p.

2020-12-19 10:46:43 223 1

原创 CSS3 之 3D转换——位移translate、透视perspective、旋转rotate、呈现transform-style

一、三维坐标系三维直角坐标系其实是指立体空间，立体空间是由3个轴共同组成的x轴：水平向右 x右边是正值，左边为负值 y轴：垂直向下 y下面是正值，上面是负值 z轴：垂直屏幕往外是正值，往里面是负值二、位移 translatetransform: translateX(100px)：仅仅是在x轴上移动 transform: translateY(100px)：仅仅是在y轴上移动 transform: translateZ(100px)：仅仅是在z轴上移动 transform: tra

2020-12-19 10:14:17 768

原创 CSS3 之动画animation——动画的基本使用方法及属性（内含综合案例）

动画（animation）是CSS3中具有颠覆性特征之一，可通过设置多个节点来精准控制一个或一组动画，常用来实现复杂的风化效果。相比较过渡，动画可以实现更多变化、更多控制、连续播放等效果。一、动画的基本使用制作动画分为两部：先定义动画再使用（调用）动画1. 用keyframes定义动画（类似定义类选择器）@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px;

2020-12-17 19:01:38 5578

原创 CSS3 之 2D转换——移动translate、旋转rotate、旋转中心点transform-origin、缩放scale

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果。一、二维坐标系2向右和向下变大二、2D转换之移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。1. 语法transform: translate(x,y); //或者分开写transform:translateX(n);transform:translateY(n);2. 重点定义2D转换中.

2020-12-17 16:01:26 5651

原创 CSS3新增属性——过渡

CSS3过渡transition:要过度的属性花费的时间运动曲线何时开始;属性：想要变化的CSS属性，宽度高度、背景颜色、内外边框都可以。如果想要所有属性都变化过渡，写一个all就可以。花费时间：单位是秒（必须写单位）比如0.5s 运动曲线：默认是ease（可以省略）何时开始：单位是秒（必须写单位）可以设置延迟出发时间，默认是0s（可以省略）<style> div { width: 200px; height: 100px;

2020-12-16 13:59:20 119

原创 CSS3的新特性——CSS3盒子模型

CSS3盒子模型css3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样计算盒子大小的方式就发生了改变可以分成两种情况：box-sizing:content-box盒子大小为width+padding+border（以前默认的） box-sizing:border-box盒子的大小为width如果盒子模型改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提是padding和bo

2020-12-15 18:25:34 328

原创 CSS3的新特性——新增选择器

属性选择器属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器。选择符简介 E[att] 选择器选择具有att属性的E元素 E[att="val"] 选择器选择具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性且值以val开头的E元素 E[att$="val"] 匹配具有att属性且值以val结尾的E元素 E[att*="val"] 匹配具有att属性且值含有val的E元素

2020-12-15 17:54:34 398

原创 HTML5的新特性——语义化标签、多媒体标签（video、audio）、input类型、表单属性

HTML5新增的语义化标签<header>：头部标签 <nav>：导航标签 <article>：内容标签 <setion>：定义文档某个区域 <aside>：侧边栏标签 <footer>：尾部标签注意：这种语义化标准主要是针对搜索引擎的这些新标签页面中可以使用多次在IE9，需要把这些元素转换为块级元素移动端更喜欢使用这些标签HTML5新增的多媒体标签新增的多媒体标签主要包含两个：音频：&l.

2020-12-15 15:46:44 621

原创 CSS常见布局技巧——margin负值运用、文字围绕浮动元素、三角强化

一、margin负值运用1. 消除两个盒子外边框重合1+1=2的效果。解决方法：让每个盒子margin往左侧移动-1px，正好压住相邻盒子边框。2. 解决鼠标经过盒子需要显示外边框时，右侧边框被右边盒子压住显示不出来问题解决方法：鼠标经过盒子时，如果盒子没有定位，给盒子添加相对定位；如果盒子有定位，则加z-index，提高盒子层级。ul li { position: relative; float: left; list-style: none;

2020-12-13 20:50:12 279

原创 CSS高级技巧之文字溢出省略号显示

一、单行文本溢出显示省略号需满足以下三个条件：.div { width: 150px; height: 80px; background-color: pink; /* 1.如果文字显示不开也必须强制一行内显示 */ white-space: nowrap; /* 2.溢出的部分隐藏起来 */ overflow: hidden; /* 3.文字溢出用省略号来显示 */ text-overflow: ellipsis;}

2020-12-13 18:33:35 87

原创 CSS高级技巧之垂直对齐方式vertical-align的应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。语法：vertical-align: baseline | top | middle | bottom 值描述 baseline 默认，元素放置在父元素的基线上 top 把元素的顶端与行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部 bottom .

2020-12-13 18:08:01 312

原创 CSS高级技巧之用户界面样式（鼠标样式cursor、取消轮廓线outline、防止拖拽文本框resize）

一、鼠标样式 cursor选择器 { cursor: pointer; }设置或检索在对象上移动的鼠标指针采用哪种光标形状。属性值描述 default 小白默认 point 小手 move 移动 text 文本 not-allowed 禁止二、轮廓线 outline给表单添加outline: 0; 或者 outline: none;样式之后，就可以去掉默认的蓝色边框。input { outline: none; }.

2020-12-13 17:22:00 512

原创 CSS高级技巧之三角制作

网页中常见的一些三角形，使用CSS直接画出来即可，不必做成图片或者字体图标。将长和宽设置为0，再给每条边上色，即可在一个正方形中画出四个以正方形中心为顶点的三角形。<div class="box1"></div><div class="box2"></div>.box1 { width: 0; height: 0; border-top: 10px solid pink; border-right: 10px.

2020-12-13 17:02:31 250

原创 CSS高级技巧之精灵图、字体图标的引入与追加

一、精灵图1. 为什么需要精灵图？一个网中会应用很多个小背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，没出现了CSS精灵技术（也成CSS Sprites）。精灵图如图所示，即把页面上所有小图片放在一张图中2. 精灵图的使用核心精灵图主要针对小的背景图片使用，就是把多个小背景图片整合到一张大图片中。这个大图片也称为sprites 精灵图.

2020-12-13 16:24:22 619

原创 CSS显示隐藏元素案例——土豆网视频显示隐藏遮蔽罩

鼠标不移动到图片上不显示遮蔽罩鼠标移动到图片上显示遮蔽罩和播放标志<div class="tudou"> <div class="mask"> <img src="images/tudou.jpg" alt=""></div>.tudou { position: relative; width: 44px; height: 320px; margin: 30px auto; backgroun

2020-12-13 11:07:08 686

原创元素的显示和隐藏（display、visibility、overflow）

类似网页广告，当点击关闭就不见了，但重新刷新页面，就会重新出现。本质：让元素在页面中显示或者隐藏。一、display 显示display属性用于设置一个元素如何显示。display: none; 隐藏对象 display: block; 转换为块级元素；显示元素display隐藏元素后，不再占有原来的位置。二、visibility 可见性visibility属性用于指定一个元素可见还是隐藏。visibility: visible; 元素可视 visibility: hidd

2020-12-13 10:46:54 963

原创网页布局总结——标准流、浮动、定位

大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列来布局网页。标准流：可以让盒子上下排列，垂直的块级元素显示就用标准流布局。浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。定位：定位最大的特点是有层叠的概念，就是让多个盒子前后叠压来显示。如果元素自由地在某个盒子内移动就用定位布局。...

2020-12-13 10:19:56 540

原创 CSS定位综合案例——淘宝焦点图布局制作

大盒子：tb-promo 淘宝广告，里面先放一张图片左右两个按钮：左箭头pre，右箭头next 底部小圆点：promo-nav，用ul做<div> <div class="tb-promo"> <img src="images/tb.jpg">  <a href="#" class="prev"> < </a> &lt...

2020-12-13 10:08:40 1093

原创 CSS 定位叠放次序（z-index）及定位其他拓展

定位叠放次序 z-index在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。语法：选择器 { z-index: 1; }数值可以是正整数、负整或0，默认是auto，数值越大，盒子越靠上。如果属性值相同，则按照书写顺序，后来居上。数字后面不能加单位。只有定位的盒子才有z-index属性。定位的其他拓展一、绝对定位的盒子居中加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现...

2020-12-12 19:25:11 370

原创 CSS定位——静态定位、绝对定位、相对定位、固定定位、粘性定位

定位一、为什么需要定位？定位可以让盒子自由地在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。标准流或浮动都无法快速实现。二、定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。1. 定位模式用于指定一个元素在文档中的定位方式。通过CSS的position属性来设置，有四个值值语义 static 静态定位.

2020-12-12 18:31:12 1248

原创 html+css网页开发之底部footer

1号盒子是通栏大盒子，高度为400px; 2号盒子版心水平居中 3号盒子版权copyright左对齐 4号盒子链接组links右对齐index.html<div class="footer"> /* 设置版心 */ <div class="w"> <div class="copyright"> <img src="imsges/logo.png" alt=""> ..

2020-12-12 11:06:04 500

原创 html+css网页开发之 banner+导航栏悬浮在大背景上

效果图如下：将上面效果图划分成四块：蓝色盒子为通栏大盒子灰色盒子为版心，要水平居中对齐紫色盒子在版心内，为subnav侧导航栏，要左对齐版心绿色盒子在版心内，为course课程表，要右对齐版心index.html<head> <link rel="stylesheet" href="style.css"></head><body><div class="bann.

2020-12-11 11:43:40 3296

原创 html+css网页开发之头部导航条（logo、导航栏、搜索框）

页面布局整体思路：确定页面的版心（可视区），测量可知。分析页面中的行模块，以及每个行模块中的列模块。一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。制作HTML结构。遵循先有结构，后有样式的原则。头部制作1号是版心盒子header 1200*42的盒子水平居中对齐版心盒子内包含2号盒子logo 版心盒子内包含3号盒子nav导航栏版心盒子内包含4号盒子search搜索框版心盒子内包含5号盒子user个人信息注意4个盒子都必须是浮动style.c..

2020-12-10 17:53:11 43129 4

原创 CSS传统网页布局之标准流、浮动（float）及清除浮动方法

传统网页布局的三种方式普通流（标准流）浮动定位一、标准流（普通流/文档流）标签按照规定好的默认方式排列。1. 块级元素独占一行，从上到下排列常用元素：div、hr、p、h1~h2、ul、ol、dl、form、table2. 行内元素会按照顺序，从左到右排列，碰到父元素边缘自动换行常用元素：span、a、i、em二、浮动1. 为什么需要浮动？很多布局效果标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型应用：可以让

2020-12-09 18:03:25 452 1

原创 CSS3圆角边框、盒子阴影、文字阴影

圆角边框border-radius属性用于设置元素的外边框圆角。语法：box-radius: length;例如：border-radius: 10px;border-radius: 50%;参数值可以为数值或百分比的形式如果是正方形，想要设置一个圆，把数值改为边长的一半即可，或者直接写为50% 如果是矩形，想要将左右两边设置为半圆，将数值设置为高度的一半该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角分开写：border-top-l..

2020-12-09 14:05:36 441

原创 CSS盒子模型（margin、border、padding）

CSS盒子模型页面布局三大核心——盒子模型、浮动、定位。一、网页布局的本质网页内的元素基本都是盒子模型利用CSS设置好盒子样式，拜访到相应位置往盒子里装内容二、盒子模型（Box Model）组成CSS盒子模型：封装HTML元素的盒子，它包括边框、外边框、内边距和实际内容。margin：外边距 border：边框 content：内容 padding：内边距1. 边框（border）border可以设置元素的边框，由三部分组成：边框宽度（粗细）、边框样式、边框颜

2020-12-08 17:07:05 891

原创 CSS的三大特性——层叠性、继承性、优先级

CSS的三大特性——层叠性、继承性、优先级目录CSS的三大特性——层叠性、继承性、优先级层叠性继承性优先级层叠性相同选择器设置相同样式，此时一个样式就会覆盖（层叠）另一个冲突样式。层叠性解决样式冲突问题。层叠性原则：样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。继承性字标签会继承父标签的某些样式，与文字相关样式。恰当使用继承性可简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-,font-,line

2020-12-06 14:28:05 178

qq_43623147的博客