一、文字溢出问题 ---- 在元素对象内部显示文字 , 如果文本过长 , 则会出现文本溢出的问题 ; 下面的示例中 , 在 150x25 像素的盒子中 , 显示 骐骥一跃,不能十步;驽马十驾,功在不舍;...; 显示效果 : 二、文字溢出处理方案 ---- 文字溢出处理方案 : 首先 , 强制文本在一行中显示 ; white-space: nowrap...文本显示方式 : 默认方式 : 显示多行 ; white-space: normal; 显示一行 : 强行将盒子中的文本显示在一行中 ; white-space: nowrap; text-overflow...省略号 ; text-overflow : clip; 显示省略号 : 文本溢出时 , 显示 ......title> div { width: 150px; height: 25px; border: 1px solid red; /* 首先 强制文本在一行中显示
内边距(Padding) 属性 属性 描述 CSS padding 在一个声明中设置所有填充属性 1 padding-bottom 设置元素的底填充 1 padding-left 设置元素的左填充...3 align-content 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。...字体(Font) 属性 属性 描述 CSS font 在一个声明中设置所有字体属性 1 font-family 规定文本的字体系列 1 font-size 规定文本的字体尺寸 1...3 line-stacking-shift 设置base-shift行中块元素包含元素的堆叠方法 3 line-stacking-strategy 设置内部包含块元素的堆叠线框的堆叠方法 3...外边距(Margin) 属性 属性 描述 CSS margin 在一个声明中设置所有外边距属性 1 margin-bottom 设置元素的下外边距 1 margin-left 设置元素的左外边距
定义HTML文档的样式信息,用于文档内部使用的css。必须且唯一:type:text/css。...当提交表但时向何处发送数据。 autocomplete:on/off。是否自动完成。用户输入字段时,浏览器会根据之前输入过的值显示。...图像映射 定义图像地图的内部区域。 定义图形。 文档中插入图像的标题。 文档中插入图像。...锚URL-href="#top"指向页面中的锚点。 target:在何处打开新链接页面。 _blank新建窗口。 _self当前窗口,默认。...行内元素,常用于为块中某些内容设置单独的样式。 页眉,通常放一些介绍信息等。 页脚,通常包含文档的作者、版权信息、使用条款、联系信息等。
列嵌套:在一个列里再声明一个或者多个行(row),内部所嵌套的row的宽度为100%时就是当前外部列的宽度 3.列排序:通过.col-md-push-*和.col-md-pull-*一实现 4.响应式栅格...,比如使用类似于data-target的自定义属性等 2.JavaScrtip实现步骤:所有的插件都遵循jQuery插件开发的标准步骤,所有的事件都保持了统一标准 3.插件调用方法:所有插件的使用方式都非常类似...:.show、.hidden(不占文档流)、.invisible 四、CSS组件 A.小图标 1.所有的icon样式都以glyphicon-开头,由http://glyphicons.com/提供,使用时必须同时使用两个样式...,.glyphicon和.glyphicon-* 2.新版本使用了CSS3中的@font-face特性 B.下拉菜单 C.按钮组 1.只需要在多个按扭外部使用一个窗口元素(比如div),然后在容器元素上应用...、.btn-group-xs样式 4.垂直分组使用.btn-group-vertical样式 5.在一个.btn-group容器上,如果使用了.btn-group-justified样式,则所有的按扭会
内容:这是元素的内容,在本例中,它只是文本。 元素:开始标记、结束标记和内容共同构成了元素。 元素的属性: 属性包含有关元素的额外信息,如果不希望这些元素显示在实际内容中。...' = HTML标签 在HTML中,标签用于创建元素; HTML 元素的名称是尖括号(如段落)中使用的名称。...Web 用户访问页面时向他们显示的所有内容,编写给用户查看的内容; 如何注释 方式一: 1.单行注释 css文件 meta 定义网页源信息keywords关键字搜索description网页描述信息 注意,在html文件中 可以编写html和css以及js,但是实际工作中三者其实是分开存放的...如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt 属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时; title:属性写文本用于鼠标悬浮在图片上之后提示的文本信息; height
block元素通常被现实为独立的一块,会单独换一行; inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。...CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题...在浏览器中默认的文字大小是16px。 因此,1em的默认大小是16px。...盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。...实例 h1.hidden {display:none;} html中target四种选择_blank、_parent、_self、_top 1,target="_self", 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档
二、web服务的本质 web服务的本质就是接受请求然后做出响应,当我们在浏览器中输入网址然后回车发生了哪些事情呢?...定义了网页标题,在浏览器标题栏显示 之间的文本是可见的网页主体内容。...特点:标签内部的文本有多大就占多大位置,行内不能嵌套块级标签。 4.4标签的两个属性 id属性,每一个标签都有一个id,而且在同一个HTML文档中id不能重复。...4.5head内常用的标签: title 定义网页主题 style 内部支持些CSS代码 link 引入外部css样式文件 script 内部可以直接写JS代码,也可以引用外部JS文件 meta 定义网页源信息..., target = "_blank"指另起一个窗口打开跳转链接 锚点功能:给a标签设置id值,然后在href中写对应的a标签id值,点击即可跳转到对应的位置。
CSS 声明块与选择器配对,以生成 CSS 规则集 。 1.1 HTML中引入CSS的方式 外部样式,link标签将外部样式表链接到页面。...--不推荐此方式,因为在一个站点里,在需要更改 CSS 时修需要改每个页面文件。--> 内联样式表存在于 HTML 元素的 style 属性之中,每个 CSS 表只影响一个元素。...--此方式难以维护(在需要更新时,你必须在修改同一个文档的多处地方)--> 注:样式优先级别:内联样式>内部样式>外部样式 根据样式的引入先后顺序,后引入会覆盖前面的样式 1.2 常用样式属性 字体相关属性...盒子模型 一切皆盒子: 在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用 CSS 实现准确布局、处理元素排列的关键。...这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
它使用一系列标签来标记内容,告诉浏览器这里是什么 2.CSS (层叠样式表) 定位:表现层,它是网页的皮肤和衣服 作用:负责网页的样式和布局,控制HTML内容在屏幕上的呈现方式。...作用:用于在源代码中添加说明或临时隐藏代码,不会在浏览器中显示 快捷键:Ctrl + / <!...包括颜色、字体、间距、大小、位置、响应式布局(适应不同屏幕尺寸)以及动画效果 3.1 引入方式 内联样式:直接在HTML元素的style属性中编写CSS,优先级最高但不利于维护 内部样式表:在HTML文件的...,存在变量提升 let:块级作用域,可重新赋值,不可重新声明 const:块级作用域,不可重新赋值,不可重新声明 函数作用域:指的是在函数内部声明的变量,仅在该函数内部可见(作用域大于Java中的局部变量的作用域...) 块级作用域:指的是在代码块内部声明的变量,仅在其所在的代码块内有效(更接近Java中的局部变量的作用域) 变量提升:指的是在代码执行前,变量和函数的声明会被提升到当前作用域的顶部。
空元素是在开始标签中关闭的。 就是没有关闭标签的空元素( 标签定义换行)。 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。...即使 在所有浏览器中都是有效的,但使用 其实是更长远的保障。...-- 这是一个注释 --> HTML 代码中的所有连续的空行(换行)也被显示为一个空格。...target 属性,你可以定义被链接的文档在何处显示 打开新窗口target="_blank" "> HTML 元素 标签描述了基本的链接地址...块级元素在浏览器显示时,通常会以新行来开始(和结束)。 实例:, , , HTML 内联元素 内联元素在显示时通常不会以新行开始。
内部样式表 在 head 中定义 style 标签,在该标签中写当前页面的样式 <!...4、盒模型 在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局、处理元素排列的关键。...完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。...块级盒子(Block box) 和 内联盒子(Inline box) 在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。...updateName() (这类可以重复使用的代码块称为“函数”)向用户请求一个新名字,然后把这个名字插入到段落中以更新显示。 如果你互换了代码里最初两行的顺序,会导致问题。
Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容 1.4 使用CSS美化页面元素 1.4.1 什么是css css全称层叠样式表...)结尾; 1.4.3 在html中引入Css样式 行内样式 行内样式就是在HTML标签中直接使用style属性设置CSS样式。...内部样式表 将CSS代码写在标签中的标签中,与html内容位于同一个HTML文件中,这就是内部样式表 选择器{属性:属性值} <...外部样式表两种方法的区别 link标签属于xhtml范畴 而导入式是CSS2.1所特有的 使用链接式的CSS使客户端浏览网页时先将外部CSS文件加载到网页中再进行编译显示,所以这种情况下即使网速比较慢显示的网页与预期也会相同...a:active 单击未释放的超链接样式 1.5.3 背景样式 div标签 块级元素 独占一行 , 可以将页面分割出一块独立的、不同的部分 背景属性 背景颜色 在css中使用backgroun-color
所有实现代码在文章结尾处 分析整个实现过程的步骤: 1.显示大标题“todoMVC” 在h1中引入{ {msg}},在js文件中将msg赋值,从而在html中显示大标签的内容 2.当没有数据时,两块模板需要隐藏...将两个模板放在一个template标签中,当items.length=0时,则v-if=false,进而两块模板隐藏。 3.引入数据。将JS中写好的默认数据引入在html的每一个li标签中。...该功能用到双向数据绑定,可以在浏览器中vue模块查看状态以及修改。在每一个li中设置completed属性。他的true/false取决于items中的定义。...设置@click方法触碰到js中事件。在此事件中再次用到filter过滤方法,过滤得到未完成的li,重新放在item中。就实现了清空已完成的操作。 要注意:当没有已完成项目时 该功能需要被隐藏。...如果这个值是空,则显示所有项目,如果是active则显示未完成项目,如果为completed则显示已完成项目。此处再次用到filter过滤的方法。
通常当鼠标滑动到元素上的时候显示。 alt是的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。...DELETE请求服务器删除请求URL指定的资源 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例) 在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 如果资源未缓存...核心原则如下: 所有浏览器都必须能访问基本内容 所有浏览器都必须能使用基本功能 所有内容都包含在语义化标签中 通过外部CSS提供增强的布局 通过非侵入式、外部javascript提供增强功能 end-user...的区别 block元素特点: 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间...,要求网页上实时动态显示"××年还剩××天××时××分××秒" <!
:10px;">字体大小 (2)内部样式表:把css写在head的中,规范化应为css"> (3)外部样式表:文件扩展名为.css,在外部样式表中不需要...="text/css"> @import url("css/stype.css"); 29.样式优先级:”就近原则”,行内样式>内部样式表>外部样式表 当有很多样式时...important要写在分号的前面,但注意当网页制作者不设置css样式时,浏览器会按照自己的样式来显示网页。...p{color:#00ffff;} 相对单位长度值: 1、px像素 像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。...clip : rect(top, right, bottom, left); CSS 伪类: 1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格) 在支持 CSS 的浏览器中,链接的不同状态可用不同的方式显示
动态配置入口文件 动态打包所有子项目 当构建项目包含多个子项目时,每次增加一个子系统都需要将入口文件写入 webpack 配置文件中,其实我们让webpack 动态获取入口文件,例如: // 使用 glob...filename :[name] 为 entry 配置的 key,除此之外,还可以是 [id] (内部块 id )、 [hash]、[contenthash] 等。 1....使用该插件会显示模块的相对路径 // 建议用于开发环境 new webpack.NamedModulesPlugin(), // webpack 内部维护了一个自增的 id,每个...,不纳入打包范围内,例如你项目中使用了 jquery ,并且你在 html 中引入了它,那么在打包时就不需要再把它打包进去: <script src="https://code.jquery.com...= { // 编译为类浏览器环境里可用(默认) target: 'web' }; 4. cache 缓存生成的 webpack 模块和块以提高构建速度。
,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载;前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理...;SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。...destroyed:实例销毁之后调用,调用后,Vue实例指示的所有东西都会解绑,所有事件监听器和所有子实例都会被移除每个生命周期内部可以做什么?...v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。...在 2.x 中,不管反应式数据有多大,都会在启动时被观察到。如果你的数据集很大,这可能会在应用启动时带来明显的开销。在 3.x 中,只观察用于渲染应用程序最初可见部分的数据。更精确的变更通知。
支持(an + b)的格式 目标伪类选择器: :target:当url指向该元素时生效。...当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。...一般在显示用户名时候使用 ---- overflow CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。...由于float意味着使用块布局,它在某些情况下修改display 值的计算值: display为inline或inline-block时,使用float后会统一变成block。...---- align-items CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
1.CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0...中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样式可以规定在单个的 HTML 元素中,在...甚至可以在同一个 HTML 文档内部引用多个外部样式表 2.当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢? ...1浏览器缺省设置 2外部样式表 3内部样式表(位于 标签内部) 4内联样式(在 HTML 元素内部) 3.CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明...6.CSS 类选择器—class 1)在 CSS 中,类选择器以一个点号显示: .center {text-align: center}会应用于以下部分。
的target属性设定为"_blank"可以在新窗口中打开超链接,默认在当前页面打开超链接 百度 <a name="Last...(3)外部引用 将css内容写入css后缀的样式文件,然后在页面中引用,在head中加入。...,元素前后没有换行符) block(显示为块级元素,元素前后会带有换行符) (e)cursor:鼠标在元素上时显示的光标图标 可选: cursor:默认光标 pointer:超链接上的手 text:... 将内容放到层中,整体处理,整体移动 div将所有内容包成一个方块。...将内容放在一个矩形的区块中,会影响布局 (2)span:块 span只是把一段内容定义成一个整体进行操作,但不影响布局和显示。