本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记 进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。
CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
参考样式表(作者样式表+浏览器默认样式表)中没有冲突的声明,作为CSS属性值,如果你设置的属性跟浏览器默认属性重合了,那么就是有冲突的属性,如果没有冲突那么就作为css的属性,同时还会进行css预设值的处理。
HTML中大部分标签都是具有语句的(有固定格式),有语义的标签在使用时一定要注意不能乱用。还有一部分标签是没有语义的,没有语义的标签只用来进行页面布局。 3.1、div标签 代码: 特点:div默认占一整行,并且一行里面只能显示一个div。
transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果。
一、绑定class的几种方式 1.对象语法 直接看例子: 对象绑定class //简单的处理直接使用数据来判断 计算属性绑定class //当class的表达式过长或逻辑复杂时,使用计算属性 var app3 = new Vue({ el
CSS语言介绍:CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’
可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
transition-property 用于指定应用过渡的属性名称,可以指定多个属性名称,多个属性名称之间用, 分隔。 默认值为 all 也就是所有的元素都应用过渡效果。 例如,想让容器的宽高有一个过渡的效果,就可以这样写:
style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。(注:如果你不是应用style值而是应用CSS class的话,请参考CSS绑定。)
选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面。
HTML概念及编写规范 html叫做超本文标记语言,注意它只是标记语言,不是编程语言。 编写规范: 由标记(html, div, p, h1等)组成 标记成对出现(<html>...</html>),也有例外,比如、 标记有层级关系 <html> <head> </head> <body> </body> <html> 标记有内容文本或属性 <title>这是一个标签</title> <meta name="" content=""></m
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下:
CSS相关查阅文档:https://kohler.lanzouo.com/i0XFcz8svob
组件化开发指的是根据封装的思想,把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护。
webpack使用总结: 入门使用: 这个报错说明需要安装相应的Loader,并在引用时指定相应的loader 执行成功如图: chunk指相应的区块。 要是css引入正确:必须引入css-loade
吐槽:虽然JSX出发点是好的,而且写起来也很简单,但是对于要在JS中写类HTML格式的内容,我的内心是排斥的,感觉非常不习惯。这不是我熟知的web开发啊!有种在开发app的感觉,一个个自定义的组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; }
然后我们给整个div 的内左边距设置成20px,因为贴着浏览器左侧看着就是不舒服。
1.css的介绍 css:层叠样式表,它是cascading style sheets的缩写,作用就是给html标签加表现形式(样式显示) 如:字体、图片、列表、位置等 在浏览器中可以看到部分: ht
CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离。
HTML 标签原本被设计为用于定义文档内容,但随着HTML的 发展,为了满足页面设计的更多要求,HTML增加了许多的显示功能,导致HTML变得越来越杂乱,页面也越来越臃肿,于是CSS便应运而生了。 CSS (Cascading Style Sheets) 即层叠样式表,用来美化HTML标签。通过使用CSS可以实现表现和内容的分离,同时提高了页面浏览的速度,也更加的易于维护和改版
绑定class 绑定class两种方式第一使用对象方式,第二使用数组方式进行绑定 对象方式 <style> *{ padding:0; margin: 0; } .actived{ color:hotpink; } </style> </head> <body> <h1 :class="{actived:isActi02
总结说明: 1.以前可以一次性放一个坑对应一个路由和显示一个组件 a. 一次行为 = 一个坑 + 一个路由 + 一个组件 b. 一次行为 = 多个坑 + 一个路由 + 多个组件 2.components多视图 是一个对象,对象内多个key和value a. key对应视图的name属性 b. value就是要显示的组件对象 3.多个视图(name属性省略与否) 省略: <router-view></router-view> —— name就是default 不省略: <router-view name='xxx'></router-view> —— name就是xxx ---------------------
Vue 是一款用于构建用户界面的 JavaScript 框架,它基于 HTML,CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效的开发用户界面
className:返回节点样式,可以设置 className="demo1 class2"
最近几年,大屏幕手机和ipad等移动设备的流行,使你的网页兼容移动设备已成为一种流行!移动设备的屏幕大小是五花八门,各式各样!要想很好的兼容移动设备,Css3的media技术是功不可没。
在日常的网页源码中,我们基于元素的id去定位是最万无一失的,id在单个页面中是不会重复的。但是实际工作中,很多前端开发人员并未给每个元素都编写id属性。通常一段html代码如下:
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例: div{ width:100px; height:100px; color:red } css页面引入方法: 1、外联式:通过link标签,链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css"> 2、嵌入式
1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。
https://www.cnblogs.com/yangfengwu/p/10852073.html
计算属性是基于响应式数据进行计算得出的结果并被缓存的属性。在组件的模板中可以像数据属性一样使用,它由一个计算函数和它所依赖的数据组成,只有当所依赖的数据发生变化时,它才会重新计算属性的值。Vue.js 内部实现了缓存机制,因此计算属性只会在必要的时候才重新计算。这样能够提高 Vue.js 应用的性能,并且让代码更加简洁和易于维护。
前言 说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component。HTML Component是在IE5开始引入的新技术,用于对原生元素作功能"增强",虽然仅仅被IE所支持,虽然IE10也开始放弃它了,虽然掌握了也用不上,但还是不影响我们以研究的心态去了解它的:) 把玩HTML Component HTML Component简称HTC,它由定义和应用两部分组成。定义部分写在.htc文件中(MIME为text/x-component),由HTC独有标签、JScrip
二、CSS特性 CSS具有两大特性: 继承性 层叠性 1.继承性 CSS的继承性,指的是子元素继承父元素的某些样式属性,例如:在父元素定义字体颜色(color属性),子元素会继承父元素的字体颜色。 不是所有属性都具有继承性 不过,并不是所有属性都具有继承性,如:padding、margin、border等就不具备继承性,况且要是这些属性也可以继承,那对于网页来说是一场噩梦。 (1)具有继承性的属性 W3C规定,只有那些能让我们轻松书写的属性才可以继承。 在CSS中,具有继承性的属性有
8 = html + css +javascript(jQuery和vue就是js封装的函数而已)
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观。
本文需要一点HTML的基础,没有基础的小伙伴可以看我的这篇文章:前端HTML万字血书大总结,来看看你入门了吗?
实用的css3属性 1、display:flex||inline-flex display flex inline-flex 解释 将对象作为弹性伸缩盒显示 将对象作为内联块级弹性伸缩盒显示 项目中的应用 我当时写过一个因为子元素浮动让div自适应高度的解决办法,使用的是css方法解决的。div高度自适应 下面就是换用display:flex解决 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
--以下:正文部分-- Android的设计哲学为:设计与表现分离。 这样有利于程序的解耦。所以我们才可以在XML文件中定义各种资源类型,并在其他的xml文件或java代码中进行引用。
但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。
在介绍项目列表之前,先让我们热热身,做一个各个页面都会出现的 右上角返回主页按钮,这里会学习到一些css属性和js的使用。 在之前的章节中,我们规定home.html 作为我们的主页。那么我们给其他人分享的平台地址应该是:你的ip:8000/home/
本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性). 因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符串拼接麻烦且易错。因此,再将v-bind用于class和style属性时,Vue.js做了专门的增强,表达式结果类型除了字符串以外还可以是对象或者数组. 1、对象语法 (1)、绑定的数据对象内联在模版中 我们可以通过给html标签追加v-bind:class的指令,以动态的切换class,html代码如下: <
"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。
字体样式 的顺序 , 不能打乱 , 必须严格遵守 ; 字体样式 属性值 之间 , 使用空格隔开 ; font-size 和 font-family 两个样式必须写 , 其它样式可以省略 ;
领取专属 10元无门槛券
手把手带您无忧上云