自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

wry1213的博客

前端技术

  • 博客(30)
  • 收藏
  • 关注

原创 使用hexo搭建一个博客超详细步骤

一.前期准备Hexo使用前提Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 使用Hexo的前提是电脑上已安装下列程序:安装Hexo在vscode建立一个文件夹(例如0808prac),右键打开终端,输入以下终端命令:全局安装hexo:npm install -g hexo-cli (或者npm i -g hexo-cli)查看是否安装成功:hexo -v安装成功显示如下图:

2020-08-08 21:24:57 3208

原创 前端学习Day30

一、补充循环语句-for-`for`-语法:for(){} for语句名 ()条件组(计数器的初始值;条件;计数器的改变) {}循环体```jsfor(vari=0;i<=10;i++){...

2020-04-25 13:55:54 129

原创 前端学习Day29

一、小数的问题1.现象-明明只有一位小数,但是最后出来很多位-0.1+0.7=0.799999999999999-59.999999999999999不小于60-诸如此类问题2.原因-计算机最终执行或识别的符号只有0和1,二进制-计算机中有一套完善的转换机制,所有内容,不管是文字,字符,任何...

2020-04-25 13:39:02 142

原创 前端学习Day28

一、补充1.js中的三大特殊数据:undefined,null,NaN-`NaN`:非法的数值运算得到的结果-特殊之处:1.是一个数值型的数据,但是不是一个数字2.NaN不等于任何值,和任何数据都不相等,NaN不等于NaN-检测方法:`isNaN(要检测的数据)`-true:检测结果为NaN...

2020-04-22 22:31:08 111

原创 前端学习Day27

一、数据类型的转换1.为什么要转换?-如果,用户给了一个数据,或者计算机给了一个数据,或者其他程序给了一个数据,不是咱们想要的数据类型-需要转成当前程序所需的数据类型,再进行运算2.数据类型的转换方法-强制转换(显示转换,主动转换)-字符转数值-`parseInt(要转换的数据或变量)`...

2020-04-22 14:54:20 118

原创 前端学习Day26

js基础:一、javascript,简称js,它是行为,包括互动、动作,跟网页互动,交互。它的作用就是行为。二、js的书写1.css写在哪-内联(行内):属性形式:style=“样式属性:样式属性值”-内部:style双标签,包裹css样式 --外部(外联):link单标签,的href属性,引入css文件的路径公共样式:好几个页面都要用到的样式,叫公共样式2.js写在...

2020-04-20 22:37:11 78

原创 前端学习Day24

一:移动端页面今天主要是学习移动端页面的另一种写法,之前介绍了 一种vw+rem结合完成布局写移动端,而今天要说的这种方法是用插件flexible.js(一串js代码)来进行html的font-size的值的改变,用这串js代码来进行适配 。大概步骤:1、把html自身所带的控制视口的meta标签删除;2、引入flexible.js在head中添加3、3、计算流程若量出高度88px,...

2020-04-17 00:05:25 82

原创 前端学习Day23

一、媒体查询媒体查询:由设备类型、监测设备特性表达式构成。语法:@media 设备类型[all\screen] and (条件表达式){css样式}注:1、and两侧必须有空格2、not放在设备类型的前面(反向选择【排除某个范围】)3、媒体查询:做样式微小调整, 例如:浮动,显示隐藏,文本大小,,宽高二、移动端准备工作1、meta标签的设置:视口1:1比例、禁止用户缩放2...

2020-04-15 22:40:31 113

原创 前端学习Day22

一、 怪异盒模型1.属性:box-sizing: ;属性值: box-sizing:content-box; 常规盒模型box-sizing:border-box; 怪异盒模型(IE盒模型)2.怪异盒模型:触发怪异盒模型:box-sizing:border-box;怪异盒模型特点:padding和border都会在元素的宽高的内部,不会把盒子撑大。注:在移动端项目中,reset...

2020-04-14 18:37:11 121

原创 前端学习Day21

一、阴影属性1、文本阴影: text-shadow: x轴位置 Y轴位置 阴影大小 阴影颜色;注:如果想添加多个阴影 每一组阴影以逗号分隔。2、盒子阴影: box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选);注:添加多阴影:以逗号分隔的形式添加多阴影。二、文本换行英文或者数字默认显示:如果没有换行的情况下:尝试把下一个长...

2020-04-13 20:16:25 91

原创 前端学习Day20

一、增加的type类型email ,url ,number ,range ,color ,searchtime 时间类型 ,month 月份 ,week 周datetime-local 选取本地时间 ,date 只有年月日二、新增的html属性min 最小max 最大required 监测是否为空,如果表单没有输入内容的情况下,禁止提交step ...

2020-04-11 17:31:11 77

原创 前端学习Day19

HTML5基础一、兼容问题支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的 遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。二、语法1.内容类型(Conte...

2020-04-09 19:55:50 83

原创 前端学习Day18

一、3D的旋转增加了rotateZ(); 和 rotate3d(x,y,z,度数)注:x、y、z 它们是一个矢量值,0是不旋转,1是旋转 eg:rotate3d(1,1,0,45deg) 等价于:rotateX(45deg) rotateY(45deg)二、3D的缩放增加了 scaleZ() 和 scale3d(x,y,z)注:交互时需要把旋转的x,...

2020-04-08 20:34:12 152

原创 前端学习Day17

一.css的2D属性(1)2D:平面空间的元素变形。变形属性: transform: ; transform的属性值为功能函数。2D功能函数: 2D的位移、2D的旋转、2D的缩放、2D的倾斜(2)2D的位移:transform:translate(x,y);transform:translateX(x轴移动的距离);transform:translateY(Y轴移动的距离);(3)2...

2020-04-07 21:54:50 91

原创 前端学习Day16

一.浏览器前缀很多css3属性最初的预览版没有形成最终的正式版,但是浏览器为了对这些新属性形成支持,主流浏览器提供属于自己的语法规则 “浏览器前缀”:-webkit- 谷歌、苹果 浏览器前缀-moz- 火狐浏览器前缀-ms- IE浏览器前缀-o- 欧鹏浏览器注:添加浏览器前缀 -> 兼容模式不添加浏览器前缀 -&gt...

2020-04-03 20:09:35 85

原创 前端学习Day15

一 .BFC拓展1.BFC第三个应用(实现两栏自适应)先给固定的一栏(一般是左栏)添加float:left;再给需自适应的那一栏(一般是右栏)添加overflow:hidden;2.BFC第四个应用(实现左右两侧固定中间自适应即双飞翼布局)先写左右固定的两栏,给左栏添加float:left;,给右栏添加float:right;再给需自适应的中间部分center添加overflow:hi...

2020-04-03 00:13:17 179

原创 前端学习Day14

一.表格补充表格的作用:显示数据。表格标签补充:1:表格的数据行分组注:一个表格有一个表头和表尾 ,但是可以包含多个表体2:列标题标签默认的样式:左右居中 文本加粗3:表格标题标题的位置: css属性: caption-side:left/right/top/bottom注:left/right 有兼容问题:火狐能识别4:数据列分组(了解:应用率...

2020-04-01 23:26:47 192

原创 前端学习Day13

一.如果考虑兼容最小高度的设置(了解)1.正常项目中:最小高度直接用min-height即可。如果考虑兼容:min-height 在iE6不兼容, IE6默认把height解析成最小高度。注:如果height 和 min-height同是出现,执行height固定高度。2.最小高度的兼容设置方法:(了解:体会的是解决兼容的思路)问题分析:只让IE6识别height(1): min-h...

2020-03-31 20:53:16 88

原创 前端学习Day12

一、定位1.position: static /absolute /relative2.position:fixed; 固定定位a: 参照物:浏览器窗口b: 不占据空间,脱离布局流3.让一个元素在浏览器窗口左右上下居中?第一种方法:(前提:已知宽和高)position:fixed;left:50%;top:50%;margin-left:-元素宽度一半;ma...

2020-03-30 22:17:09 114

原创 前端学习Day11

一.定位position的属性值:1: position:static; 【静态定位】 (默认值:添加和不设置的效果一样的)2: position:absolute; 【绝对定位】a: 绝对定位的参照物: 已经有定位的父元素为参照物,如果父元素都没有定位或者没有父元素,以整个文档为参照物。b: 绝对定位的特点: 不占据空间,脱...

2020-03-28 22:31:28 110

原创 前端学习Day10

一.display:inline-block;1.元素类型的转换: display属性: 属性值: block/inline/none大部分块状元素默认的display的值block,其中li默认的值 list-item (列表元素)大部分内联元素默认的display的值inline,其中input默认的值 inline-block(行内块元素)2.内联...

2020-03-27 21:53:18 446

原创 前端学习Day9

一 .元素类型1.css的显示对标签分类: 块状元素, 内联元素(行内元素)争议点:第三类:可变元素或行内块元素元素类型分类(个人观点):块状元素、内联元素、可变元素。注:把行内块元素 归在 内联元素这一类里面。2.默认情况下元素类型每个类型特点:块状元素特点: a:在页面中以矩形区域显示。b:自上而下排列,独占一行c:可以直接添加...

2020-03-27 00:27:09 87

原创 前端学习Day8

一.写新闻列表版块的流程:1:结构:a:如果新闻后面有时间:b:如果没有时间:2: 给li添加宽高,高度量取的时候,量行高就行3: 给新闻内容a 和 时间的span 添加浮动,一左一右4:设置文本样式5:用添加背景图的形式 给 li添加列表符号6:让背景图 上下居中,文本上下居中7:给li添加padding-left 把列表符合露出来。二.文本溢出省略号显示1:空白...

2020-03-25 21:08:54 88

原创 前端学习Day7

一.padding的用法:1: padding是长在内容和盒子之间的,在盒子内部。2:padding是为了调整 子元素 在 父元素里面位置关系。3:padding的特点:padding值会把盒子撑大。4:如果想让盒子保持原有大小,需要在宽高的基础上减掉padding值。5:给单一方向设置padding值: padding-left/right/top/bottom:...

2020-03-24 20:52:14 80

原创 前端学习Day6

一.浮动拓展注:1.添加浮动的元素不占据空间(脱离文档流)2.只要子元素有浮动,父元素必须添加高度!!!(暂时性记住)二.页面布局拓展1.设计图: 版式宽度:1920 1680 …网页的版心:960 - 12002.结构规划: id名称:网页外围结构pc端 版心宽度不能用百分比。3.怎样让版心左右居中?给要做居中的版心元素添加 margin:...

2020-03-23 22:07:38 69

原创 前端学习Day5

一.选择符的权重:id > class > 标签四个数字表示权重:1.内联样式表 -> 10002.id -> 1003.class -> 104.标签 -> 15.伪类选择符 -> 106.通配符 -> 07.包含选择符的权重为权重之和eg : #...

2020-03-20 20:02:47 64

原创 前端学习Day4

一.css样式表的权重1.比喻:a.在公司:组长告诉你:本周加班7天。在公司:老板告诉你:本周放假7天。有冲突b.在家:爷爷告诉你:抓紧娶媳妇在家:爸爸告诉你:抓紧挣钱有冲突c.老板说:后天你休息组长说:明天你工作没有冲突2.样式表的权重关系:a.内联样式表的权重最大。b.内部和外部样式的权重,和书写的前后顺序有关。(有冲突时,放在后面的会把放在前面的样式覆盖掉,没有冲突...

2020-03-19 20:29:54 158

原创 前端学习Day3

一.表格1.表格的作用: 显示数据,每一个表格都是一个table,行是tr,列是td2.表格的html属性:width=" " 宽height=" " 高border=" " 边框bordercolor=" " 边框颜色cellspacing=" " 相邻单元格边框间的间距cellpadding=" " 内容距离边框之间的间距align=" " 水平对...

2020-03-18 22:22:27 89

原创 前端学习Day2

一.html的基本结构html的语法html标签分为两类:单标记(空标记):<标签名称 属性名=“属性值”>双标记(常规标记):<标签名称 属性名=“属性值“> </标签名称>二二.html语法说明:1.尖括号后面的第一个单词是标签名称2.标签后面,用空格隔开的叫属性3.属性和属性值之间用等号连接4.属性值放在引号中(单双引号都可以)...

2020-03-17 22:15:08 353

原创 前端学习Day1

前端学习Day1一.网站的建站流程1.网址(域名)2.资源存储空间(租用空间)【服务器】3.项目制作a.规划网站(资源、功能…)【产品】b.网站的设计(界面、交互…)【UI】c.前端d.后端e.联调、测试f.上线4.推广5.维护二.网页的组成1.网页的结构(相当于人的骨骼)2.网页的表现(相当于人的外貌)3.网页的行为(相当于人的行为)三.计算机语言1.网页的...

2020-03-16 21:08:18 239

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除