web前端 html+css
关注
分享
扫一扫
文章平均质量分 66
简简单单
cuter、
这个作者很懒，什么都没留下…
展开
-
vue脚手架配置代理
vue脚手架配置代理方法一 在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000"}说明：优点：配置简单，请求资源时直接发给前端（8080）即可。缺点：不能配置多个代理，不能灵活的控制请求是否走代理。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二 编写vue.config.js配置具体代理规则：module.exports = { de原创 2021-08-24 14:04:24 · 312 阅读 · 0 评论 -
JS-BOM
BOM一、BOM概述1.1BOM概述1.2BOM的构成二、window对象常见的事件2.1窗口加载事件2.2调整窗口事件三、定时器3.1setTiemout()定时器3.2停止setTimeout()定时器3.3setInterval()定时器3.4停止setInterval()定时器3.5this指向问题四、JS执行机制4.1JS是单线程4.2同步和异步4.3同步任务和异步任务4.4JS执行机制五、location对象5.1什么是location对象5.2URL5.3location对象的属性一、BOM原创 2021-05-19 19:08:26 · 96 阅读 · 0 评论 -
JS隔行换色案例
源码:JS可以用排他思想也可以用鼠标经过和离开<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed..原创 2021-05-15 00:14:40 · 230 阅读 · 0 评论 -
JS百度换肤案例
源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title..原创 2021-05-15 00:10:37 · 260 阅读 · 0 评论 -
JS-DOM
JS-DOM一、DOM简介1.1什么是DOM1.2DOM树二、获取元素目标:能够说出什么是DOM能够获取页面元素能够给元素注册事件能够操作DOM元素的属性能够创建元素能够操作DOM节点一、DOM简介1.1什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。1.2DOM树文档:一个页面就是一个原创 2021-05-14 23:37:56 · 730 阅读 · 0 评论 -
js -Web APIs简介
Web-APIs简介一、Web APIs和JS基础1.1JS的组成1.2JS基础阶段以及Web APIs阶段二、Web APIs和API2.1 API2.2 Web API2.3 Web API和API总结一、Web APIs和JS基础1.1JS的组成1.2JS基础阶段以及Web APIs阶段JS基础阶段1.我们学习的是ECMAScript标准规定的基本语法2. 要求掌握JS基础语法3. 只是学习基本语法，做不了网站交互效果4. 目的是为了JS后面课程打基础，做铺垫Web APIs 阶段原创 2021-05-12 08:35:49 · 278 阅读 · 0 评论 -
js简单类型与复杂类型
简单类型与复杂类型一、简单类型与复杂类型二、堆和栈三、简单类型的内存分配四、简单类型传参五、复杂数据类型传参一、简单类型与复杂类型简单类型又叫基本数据类型或者值类型，复杂类型又叫做引用类型。值类型: 简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。string ，number，boolean，undefined，null引用类型: 复杂数据类型，在存储变量中存储的仅仅是地址(引用)，因此叫做引用数据类型通过new关键字创建的对象(系统对象，自定义对象)，如object原创 2021-05-12 08:16:38 · 294 阅读 · 0 评论 -
js内置对象
内置对象1.内置对象2.查文档2.1MDN2.2如何学习对象中的方法3.Math对象1.内置对象JavaScript中的对象分为三种:自定义对象(var obj= {})、内置对象、浏览器对象。前面两种对象是js基础内容，属于ecmascript;第三个浏览器对象属于我们js独有的，到JS API讲解内置对象： 就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是基本而必要的功能(属性和方法)内置对象最大的优点就是帮助我们快速开发。JavaScript提供了多个内置对象:M原创 2021-05-11 23:52:17 · 539 阅读 · 0 评论 -
js对象
对象1.1什么是对象三级目录1.1什么是对象现实生活中:万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书，一辆汽车，一个人，可以是‘对象’，一个数据库，一张网页，一个远程服务器的连接也可以是‘对象’；在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数组、函数等。对象是由方法和属性组成的属性:事物的特征，在对象中用属性来表示(常用名词);方法:事物的行为。在对象中用方法来表示(常用动词);三级目录...原创 2021-05-09 16:31:11 · 425 阅读 · 0 评论 -
js-变量
目标：1.能够说出变量的主要作用2.能够写出变量的初始化3.能够说出变量的命名规范4.能够画出变量是如何在内存中存储的5.能够写出交换变量的案例1. 变量概述1.1 什么是变量变量就是一个装东西的盒子通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至可以修改数据1.2 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间1.3. 变量的使用变量在使用时候分两步，1.声明变量 2.赋值 1.声明变量 ：var age;//声明一个名称为age的原创 2021-04-30 21:22:53 · 83 阅读 · 1 评论 -
JS-入门02 初始JavaScript
JS-入门02 初始JavaScript目标：能够说出JavaScript是什么能够知道javascript的发展史能够说出浏览器执行javascript的原理能够说出javascript由哪三部分组成能够写出javas三个输入输出语句目录：初始JavaScriptJavaScript注释JavaScript输入输出语句1.初始JavaScript1.1JavaScript历史布兰登·艾奇（Brendan Eich，1961年~）在1995年利用十天完成JavaScript的设计原创 2021-04-24 01:10:55 · 122 阅读 · 0 评论 -
JS入门-01编程语言和计算机基础
JS入门-01编程语言1.1编程编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。注意：计算机是指的是任何能够执行代码的设备1.2计算机语言计算机语言是指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介计算机语言的种类非常多，中的来说可以分为机器语言、汇编语言和高级语言三大类实际上计算机最终所执原创 2021-04-24 01:04:47 · 155 阅读 · 0 评论 -
移动端bootstrap响应式布局 grid布局
目标1.能够说出响应式布局的基本原理2.能够使用媒体查询完成响应式导航3.能够使用Bootstrap的栅格系统4.能够使用Bootstrap的响应式工具5.能独立完成阿里百秀案例目录：响应式开发bootstrap前端开发框架bootstrap栅格系统阿里百秀首页1响应式开发1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的设备划分 超小屏幕（手机） 小屏设备（平板） 中等屏幕（桌面显示器） 宽屏设备（大桌面显示器）<原创 2021-04-23 15:04:08 · 996 阅读 · 0 评论 -
移动端布局媒体查询+rem
移动端布局方式一、rem适配布局能够使用rem单位能够使用媒体查询基本语法能够使用less的基本语法能够使用less中的嵌套能够使用less中的运算能够使用2种rem适配方案能够独立完成苏宁移动端首页1.rem基础rem单位:rem(root em)是一个相对单位，类似于em，em是当前元素字体大小不同的是rem的基准是相对于html元素的字体大小比如，根元素（html）设置font-size=12px；非根元素设置：width：2em；则换成px表示就是24px。rem的优点是原创 2021-04-23 14:42:50 · 714 阅读 · 0 评论 -
移动端开发基础
移动端开发一、移动端基础1.1浏览器现状1.2手机屏幕现状1.3移动端调试方法1.4手机常见尺寸2.1布局视口 layout viewport2.2视觉视口visual viewport2.3理想视口ideal viewport （乔布斯）2.4meta视口标签3.1二倍图，物理像素和物理像素比3.2多倍图3.3背景缩放background-size4移动端开发选择5.移动端技术解决方案6 移动端常见布局一、移动端基础1.1浏览器现状移动端浏览器，uc 百度，qq，欧朋，谷歌，搜狗等等国内的uc和q原创 2021-04-23 13:40:57 · 466 阅读 · 0 评论 -
CSS3 3D转换
CSS3D转换6.1三维坐标系6.2 3D移动 translate3D我们生活环境是3D的，照片是3D物体在2D平面呈现的例子 有什么特点：近大远小，物体后面遮挡不见 主要知识点： 3D位移 translate3D（x，y，z） 3D旋转 rotate3D（x，y，z） 透视 perspective 3D呈现 transform-style6.1三维坐标系三维坐标系就是指立体空间，空间是由三个轴共同构成，Z轴往屏幕外面是正值，里面是负值！原创 2021-04-19 20:39:38 · 117 阅读 · 0 评论 -
热点图案例制作-CSS动画效果
先上图：中间那个实心点里面放几个盒子，每个盒子都设置一样的宽高，不要设置背景颜色，设置边框色就可以，然后通过绝对定位加移动，把这些小盒子移到实心点正上方，然后添加动画效果，0% 75% 100%进行宽度高度的变大，最后对每个盒子的缩放进行延迟（delay）操作，不然都是同时放大和缩小，就没有效果，就可以像图示这样呈现发散效果了。源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2021-04-14 00:54:50 · 243 阅读 · 0 评论 -
CSS动画相关属性
动画（animation）是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。2.1动画的基本使用制作动画分两步1.先定义动画2.再使用（调用）动画1.用keyframes定义动画（类似定义类选择器）语法： @keyframes xuanzhuan { /*开始状态 */ 0% { transf原创 2021-04-14 00:01:29 · 274 阅读 · 0 评论 -
2021金山训练营作业第一周作业
话不多说，先上图：注意：左侧的滑动栏，是因为父盒子的高度装不下子盒子所有高度了，所以给父盒子设置了overflow：auto,就有了侧边下滑栏了！代码：workpage2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &原创 2021-04-13 23:51:50 · 531 阅读 · 0 评论 -
CSS 2D转换
2D转换转换（transform）是CSS3中最具颠覆性的特征之一，可以实现元素的位移、旋转、和缩放等。转换可以理解为：移动：transalate旋转：rorate缩放：scale4.1二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术。**4.2 2D转换之移动translate**2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位移动盒子的位置的方法：定位 盒子外边距 2d转换移动语法： .box { widt原创 2021-04-13 22:12:26 · 103 阅读 · 0 评论 -
CSS3新增特性部分
CSS3新增特性：2.1CSS3的现状1.新增的CSS3特性有兼容性问题，ie9+才支持2.移动端支持由于pc端3.不断改进中4.应用相对广泛5.现阶段主要学习：新增选择器和盒子模型以及其他特性 CSS3新增选择器 CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.属性选择器 2.结构伪类选择器 3.伪元素选择器2.2属性选择器属性选择器可以根据元素特定的属性来选择元素，这样就可以不借助于类或者id选择器1.选择属性来选择例子： input原创 2021-04-13 15:18:13 · 176 阅读 · 0 评论 -
html5新增部分特性
**HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性大问题，可以大量使用这些新特性。**声明：1.新特性增加了很多，但是我们专注于开发常用的新特性1.1 HTMl5新增的语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区域原创 2021-04-13 15:11:02 · 125 阅读 · 0 评论 -
网站的favicon图标和TDK的SEO优化
网站的favicon图标favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持favicon.ico图标。一、制作favicon图标1.把图标切成png图标2.把png图片转化为ico图标，这需要第三方转化网站，比如比特虫二、favicon图标放到网站根目录下三、html页面引入favicon图标网站的TDK三大标签SEO优化（了解，因为有相关人员）SEO（Search English Optimization）汉译搜索引擎优化，是一种利原创 2021-04-13 14:57:52 · 222 阅读 · 0 评论 -
CSS高级技巧
一、三角形网页中常见一些三角形，使用CSS直接画出来，不必用字体图标或者图片。等腰三角形： 网页中常见一些三角形，使用CSS直接画出来，不必用字体图标或者图片。 .box2{ width: 0; height: 0; line-height:0;为了照顾兼容性 font-size:0;为了照顾兼容性 border: 50px solid transparent;原创 2021-04-09 00:32:54 · 98 阅读 · 0 评论 -
CSS精灵图和字体图标及下载
精灵图和字体图标精灵图1.1为什么需要精灵图？1.2精灵图的使用1.3精灵图总结字体图标2.1字体图标的产生2.2字体图标的优点2.3字体图标的下载2.4字体图标的引入精灵图1.1为什么需要精灵图？浏览器：发送请求给服务器，服务器：接收请求，返回请求页面。一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也原创 2021-04-08 00:55:19 · 1465 阅读 · 2 评论 -
CSS元素的显示与隐藏
元素的显示与隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。1.display显示隐藏2.visibility显示隐藏3.overflow溢出显示隐藏4.1 display属性display: none;隐藏对象display：block;除了转化为块级元素之外，同是还有显示元素的意思注意：display隐藏元素后，不再占有原来的位置。重点：后面应用极其广泛，搭配js可以做很多网页特效。4.2 visibility可原创 2021-04-08 00:10:17 · 97 阅读 · 0 评论 -
html导航栏li+a！
竖线效果：这样用a来设置边框竖线，竖线高度和文字一样高，要是设置在li上面，则比文字高很多.html <div class="tpcenter"> <ul> <li><a href="">我的淘宝 </a></li> <li><a href=""> 购物车</a></li>原创 2021-04-07 15:37:45 · 424 阅读 · 0 评论 -
网页布局总结
网页布局总结：通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位，可以让每一个盒子排列成网页。一个完整的网页，是标准流，浮动，定位一起完成布局的，每个都有自己专门用法。1.标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。2.浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级元素水平显示就用浮动布局。3.定位定位最大的特点就是有层叠概念，就是可以让多个盒子前后叠压来显示。如果元素在盒子内移动就用定位来布局。**注意：**如果一个盒子既有r原创 2021-04-07 11:15:31 · 119 阅读 · 0 评论 -
HTML点击图片实现提交或跳转链接页面
点击图片提交提交后实现跳转，但需要注意的是；鼠标光标放在图片上，显示的还是箭头（没有改变）。.cssinput{ width: 400px; height: 400px; border: 3px solid blue; background-image: url("图片呀/c2.jpg"); }.html <!-- 按钮跳转 --> 图片按钮跳转 &l原创 2021-04-06 22:15:13 · 7312 阅读 · 0 评论 -
CSS定位
学习目标1. 能够说出为什么要用定位2. 能够说出定位的4种分类3. 能够说出各种定位各自的特点4. 能够说出为什么常用子绝父相布局5. 能够写出淘宝轮播图布局6. 能够说出显示隐藏的2种方式及以上区别1. 能够说出为什么要用定位1.定位：1.1为什么需要定位一个元素可以出现在页面任何位置。滚动窗口的时候，有一些盒子固定在屏幕中的某个位置。所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于盒子横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动或者固定屏幕中某个位置，可以压原创 2021-04-06 20:45:00 · 140 阅读 · 0 评论 -
html基本的知识片段
什么是html？HTML是超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。页面内可以包含图片、链接，甚至音乐、程序等非文字元素，结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。从各个标签说起：标签一：html<!DOCTYPE html><原创 2021-04-06 08:29:45 · 221 阅读 · 0 评论 -
html布局，小米布局案例练习，填充内容即可
小米网站原图：自己写的布局盒子：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-04-06 00:34:32 · 865 阅读 · 1 评论 -
html关于图片置底当背景或者图片链接
自己写的小米侧边栏加置底图片链接：这个后面的大图是在侧边栏的下边的，是可以点击跳转的，具体实现方法是：我用一个父盒子为content 然后在父盒子里面定义一个img盒子，img的宽度和父盒子一样宽，再在img盒子里面放入图片链接a里面嵌套img就可以实现点击图跳转。<div class="content"> <div class="img"> <a href=""><img src="图片呀/xia原创 2021-04-06 00:26:44 · 2674 阅读 · 1 评论 -
《学成在线 》 网站制作源码及总结html+css
界面：这是一个用盒子布局的静态界面。整体布局思路：先用一个大的盒子，我定义为total类，这个盒子可以装下页面所有盒子。然后根据标准流文档和浮动来布局。在此，要注意的是，中间php图片占用了整个父盒子的空间，所以再定义侧边栏的时候，侧边栏会掉在下边，此时我用的相对定位，使其保持在图片的侧边栏。后面以此类推，上下用标准流，左右用浮动。大盒子嵌套小盒子反复循环。注意1.盒子里面放图片： .imgconter{ width:229px; height:原创 2021-04-05 12:57:07 · 2756 阅读 · 1 评论