Vue的学习笔记(下篇)

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

前面几天我们已经分享了Vue的学习笔记(中篇)和Vue的学习笔记(上篇),今天我们一起来看看下篇。

二、Vue的v-for循环

(一)v-for循环普通数组

1.在data中定义普通数组;

data(){
return{
list: [1, 2, 3, 4, 5]
}
}

2.在html中使用v-for指令渲染;

<p v-for="(item, i) in list">索引值是:{{i}} --- 每一项的值是:{{item}}</p>

3.效果图如下图:

Vue的学习笔记(下篇)

(二)v-for循环对象数组

1.在data 中定义对象数组;

data(){
return{
        list: [
  { id: 1, name: 'zhan1' },
  { id: 2, name: 'zhan2' },
  { id: 3, name: 'zhan3' },
  { id: 4, name: 'zhan4' }
]
}
}

2.在html中使用v-for指令渲染:

<p v-for="(user, i) in list">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引值是:{{i}}</p>

3.效果图如下图:

Vue的学习笔记(下篇)

(三)v-for循环对象,在遍历对象的身上的键值对时候,除了有val、key,在第三个位置还有一个索引值。

1.在data定义一个对象;

data(){
return{
user: {
        id: 1,
        name: 'zhan',
        gender: '男'
   }
}
}

2.在html中使用v-for指令渲染:

<p v-for="(val, key, i) in user">值是:{{ val }} --- 键是:{{key}} -- 索引值是:{{i}}</p>

3.效果图如下图:

Vue的学习笔记(下篇)

(四)v-for迭代数字 ###在in后面我们放过普通数组、对象数组、对象,还可以放数字,如果使用v-for迭代数字的时候,前面的count值的从1开始。

1.在html中使用v-for指令渲染:

<p v-for="count in 5">这是第 {{ count }} 次循环</p>

2.效果图如下图:

Vue的学习笔记(下篇)

(五)v-for循环中key属性的使用

v-for 循环的时候,key 属性只能使用number获取string,在key使用的时候,必须使用v-bind属性绑定的形式,指定key的值,在组件中,使用v-for循环的时候,如果有v-for的同时,指定唯一的字符串/数字类型:key的值。

1.在data 中定义对象数组;

data(){
return{
        list: [
  { id: 1, name: 'zhan1' },
  { id: 2, name: 'zhan2' },
  { id: 3, name: 'zhan3' },
  { id: 4, name: 'zhan4' }
]
}
}

2.在html中使用v-for指令渲染代码如下图:

Vue的学习笔记(下篇)

3.效果图如下图:

Vue的学习笔记(下篇)

三、Vue过滤器的基本使用

1.首先定义一个 Vue 全局的过滤器,名字叫做msgFormat,字符串的replace方法的第一个参数,除了可以写一个字符串之外,还可以定义一个正则。

2.在js的代码中,如以下代码:

Vue.filter('msgFormat', function (msg, arg, arg2) {
  return msg.replace(/day/g, arg + arg2)
})


Vue.filter('test', function (msg) {
  return msg + '========'
})

3.在html代码中,如以下代码:

<p>{{ msg | msgFormat('我', '123') | test }}</p>

4.在data中,定义一个msg:

data(){
return{
msg:'the day is cloudless'
}
}

5.效果图如下图:

Vue的学习笔记(下篇)

四、总结

1.vue中的v-for循环有普通数组、对象数组、对象、迭代数字、key属性的使用,这些用法的详解,希望对大家有所帮助。

2.vue过滤器的基本使用局部过滤器优先于全局过滤器被调用,一个表达式可以使用多个过滤器,过滤器之间需要用管道符“|”隔开,其执行顺序从左往右。

3.这些代码比较简单,希望对你有帮助!

Vue的学习笔记(中篇)

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:Vue的学习笔记(上篇)。这篇文章我们继续捋一捋~

二、Vue中使用样式class

第一种使用方式,传递一个数组,这里的class需要使用v-bind的数据绑定;

<h1 :class="['thin', 'italic']">hello world1!</h1>

第二种使用方式,在数组中使用三元表达式;

<h1 :class="['thin', 'italic', flag?'active':'']">hello world2!</h1>

第三种使用方式,在数组中使用对象来代替三元表达式,来提高代码的可读性;

<h1 :class="['thin', 'italic', {'active':flag} ]">hello world3!</h1>

在为class使用v-bind绑定对象时候,对象的属性是一个类名,由于对象的属性可以带引号,也可以不带,属性的值是一个标识符;

<h1 :class="classObj">hello world!</h1>

在css的样式代码如下图:

在js的代码如下图

效果图如下图:

三、Vue中样式style:vue中样式是动态绑定style,对象是不需要键值对的集合。

第一种使用方式是将键值对的对象写在data中,直接的动态绑定;

<h1 :style="styleObj1">The first H!!</h1>

第二种使用方式是多个键值对对象,使用数组方式,依次写入;

<h1 :style="[ styleObj1, styleObj2 ]">The first H1!!</h1>

在js的代码如下图:

效果图如下图:

四、v-if和v-show的使用

v-if的特点:每次都会重新删除或创建元素,有较高的切换性能消耗。

v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式,有较高的初始渲染消耗。

v-if和v-show的使用:

如果元素涉及到频繁的切换,最好不要使用 v-if, 而是使用 v-show,如果元素可能永远也不会被显示出来被用户看到,则使用v-if。

1.在html代码中,如以下的代码:

<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

2.在data中定义一个flag,如以下的代码;

data(){
      return{
        flag: false,
  }
}

3.效果图如下图:

五、总结

1.在vue中使用样式class,有三种方式传递一个数组、数组中的三元表达式、使用对象来代替三元表达式,在为class使用v-bind绑定对象,对象属性是一个类名,属性的值是一个标识符。

2.在vue中使用样式style,vue中样式动态绑定style,对象是不需要键值对的集合,有两种方式将键值对的对象写在data中直接的动态绑定、多个键值对对象,使用数组方式,依次写入。

3.vue-show本质是标签display设置为none,控制隐藏,vue-if是动态的向DOM树内添加或者删除DOM元素。

4.代码比较简单,希望对你有帮助!

Vue的学习笔记(上篇)

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、什么是v-model指令?

v-model指令是:它负责监听用户输入事件,从而更新数据,并对一些极端场景进行一些特殊的处理。使用v-model指令,可以实现表单元素和Model中数据的双向数据绑定,v-model只能运用在表单元素中。

怎么使用v-model指令?

1、首先创建一个组件,在src/components/文件夹下新建一个day01.vue。

2、在day01.vue写p元素和input元素,在input元素使用v-model。

3、在App.vue导入这个day01.vue组件,然后在template中加入day标签。

代码如下图所示:

Vue的学习笔记(上篇)

效果图:

Vue的学习笔记(上篇)

三、使用v-model实现简单的加减乘除计算器

1、在template里实现页面布局;

2、在data定义n1和n2表示第一个数和第二个数,result表示结果、opt表示加减乘除;

3、在methods里处理自定义的方法,使用swith表达式实现加减乘除。

代码如下图所示:

Vue的学习笔记(上篇)

Vue的学习笔记(上篇)

效果图:

Vue的学习笔记(上篇)

四、实现跑马灯的效果

1、 给跑马灯滚动按钮,绑定一个点击事v-on或@;

2、 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后调用字符串的 substring 来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置;

3、为了实现点击下按钮,自动截取的功能,放到一个定时器中去;

代码如下图所示:

Vue的学习笔记(上篇)

Vue的学习笔记(上篇)

效果图:

Vue的学习笔记(上篇)

五、总结

1、使用v-model 指令,实现表单元素和 Model 中数据的双向数据绑定,v-model只能运用在表单元素中。使用v-model实现简单的计算器,对v-model进一步的了解。

2、代码比较简单,希望可以帮助到你。

一篇文章带你了解css z-index(重叠顺序)

div cssz-index层重叠顺序

div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。

从基础语法到应用案例教程讲解学习z-index。

一、z-index语法与结构

z-index 跟具体数字

div{
  z-index:100
}

注意:z-index的数值不跟单位。

z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。

二、z-index使用条件

z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常CSS让不同的对象盒子以不同顺序重叠排列,CSS就是要z-index样式属性。

三、案例

1. z-index重叠顺序案例

为了方便观察,设置3个DIV盒子,分别设置不同css背景颜色,设置相同CSS高度、CSS宽度。分别设置背景颜色)为黑色、红色、蓝色。CSS width为300px,css height为100px。

css代码(没加z-index属性)


<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 300px;
                height: 100px;
                position: absolute;
            }

                .divcss5-1 {

                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .divcss5-2 {

                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .divcss5-3 {

                background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

CSS代码(加上z-index属性后) :

<style>
            .div css5 {
                position: relative;
            }

            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 200px;
                height: 100px;
                position: absolute;
            }

            .div css5-1 {
                z-index: 10;
                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }

            .div css5-2 {
                z-index: 20;
                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }

            .div css5-3 {
                z-index: 15;
              background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

html代码

 <div class="divcss5-1"></div>
 <div class="divcss5-2"></div>
 <div class="divcss5-3"></div>

没加的效果:

一篇文章带你了解css z-index(重叠顺序)

加上z-index属性效果:

一篇文章带你了解css z-index(重叠顺序)

2. 案例说明

三个盒子均都使用了绝对定位属性position样式,并且设置相同的高度和宽度样式。为了便于观察CSS使用left、right属性并赋予不同值,让其错落有致。

  • Div css5-1 盒子背景为黑色, z-index:10
  • Div css5-2 盒子背景为红色, z-index:20
  • Divcss5-3盒子背景为蓝色 , z-index:15

为可以看见第一个盒子z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。

四、总结

本文基于CSS基础,介绍了如何使用z-index重叠顺序样式,在实际DIV+CSS布局时候CSS需要绝对定位样式,并且可以使用left、right进行定位,通过不同z-index值实现层重叠顺序排列。代码很简单,希望能够帮助你学习。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS clear both清除浮动

一、前言

CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,就用clear样式属性即可实现。

二、clear语法与结构

1. clear语法

clear : none | left|right| both

2. clear参数值说明

属性描述none允许两边都可以有浮动对象bot不允许有浮动对象left不允许左边有浮动对象right不允许右边有浮动对象

3. clear解释

该属性的值指出了不允许有浮动对象的边情况,对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

4. css结构

div {
                clear: left
            }


            div {
                clear: right
            }


            div {
                clear: both
            }

三、div clear常用的情况

最常用是使用clear:both清除浮动。

比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候就需要clear:both清除浮动。

四、案例

1. 案例说明

设置一个css宽度(css width)为500px; 盒子(div ),css边框(css border)为红色,css背景(css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度、css height为150px。

这样来观察案例效果,看浮动产生并使用clear清除浮动。

css代码:

.div css5 {
                width: 500px;
                background: #000;
                border: 1px solid #F00;
                padding: 10px
            }


            .div  css5_left,
            .div  css5_right {
                border: 1px solid #FFF;
                background: #999;
                width: 200px;
                height: 150px
            }
            /* css注释:这里为了截图分别,对css代码换行 */


            .div  css5_left {
                float: left
            }
            /* css注释:设置浮动靠左 */


            .div  css5_right {
                float: right
            }
            /* css注释:设置浮动靠右 */

html代码片:

<div  class="div css5">
            <div  class="div css5_left">float left盒子</div   >
            <div  class="div css5_right">float right盒子</div   >
        </div>

案例效果截图

一篇文章带你了解CSS clear both清除浮动

2. 清除浮动方法

在css代码中加入CSS代码:

.clear{ clear:both}

Html代码中“.div css5”盒子*结束标签前加入代码:

<div  class="clear"></div>
一篇文章带你了解CSS clear both清除浮动

清除浮动效果图:

一篇文章带你了解CSS clear both清除浮动

五、总结

本文基于Html基础,介绍了在实际开发中,可以使用clear可以清除float产生的浮动。在使用clear样式对象加入位置,只需要在此对象div标签结束前,加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动。采用代码加截图的方式,希望能够更好的帮助你学习。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

手把手教你用Javascript制作随机星星效果图

一、前言

在浏览一些图片网站的时候,经常会看到很多的漂亮的星空图,比如,下面的图片。其实这种星星图片的效果,也可以通过html+css样式和js的方式来实现。今天教大家如何实现星星图的效果。

二、项目准备

软件:Dreamweaver

三、实现的目标

每次刷新产生随机的星星个数。显示画布上。

四、项目实现

1. 创建canvas画布

<body>
    <canvas id='canvas'></canvas>
</body>

2. 添加css样式。

给canva 画布加上边框,方便观察。

<style type="text/css">
    canvas{
        border:2px solid #f00;
}
</style>

3.添加js样式

3.1 设置canvas画布大小 ,定义需要变量。

<script type="text/javascript">
     var _canvas=document.getElementById("canvas")
    _canvas.width=500;
    _canvas.height=500;
var r,g ,b,a;
</script>

3.2 产生随机圆。

for (var j = 0; j < 150; j++) {
        arc.x=Math.floor(Math.random()*_canvas.width);
        arc.y=Math.floor(Math.random()*_canvas.height);
        arc.r=Math.floor(Math.random()*31+10);
        r=Math.ceil(Math.random()*256);
        g=Math.ceil(Math.random()*256);
        b=Math.ceil(Math.random()*256);
        a=Math.random();


        darw();
}

3.3 定义draw()方法,通过画星星公式,将圆形转换成星星状 for 循环产生随机位置星星。

如何画星星?(公式解析)(图片来源百度)

星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星。

/* 随机产生星星*/
for (var i = 0; i < 5; i++) {


        _ctx.lineTo(Math.cos((18+72*i)/180*Math.PI)*arc.r+arc.x, -Math.sin((18+72*i)/180*Math.PI)*arc.r+arc.y);


         _ctx.lineTo(Math.cos((54+72*i)/180*Math.PI)*arc.r/2+arc.x, -Math.sin((54+72*i)/180*Math.PI)*arc.r/2+arc.y);
     
}

3.4 随机产生颜色。

Math函数随机产生0-225的RGB值。

/* 随机颜色*/ 
    _ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")"; 
    _ctx.fill();
        _ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
      _ctx.stroke();
      }

3.5. 调用draw()方法实现功能。

darw();

五、效果展示

1、点击f12运行到浏览器

2、每次刷新网页,随机产生不一样的星星和随机颜色。

六、总结

  1. 本项目利用canvas画布,实现星星图的效果,以及在运用javascript产生星星效果时,遇到的一些难点进行了分析及提供解决方案。
  2. 欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
  3. 代码很简单,希望对你有所启发。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————

往期精彩文章推荐:

手把手用Python教你如何发现隐藏wifi

手把手教你用Python做个可视化的“剪刀石头布”小游戏

手把手用Python网络爬虫带你爬取全国著名高校附近酒店评论

一篇文章带你了解SVG 转换知识

SVG 转换在SVG图像中创建的形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。

一、转换简单示例

例:

<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

   <rect x="50" y="50" height="110" width="110"
         style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)">
   </rect>
   <text x="70" y="100" transform="translate(30) rotate(45 50 50)"
   >nhooo.com</text>
</svg>

运行效果:

注:

元素的transform 和 的transform属性。

该属性指定要应用于形状的变换。在此示例中,应用了平移和旋转。两者都将在本文后面解释。

二、哪些元素可以转换?

可以将变换应用于所有SVG形状。还可以将变换应用于 元素,从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。

三、转换函数

转换函数不会自行转换SVG形状,而是会转换该形状的基础坐标系。因此,即使宽度以倍数显示,宽度20乘以2的形状在逻辑上仍具有20的宽度。

1. 移动 translate()

translate()函数移动形状。将x 和 y 值传递给translate()的函数。

translate(50,25)

将形状沿x轴移动50个单位,并沿y轴移动25个单位。显示了两个位置相等且大小相等的形状,有无平移。

例:

<svg width="500" height="150">
<rect x="20" y="20" width="50" height="50" style="fill: #cc3333" />
<rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)">
</rect>
</svg>

运行效果:

与第一个(红色)形状相比,第二个(蓝色)形状沿x轴移动75个单位,沿y轴移动25个单位。

2. 旋转 rotate()

rotate()函数围绕点0,0旋转形状。

显示一个矩形(轮廓)和旋转15度后的相等矩形(实心)。

<svg width="500" height="150">
<rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;"></rect>

<rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)"></rect>
</svg>

运行效果:

如果要绕除0,0以外的其他点旋转,则将该点的x和y坐标传递给transform函数。

显示了一个非旋转的矩形(轮廓)和一个相等的矩形(实心)围绕其中心旋转15度。

例:

<svg width="500" height="150">
<rect x="20" y="20" width="40" height="40"
     style="stroke: #3333cc; fill:none;"
      ></rect>

<rect x="20" y="20" width="40" height="40"
     style="fill: #3333cc"
     transform="rotate(15, 40, 40)"
      ></rect>
</svg>

运行效果:

所有旋转都是顺时针旋转,其度数从0到360。如果要逆时针旋转,请将负的度数传递给rotate()函数。

3. 缩放 scale()

3.1 scale()函数简介

scale()函数按比例放大或缩小形状。scale()函数可缩放形状尺寸及其位置坐标。因此,以20乘以2的比例缩放的宽度为20且高度为30的矩形位于20,20处,其宽度为40且高度为60。

scale()函数还可以缩放形状的笔触宽度。

3.2 案例

显示了一个位于10,0处,宽度为20且高度为20的矩形(蓝色),以及一个等比例的矩形(黑色),其缩放比例为2。

<svg width="500" height="150">
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect>

<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"></rect>
</svg>

运行效果:

注意

矩形的位置和大小是如何缩放的。

可以在x轴和y轴上按其他因子缩放形状。为此,可以向scale()函数提供x-scale和y-scale参数。

如下所示:

scale(2,3);

将沿x轴将形状缩放2倍,沿y轴将形状缩放3倍。

例:

<svg width="500" height="150">
<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect>

<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)"></rect>
</svg>

运行效果:

注意:

缩放后的矩形(黑色)的笔划宽度也是如何缩放的,并且在x轴和y轴上的缩放比例不同。

4. 偏斜 skew()

skewX()和skewY()函数偏斜x轴和y轴。实际上,这些函数会根据以度为单位指定的某个角度来倾斜给定的轴。

显示具有不同skewX()值的矩形的一些示例。

<svg width="500" height="150">
      <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />

      <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" />
      <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" />
      <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" />
    </svg>

运行效果:

skewX()函数使垂直线看起来像是按给定角度旋转了。

因此,skewY()函数使水平线看起来像是旋转了给定角度。

例:

<svg width="500" height="150">
      <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />

      <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" />
      <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" />
      <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" />
</svg>

四、总结

本文基于HTML基础,介绍了图像的转换。详细的介绍了如何运用转换函数,进行图像移动、缩放、转动、拉长或拉伸等一系列操作。通过案例的分析,丰富的效果图,能够让读者更好的理解。

希望能够帮助你更好的理解SVG中图像转换。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————

往期精彩文章推荐:

一篇文章带你了解CSS基本用法和选择器知识

前言

相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是,Css相当于Html的一个美化装置,所以它必须依赖于Html才能发挥作用,那么今天我们就来深入了解下它吧。

一、如何使用CSS

要想使用Css来增加Html的美观,有三种方式:

1).头部文件中定义

<style>
    标签的Css属性
</style>

2).导入CSS文件

#创建一个Css文件,里面写入样式,然后导入
<link rel="stylesheet" type="text/Css" href="1.Css">

3).直接在标签中定义

<div style='width:120px;height:60px;background-color:red'></div>Css注释
注:与Html 不同,它的注释方式是:/* Css语句*/

二、CSS的选择器

为什么一开始要讲选择器了,因为我们要想精确修改的Html中的某个元素的属性,就必须使用选择器,它可以通过选择器定位到某个元素上然后修改元素的样式。

1).id和class选择器

id选择器必须现在标签中的定义,然后在在头部标签的style标签中用“#”来表示:

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css"> 
     #dv{
       background: red 更改div的背景颜色为红色
     }
</style>
</head>
<body>
<div id='dv'>fd</div> 定义一个id为dv的div
</body>
</Html>

class选择器和id选择器差不多,只不过class选择器用”.“来表示:

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     .dv{
       background: red
     }
</style>
</head>
<body>
<div class='dv'>fd</div>
</body>
</Html>

2).元素选择器

就是指直接声明标签名为选择器,然后更改样式

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     div{
       background: red
     }
</style>
</head>
<body>
<div>fd</div>
</body>
</Html>

或者声明所有标签名为选择器

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
    Htmlheadbodydiv{
       background: red
     }
</style>
</head>
<body>
<div>fd</div>
</body>
</Html>

也可以使用元素加选择器更加精确的定位到该元素

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
   div#er{
       background: red
     }
</style>
</head>
<body>
<div id='df'>fd</div>
<p>fhsjak</p>
<div id='er'>re</div>
</body>
</Html>

3).后代选择器

访问一个元素内的其它元素,可以是元素内的任意元素

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     div span{
       background: red
     }
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
</body>
</Html>

4).子元素选择器

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     div>p{
       background: red
     }
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
</body>
</Html>

5).兄弟选择器

位于元素的下一个元素,不在元素内

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     div+big{
       background: red
     }
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
<big>borther</big>
</body>
</Html>

6).伪类选择器

伪类选择器可分为三类

1)).锚伪类,用于检测鼠标的悬停状态。

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     a:link{    /* 未访问的链接 */
       background: red
     }
     a:visited{    /* 已访问的链接 */
      background: green
     }
     a:hover{  /* 鼠标移动到链接上 */
      background: blue
     }
     a:active{  /* 选定的链接 */
      background: yellow
     }
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</Html>
注:a:hover必须置于a:link和a:visited 之后,才是有效的。a:active必须被置于a:hover 之后,才是有效的。

2)). :first-child伪类

匹配第一个匹配到的标签

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
     p:first-child{  匹配第一个p标签
       background: red
     }
     div:first-child{ 匹配第一个div标签
      background: blue
     }
</style>
</head>
<body>
<div id='dv'>
<p class='fd'>fdaf
<div id='gfd'>grerg</div>
</p>
<div class='gf'>fsdjkfhkj
<a href="https://www.baidu.com">baidu</a>
</div>
</div>
</body>
</Html>

3)). :lang伪类

<Html>
<head>
  <title>Css应用</title>
  <style type="text/Css">
  q:lang(hw)  短引用利用伪类
   {
   quotes: "^" "^"
   }
</style>
</head>
<body>
<div id='dv'>
<p>hw<q lang="hw">任性的90后boy</q></p> 必须要用短引用
</div>
</body>
</Html>
<Html>
<head>

7).通用选择器

将样式应用到所有的元素中

*{
  background:red
}

参考文档:W3C官方文档(CSS篇)

三、总结

这篇文章主要介绍了CSS的基本用法和选择器的基础知识。通过对CSS的学习,相信大家应该能做出许多华丽绚烂的特效了吧,CSS的确是一个很强大的东西。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章教会你使用HTML5加载音频和视频

【一、前言】

HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 <audio> 和 <video> 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

【二、嵌入视频】

下面是在 Web 页面中嵌入视频文件最简单的形式:

 <video src="img/sounds/mu04.mp3"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

  1. Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。
  2. mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 <source> 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/3.mp4" type="video/ogg" />
       <source src="img/sounds/3.mp4" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

【三、Video 属性规范】

HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:(参考百度)

【四、嵌入音频】

HTML5 支持的 <audio> 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

<audio src="img/sounds/mu04.mp3" controls autoplay>
    Your browser does not support the <audio> element.   
</audio>

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 <source> 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

<!DOCTYPE HTML>
<html>
<body>
   <video  width="300" height="200" controls autoplay>
       <source src="img/sounds/mu04.mp3" type="video/ogg" />
       <source src="img/sounds/mu04.mp3" type="video/mp4" />
       Your browser does not support the <video> element.
   </video>
</body>
</html>

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

【五、JavaScript 处理媒体事件】

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

下面是一个允许播放给定视频的示例:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="img/sounds/3.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>555555555
   </form>
</body>
</html>

【六、总结】

本文基于html基础,介绍了对音频<audio>标签<video>标签,如何嵌入视频等一系列操作。进行了详细的一些讲解,通过丰富的案例让大家能够更好的去理解HTML的用法,希望可以帮助大家更好的学习。

可以参数自己根据教程,自己加入一些属性,运行看看效果,会有意想不到的收获。

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐:

一篇文章带你了解CSS3按钮知识

在实际开发中,按钮的应用是必不可少。使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式。

一、平面样式CSS按钮

平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势。,这些的平面样式按钮效果很好看。

以下代码是按钮处于正常的情况下的状态。

例:

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
一篇文章带你了解CSS3按钮知识

1. 按钮颜色

颜色:Green ,Blue, Red, Gray ,Black。

可以使用 background-color 属性来设置按钮颜色。

.button1 {
                background-color: #4CAF50;
            }

            /* Green */
            .button2 {
                background-color: #008CBA;
            }

            /* Blue */
            .button3 {
                background-color: #f44336;
            }

            /* Red */
            .button4 {
                background-color: #FFC0CB;
                color: black;
            }

            /* Gray */
            .button5 {
                background-color: #555555;
            }
一篇文章带你了解CSS3按钮知识

2. 按钮大小

尺寸10px ,12px ,16px 20px , 24px。

可以使用 font-size 属性来设置按钮大小:

例 :

.button1 {
                font-size: 10px;
            }

            .button2 {
                font-size: 12px;
            }

            .button3 {
                font-size: 16px;
            }

            .button4 {
                font-size: 20px;
            }

            .button5 {
                font-size: 24px;
            }
一篇文章带你了解CSS3按钮知识

3. 圆角按钮

弧度:2px ,4px ,8px ,12px ,50%。

可以使用 border-radius 属性来设置圆角按钮:

例:

.button1 {
                border-radius: 2px;
            }

            .button2 {
                border-radius: 4px;
            }

            .button3 {
                border-radius: 8px;
            }

            .button4 {
                border-radius: 12px;
            }

            .button5 {
                border-radius: 50%;
            }
一篇文章带你了解CSS3按钮知识

二、边框样式CSS按钮

边框样式按钮与平面按钮属于同一类。唯一的区别是,将使用边框来代替平面按钮所使用的背景颜色。以下代码是按钮处于正常的情况下的状态。

1. 按钮边框颜色

绿 蓝 红 灰 黑

可以使用 border 属性设置按钮边框颜色:

例:

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
一篇文章带你了解CSS3按钮知识

2. 鼠标悬停按钮

可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 可以使用 transition-duration 属性来设置 “hover” 效果的速度:

例:

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

鼠标放在对应的色块上,显示相对应的颜色。

一篇文章带你了解CSS3按钮知识

3. 按钮阴影

阴影按钮 鼠标悬停后显示阴影。

使用 box-shadow 属性来为按钮添加阴影。

例:

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识

4. 按钮宽度

宽度:250px,50% ,100%

默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。

CSS 实例

.button1 {
  width: 250px;
}
.button2 {
  width: 50%;
}
.button3 {
  width: 100%;
}
一篇文章带你了解CSS3按钮知识

三、按钮组

1. 移除外边距并添加 float:left 来设置按钮组:

一篇文章带你了解CSS3按钮知识

CSS 实例

.button {
    float: left;
}

2. 带边框按钮组

一篇文章带你了解CSS3按钮知识

可以使用 border 属性来设置带边框的按钮组:

CSS 实例

.button {
    float: left;
    border: 1px solid green
}

四、按钮动画

1. 按样式CSS按钮

这些“按下”式按钮结合了一些平面设计和假象,让用户感觉他们实际上按下了按钮。当用户按下它时,它似乎陷入了页面。它的实现需要用到阴影来设置,使其具有3D弹出外观。以下代码是按钮处于正常的情况下的状态。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
.pm button {
   width: 200px;
   height: 100px;
 color: #fff;
 background-color: #6496c8;
 border: none;
 border-radius: 15px;
 box-shadow: 0 10px #27496d;
}
</style>
</head>
<body>
  <div class="pm"> <button class="button">Click Me</button>
  </div>
</body>
</html>   
一篇文章带你了解CSS3按钮知识
一篇文章带你了解CSS3按钮知识

五、总结

本文基于Html基础,主要介绍了Html中按钮组件的使用,对于按钮中需要用到的做了详细的讲解,用丰富的案例 ,多种样式展示,帮助大家去更好的理解 。

最后,希望可以帮助大家更好的学习CSS3。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

看完本文有收获?请转发分享给更多的人

IT共享之家

入群请在微信后台回复【入群】

——————- End ——————-

往期精彩文章推荐: