前端
心文花雨
这个作者很懒,什么都没留下…
展开
-
vue-cli 创建项目慢的解决方法
(1) 设置npm源为淘宝镜像npm config set registry https://registry.npm.taobao.org(2)修改useTaobaoRegistry为truevim ~/.vuerc { "useTaobaoRegistry": true }原创 2020-05-07 11:33:17 · 484 阅读 · 1 评论 -
图片背景
一、设置背景样式(background-image)1. 语法background-image: url(相对路径)2. 注意如果背景图片背大于元素,默认会显示图片的左上角 如果背景图片和元素一样大,则会将背景图片完全显示 如果背景图片小于元素大小,则会将背景图片平铺以填充满元素 可以同时为一个元素设置背景颜色和图片,这样背景颜色将会作为图片的底色二、background...原创 2020-02-06 19:03:01 · 290 阅读 · 0 评论 -
opacity
1. 作用设置元素的透明背景2. 取值(1) 取值范围0~1(2) 0表示完全透明,1表示完全不透明,0.5表示半透明3. 示例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>opacity</title> <...原创 2020-02-06 15:49:09 · 5858 阅读 · 0 评论 -
定位
一、简介定位就是指将元素摆放在页面的任意位置,通过定位可以任意的摆放匀速,通过position可以设置元素的定位可选值:static: 默认值,元素没有开启定位 relative: 开启元素的相对定位 absolute: 开启元素的绝对定位 fixed: 开启元素的固定定位二、相对定位1. 如何设置(1) 设置position属性为relative(2) 设置偏移...原创 2020-02-06 15:28:33 · 486 阅读 · 0 评论 -
高度塌陷
一、BFC1. 简介根据W3C标准,在页面中有一个隐藏的属性Block Formating Context属性 BFC,该属性默认是关闭的,该属性开启时,具有如下属性:(1) 父元素的垂直边距不会和子元素重叠(2) 开启BFC的元素不会被浮动元素所覆盖(3) 开启BFC的元素可以包含浮动的子元素2. 如何开启BFC:(1) 设置浮动元素会导致元素宽度丢失,下边的...原创 2020-02-06 13:13:44 · 171 阅读 · 0 评论 -
浮动
1. 简介块元素在文档流中默认垂直排列,如果希望元素在页面中水平浮动,可以使用float来使元素脱离文档流2. 可选值none: 默认值,元素默认在文档流中排布left: 元素会立即脱离文档流,想页面左侧浮动right:元素会立即脱离文档流,想页面右侧浮动3. 注意元素脱离文档流后,会立即向上移动,直到遇到父元素的边框或者其他的浮动元素如果浮动元素上是没有浮动元素...原创 2020-02-06 12:44:25 · 176 阅读 · 0 评论 -
文档流
一、简介文档流处在网页的最底层,它表示一个页面中的位置,创建的元素默认都在文档流中二、特点1. 块元素在文档流中独占一行,自上向下排列默认宽度是父元素的100%,宽度值为auto默认高度被内容撑开2. 内联元素只占自身的大小,默认从左向右排列,如果一行不足以容纳所有的内联元素,换到下一行,继续自左向右宽度和高度默认被内容撑开三、注意当元素的高度或宽度值为...原创 2020-02-06 12:19:31 · 125 阅读 · 0 评论 -
display visibility overflow
1. display将一个内联元素变成块元素可选值:inline: 将一个元素作为内联元素显示block: 将一个元素作为块元素显示inline-block: 讲一个元素转换为行内块元素none: 不显示元素,元素不会在页面继续占位2. visibility可以用来设置元素隐藏和显示的状态可选值:visible: 默认值,元素会在页面显示hidden: ...原创 2020-02-06 12:08:10 · 105 阅读 · 0 评论 -
盒子模型
一、定义css在处理网页时,它认为每个元素都包含在一个不可加你的盒子里,我们只需要将相应的盒子放在相应的位置即可完成对网页的布局。二、简介1. border-width,边框的宽度border-width-xxx(top,left,bottem,right): xx px2. border-color,边框的颜色border-color-xxx(top,left,bot...原创 2020-02-05 14:29:36 · 96 阅读 · 0 评论 -
段落
一、行间距没有直接设置行间距的方法,可以通过行高设置行间距,line-weight大小: 20px百分数: 100%,没有行高数字: 和百分数类似,1=100%对于单行文本,可以将行高设置与父元素高度一致,这样可以使文本居中二、控制文本的大小写,text-transform:大写: upercase小写: lowercase首字母大写: capitaliae...原创 2020-02-05 13:38:22 · 205 阅读 · 0 评论 -
字体
1. 设置文字大小font-size: 字体大小,默认16px,例如:font-size: 20px/30px /*20为字体大小,30位行高*/2. 设置字体(1) font-family,设置字体serif:衬线字体sans-serif:非衬线字体monospace:等宽字体cusive:草书字体fansty:虚幻字体(2) font-style,字体...原创 2020-02-05 13:35:24 · 259 阅读 · 0 评论 -
单位
一、长度单位像素:px,一个像素就是屏幕中的一个小点百分比:浏览器根据父元素的样式来计算,父元素改变,子元素也改变em:和当前字体大小来计算 1 em = 1 font-size二、颜色单位单词:使用颜色单词,例如红色:redRGB:通过三元色来设置颜色,例如:background-color: rgb(红色浓度a, 绿色浓度b, 蓝色浓度c);a,b,c 取值...原创 2020-02-05 13:15:28 · 134 阅读 · 0 评论 -
html 列表标签
一、无序列表1. type 属性disc: 默认,实心圆点square: 实心方块circle: 空心的圆2. 示例<h1>西遊記 </h1><ul type="disc"> <li>孫悟空</li> <li>豬八戒</li> <li>唐僧</l...原创 2020-02-05 12:57:31 · 136 阅读 · 0 评论 -
html 文本标签
1. 加粗(1) 有语义<strong>上课好好学习!</strong>(2) 无语义<b>上课好好学习!</b>2. 斜体(1) 有语义<p>今天天气<em>真好啊</em>!</p>(2) 无语义<i>今天天气真好啊!</i>3...原创 2020-02-02 15:46:52 · 157 阅读 · 0 评论 -
再探 css
一、伪类1. link普通的链接a:link { color: yellowgreen;}2. visited访问过的链接,只能设置颜色a:visited { color: yellowgreen;}3. hover鼠标移入状态a:hover { color: yellowgreen;}4. active鼠标点击...原创 2020-02-02 15:19:37 · 138 阅读 · 0 评论 -
初识 css
一、简介层叠样式表,css可以用来为网页创建样式表,通过样式表可以对网页进行装饰,所谓层叠就是可以将网页想象成一层一层的结构,层次高的将会覆盖层次低的,而css就可以分别为网页的各个层次设置样式。二、样式1. 内联样式将样式直接写到style属性中,内联样式只对当前元素的内容起作用(1) 示例<!DOCTYPE html><html> <...原创 2020-02-01 15:39:33 · 104 阅读 · 0 评论 -
再探 html
一、外联框架使用外联框架可以印日外部的一个页面,使用iframe来创建一个外联框架1. 属性src:指向外部路径的一个路径,可以使用相对路径name:可以为外联框架指定一个name属性2. 示例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <ti...原创 2020-02-01 13:51:34 · 215 阅读 · 0 评论 -
初识 html
一、定义超文本标记语言,负责网页的结构,使用标签的形式表示网页的不同组成部分,所谓的超文本就是超链接,使用超链接可以让我们从一个页面跳转到另一个页面。二、基本格式<html> <head> <meta charset="utf-8" /> <title>标题</title> </head> <...原创 2020-01-31 15:18:25 · 217 阅读 · 0 评论