路飞

15 .css-浮动

梦想的初衷 提交于 2020-02-29 13:47:11
浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性。 float:表示浮动的意思。它有四个值。 none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 看一个例子 html结构: <div class="box1"></div> <div class="box2"></div> <span>路飞学城</span> css样式: .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } 我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一起,这种现象贴边。.box2盒子因为右浮动,所以紧靠着右边。 那么浮动如果大家想学好,一定要知道它的四大特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 浮动元素脱标 脱标:就是脱离了标准文档流 看例子 <div class="box1">小红</div> <div

CSS

僤鯓⒐⒋嵵緔 提交于 2020-01-03 10:08:11
阅读目录 css介绍 css的引入方式 css选择器 盒模型 标准文档流 块级元素和行内元素 浮动 定位 z-index 文本属性和字体属性 background 回到顶部 CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言。从 语义 的角度描述页面 结构 。 CSS:层叠样式表。从 审美 的角度负责页面 样式 。 JS:JavaScript 。从 交互 的角度描述页面 行为 CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式, 定义网页的显示效果 。简单一句话:CSS将网页 内容和显示样式进行分离 ,提高了显示功能。 css的最新版本是css3, 我们目前学习的是css2.1 接下来我们要讲一下为什么要使用CSS。 HTML的缺陷: 不能够适应多种设备 要求浏览器必须智能化足够庞大 数据和显示没有分开 功能不够强大 CSS 优点: 使数据和显示分开 降低网络流量 使整个网站视觉效果一致 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css) 比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。 回到顶部 CSS的引入方式 行内样式 <div> <p style=

vue生命周期学习(watch跟computed)

眉间皱痕 提交于 2019-12-27 10:07:42
1、watch钩子函数监听数据的变化 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: { firstName(newName, oldName) { this.fullName = newName + ' ' + this.lastName; } } }) handler方法和immediate属性 这时候需要增加immediate属性,设置为true,如果不需要就设置false,那就是初始化不会监听变化,这时候需要将watch部分的代码修改如何 watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法

web前端——CSS 08 浮动

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-02 02:47:34
浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性。 float:表示浮动的意思。它有四个值。 none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 看一个例子 html结构: <div class="box1"></div> <div class="box2"></div> <span>路飞学城</span> css样式: .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } 我们会发现,三个元素并排显示,.box1和span因为是左浮动,紧挨在一起,这种现象贴边。.box2盒子因为右浮动,所以紧靠着右边。 那么浮动如果大家想学好,一定要知道它的四大特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 浮动元素脱标 脱标:就是脱离了标准文档流 看例子 <div class="box1">小红</div> <div

css

假如想象 提交于 2019-12-01 11:51:53
css CSS :cascaiding style sheet 层叠样式表。css的作用就是给HTML页面标签添加各种样式。 定义网页的显示效果 css将网页 内容和显示样式进行分离 ,提高了显示功能 HTML缺陷 不能够适应多种设备 要求浏览器必须智能化足够庞大 数据和显示没有分开 功能不够强大 CSS优点 使数据和显示分开 降低网络流量 使整个网站效果一致 使开发效率提高了(耦合度降低,一个人负责写html,一个人负责写css) 比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。 CSS的引入方式 行内样式: <div> <p style="color:green">我是一个段落</p> </div> 内接样式 <style type="text/css"> /*写css代码*/ span{ color: green; } </style> 外界样式:链接式 <link rel="stylesheet" href="./demo1.css"> demo1.css span{ color: red; background-color:red; } 样式引入的优先级 行内样式优先,link和style的样式谁写在后面谁优先生效 css选择器 基本选择器

computed和watch的使用场景

混江龙づ霸主 提交于 2019-11-30 14:28:56
转载地址: https://blog.csdn.net/yuwenshi12/article/details/78561372 从作用机制和性质上看待methods,watch和computed的关系 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比: 1.methods和(watch/computed)的对比 2.watch和computed的对比 作用机制上 1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。 2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数 【总结】:methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动调用,完成我们希望完成的作用 从性质上看 1.methods里面定义的是函数,你显然需要像”fuc()”这样去调用它(假设函数为fuc) 2.computed是计算属性

Essay-One Piece海贼王每集剧情介绍

爱⌒轻易说出口 提交于 2019-11-30 13:30:33
Episode-1>海贼王第1集剧情介绍:我是路飞!将要成为海贼王的男人! Episode-2>海贼王第2集剧情介绍:大剑客現身!海贼猎人 罗洛亚.卓洛 Episode-3>海贼王第3集剧情介绍:摩根vs路飞!神秘的美少女是谁? Episode-4>海贼王第4集剧情介绍:路飞的过去!红发香克斯登场 Episode-5>海贼王第5集剧情介绍:恐怖!神秘的力量 海贼小丑巴基船长 Episode-6>海贼王第6集剧情介绍:绝命追杀!驯兽师摩奇VS路飞 Episode-7>海贼王第7集剧情介绍:壮烈决斗!剑客索隆VS杂技卡巴吉 Episode-8>海贼王第8集剧情介绍:谁是胜者?恶魔果实能力大对决 Episode-9>海贼王第9集剧情介绍:正义的骗子!骗人布船长 Episode-10>海贼王第10集剧情介绍:史上最厉害的怪人!催眠师杰克斯 Episode-11>海贼王第11集剧情介绍:揭发阴谋!海贼管家洛克船长 Episode-12>海贼王第12集剧情介绍:正面冲突!黑猫海贼团斜坡大攻防 Episode-13>海贼王第13集剧情介绍:恐怖的二人組!猫人兄弟VS卓洛 Episode-14>海贼王第14集剧情介绍:路飞复活!可雅小姐的拼死抵抗 Episode-15>海贼王第15集剧情介绍:把克洛打到!男子汉乌索普悲痛的决定! Episode-16>海贼王第16集剧情介绍:守护可雅

海贼王感人的场面和经典的语录

爷,独闯天下 提交于 2019-11-30 13:29:57
海贼王感人的场面和经典的语录   海贼王OP最经典的10句台词   1.【想要我的财宝吗?去吧,我把一切全都放在了那里——伟大航路】——哥尔多.D.罗杰   这句话就没什么好说的了,“海贼王”哥尔多.D.罗杰在死刑前留下的这句话,是这个大航海时代的开端,是所有男子汉的大海贼时代的梦想。无数的冒险和奇迹,无数的斗争和历史真相,全部由这句话开始!      ★2.【我要成为海贼王】——蒙其.D.路飞   这是one piece漫画以来出现的最多也是口气最大的一句话,这句话就是整个one piece 的核心。由我们的的主角路飞说出来的这句话,不仅气势磅礴,而且深度体现了路飞对誓言和约定最强烈的执着和心态。当他言行身教的向路飞展现海贼特有的应有的气质和风度,当他牺牲了一条手臂救下年少的路飞,当他把最心爱的草帽扣在路飞的头上...“总有一天我会超越你们的,我一定会成为海贼王!”      ★3.【穿越万千残酷的大海,如太阳一般灿烂的船——萨乌森.桑尼号】——冰山   “黑熊白熊狮子号”“丸子猩猩狮子号”“莱昂纳尔大哥号”“暗黑丸号”“绅士向日葵号”“猛狮拳王号”等等...一艘船的名字就代表这个海贼团所象征的意义,那么要用什么样的名字才能完美的象征着这艘未来海贼王乘坐的船呢?——“萨乌森.桑尼号”犹如光芒万丈,无限的欢乐。      ★4.【出发吧!向着伟大航路!】——草帽海贼团  

computed和watch的使用场景

情到浓时终转凉″ 提交于 2019-11-27 15:39:52
从作用机制和性质上看待methods,watch和computed的关系 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比: 1.methods和(watch/computed)的对比 2.watch和computed的对比 作用机制上 1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。 2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数 【总结】:methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动调用,完成我们希望完成的作用 从性质上看 1.methods里面定义的是函数,你显然需要像”fuc()”这样去调用它(假设函数为fuc) 2.computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 例如: computed:{ fullName: function () {