-
kuayu react_react引入网页跨域问题
2020-12-18 23:42:53遇到这样一个需求,react重构网站时,暂时需要引入其他域名网站详情,如果直接引入肯定会因为没有cookie引入页面跳转登录页面,首先我们用api代理网页,不会有跨域问题,其次防止网站重新登录,那么我们需要将cookie...遇到这样一个需求,react重构网站时,暂时需要引入其他域名网站详情,如果直接引入肯定会因为没有cookie引入页面跳转登录页面,首先我们用api代理网页,不会有跨域问题,其次防止网站重新登录,那么我们需要将cookie重写,我的配置如下:
const str="http://ningli.win/"
app.use(proxy(['/api','/js','/css'], { target:str,changeOrigin:true,
pathRewrite:{
"^/api":"/",
},
cookieDomainRewrite: {
"*": ""
}
}));
如上我们 iframe src="/api/post/12" ---->转发到 ningli.win/post/12
如上我们成功引入了ningli.win网页下的网址,但是问题来了,你会发现所有资源无法引入,原因是iframe内的/js,/css被转发到了 locahost的根目录,
localhost/js,/css肯定是找不到的,所以我们需要将/js,/css重写到原来的所以如下:
const str="http://ningli.win/"
app.use(proxy(['/api','/js','/css'], { target:str,changeOrigin:true,
pathRewrite:{
"^/api":"/",
"^js":"/",
"^css":"/"
},
cookieDomainRewrite: {
"*": ""
}
}));
我们解决了这个问题
-
求解如何在网页中引入表情图片
2015-12-18 11:39:29我想的网页发布内容,可以类似发布微博那样添加表情图片,如果直接引入微博的表情图是不是侵权了,如何引入? 请问,直接引入微博等其他网站的表情图是不是侵权了,如何做才能避免侵权或者哪些部分是可以随便引入的,... -
网页中引入css代码的三种方式
2020-06-19 15:03:341 如何在网页中引入css代码 行内式 设置标签的style属性 用的不多,后台喜欢用 一般少量的样式可以这样写,其他不推荐用 不专业 内嵌式 在head标签内部放置 <p style="color: #f40; background-color: sky...1 如何在网页中引入css代码
- 行内式 设置标签的style属性 用的不多,后台喜欢用
一般少量的样式可以这样写,其他不推荐用 不专业 - 内嵌式
在head标签内部放置
<p style="color: #f40; background-color: skyblue;">一段文字</p>
选择器 { k:v; k:v; ... } 样式不多情况下 可以采用
<style> /* 通配符选择器 * 表示所有标签 */ /* * { background-color: blue; } */ /* 标签选择器 标签名 一般对一类标签设置样式 采用 */ h1 { color: red; } a { text-decoration: none; } /* id选择器 用的不多 一般用在独一无二的元素 #id */ #box2 { background-color: green; } /* 类选择器 用的最多 .class */ .f30 { font-size: 30px; } </style> </head> <body> <h1>一级标题</h1> <h2 id="box2">二级标题</h2> <p class="f30">段落</p> <div> <ul> <li class="f30">北京</li> </ul> </div> <a href="#">aaa</a> <a href="#">aaa</a> <a href="#">aaa</a> </body>
- 外链式——项目中用的最多
把css单独放在一个或多个文件中,只需要在用到样式的网页中引入即可
- 行内式 设置标签的style属性 用的不多,后台喜欢用
-
让你的网页引入思源字体
2016-07-06 14:34:32这段时间在做官网,设计师出了一份PSD,其他部分都搞完了,但就是字体,怎么我做出来的跟PSD字体完全两码事!?好丑啊!问了一下设计师,原来他用的字体叫思源黑体……我怎么没听过……后来查了才知道思源黑体字体是...这段时间在做官网,设计师出了一份PSD,其他部分都搞完了,但就是字体,怎么我做出来的跟PSD字体完全两码事!?好丑啊!问了一下设计师,原来他用的字体叫思源黑体……我怎么没听过……后来查了才知道思源黑体字体是一款由Adobe和Google联手推出了一款开源字体,而且有七种粗细的字形:ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy。顺便安利一下Chrome的查看网页字体的插件:WhatFont,有了它就可以查看到你页面的文字是什么字体多大行高多少等等。
知道了是思源字体,但怎样搞到我们的网站上去呢?首先想到的当然是web-font。于是就去查,发现第三方服务商有字库看起来不错,也有这种字体而且免费。但体验了一下,感觉很麻烦,要将自己所用到的字拿出来去它网站那里生成字体集。如果每次改动都这样搞那不坑死自己!?而且请求别人的东西还是有点慢和不稳定。Google font也是一种,但被墙得厉害,虽然有360网站卫士常用前端公共库CDN服务,但还是觉得不太靠谱,也没起试了。
那还有什么好方法呢?千辛万苦终于找到它——font-spider(字蛛)!官网http://font-spider.org/index.html
有了它我们可以干什么?我们就可以将我们喜欢的字体包下载下来,然后使用font-spider,它就会自动筛选出我们网页的文字,然后对应的删减字体包中除这些字以外的字,于是!剩下包的大小就很客观了!!
那么怎样使用它呢?
安装的步骤就不说了,跟着官网来就可以了,我使用的是npm安装。然后去它的github里把字体包下载下来,我要下载的是思源字体。https://github.com/aui/gulp-font-spider
现在就可以用起来了:
1.在你需要使用思源字体的CSS中,写@font-face:/*声明 思源字体-Light*/ @font-face { font-family: 'KaiGenGothicSC-Light'; src: url('../font/join/KaiGenGothicSC-Light.eot'); src: url('../font/join/KaiGenGothicSC-Light.eot?#font-spider') format('embedded-opentype'), url('../font/join/KaiGenGothicSC-Light.woff') format('woff'), url('../font/join/KaiGenGothicSC-Light.ttf') format('truetype'), url('../font/join/KaiGenGothicSC-Light.svg') format('svg'); font-weight: normal; font-style: normal; }
2.然后对元素正常使用font-family就可以:
body{ font-family: 'KaiGenGothicSC-Light'; }
3.最后,必须要调用一下这个font-spider才会生效,这一步就是这个插件帮我们自动处理字体包的一步。
在cmd中输入D:\xampp\htdocs\official website\html>font-spider index.html。其实就是这个命令:font-spider ./demo/*.html。由于我的html在以上那个目录,所以我去到那个目录里,最后输入font-spider index.html。现在就可以了。
这时会看到,插件根据原来ttf格式的文件,根据你所需文字自动压缩字体集,并且生成其他几种用于兼容不同浏览器的文件,最后还把原来的ttf文件用一个.font-spider文件夹装起来了。
现在你就可以在你的网站中用上思源字体啦! -
HTML中引入在线图片
2021-02-06 11:38:20 -
解决前端网页引入JS文件出现net::ERR_ABORTED
2020-06-01 15:54:14使用了js库文件,但是样式无法显示,按...经过查找发现是自己网页写的有问题 引入js的时候一定要注意编码格式规范,要写type=“text/javascript” 项目重启一下,这个报错消失,又出现其他错误。 待解决 ... -
Html5在网页中引入视频音频的方法
2018-11-13 17:36:00标签定义视频,比如电影片段或其他视频流。 一段简单的 HTML5 视频: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video> controls 属性供添加播放、暂停和音量... -
登陆界面网页代码_Opera Touch移动浏览器登陆iPad 并引入隐私浏览模式
2020-11-14 07:25:33在本次更新中iOS平台Opera Touch还引入了隐私浏览模式,在启用后浏览器就会自动停止记录访问历史之类的内容。 Opera Touch是一款专为即时搜索网页设计的全新手机浏览器,在强化单手操作的同时搭配 Opera PC 浏览器... -
css引入矢量图标_CSS其他几个总结+实战总结
2021-01-03 06:39:00列表:总结1:CSS icon和切图总结2: CSS 字体总结3:CSS3动画解决方案(含JS)CSS...2、作用:使用CSS Sprite 可以减少网络请求(如每一张小icon图片都会产生加载时间),提高网页加载性能。3、使用:利用backgroun... -
java微信开发引入jssdk一直报invalid url domain错的其他原因
2016-05-27 17:30:38微信当页文档提示的一种解决方式: invalid url domain当前页面...在微信其他文档还有种解决方式: 授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.c -
对构建web服务中JSP技术动态引入和静态引入的理解
2019-07-22 13:26:48%@ include file="其他要引入的jsp文件名"%> 特点:会将引入的jsp文件和当前的jsp文件转译成一个java文件使用 在网页中显示合并后的效果 注意:静态引入的jsp文件不会单独转译成java文件 当前文件和静态映入... -
如何在网页中嵌套其他的HTML文件
2016-06-02 17:03:00html文件引入其它html文件的方法有三种,具体可以看下:1.IFrame引入,看看下面的代码<IFRAME NAME="content_frame" ...</IFRAME>你会看到一个外部引入的文件,但会发现有一个类似外框的东西将其包围,... -
关于在webstorm中引入图片文件无法显示,用其他编辑器显示正常
2018-09-08 10:52:26在写一个网页时,用list-style-image属性设置列表图标时,相对路径设置没有问题,在浏览器调试时却没有显示所需效果,样式表加载正常,属性也正常j加载,但无法找到图片文件,始终没找到问题原因。于是试着用... -
thymeleaf引入公共片段并传递参数
2020-05-31 19:30:36thymeleaf引入其他界面---公共页面元素的抽取 三种引入功能片段的th属性: th:insert :将公共片段整个插入到声明引入的元素中 th:replace :将声明引入的元素替换为公共片段 th:include :将被引入的片段的内容... -
为什么在index.jsp里面引入了common.js,在item-add.jsp以及其他一些jsp文件里面就不需要引入common.jsne ?...
2017-12-16 01:27:00是一个完整的网页。那我们再看item-add.jsp页面,他节点是div,只是一个html的片段,并不是一个完整的网页,在easyUI中,他会做ajax请求,去请求这个的页面,他会把这个页面添加到网页里面。所以网页并没有刷新,也... -
【ttf压缩】网页开发中引入字体文件过大,加载缓慢的解决办法【字蛛】【web Font】
2017-08-15 15:04:21yueyemoyan ...运行安装成功之后就开始压缩了我的目录是这样的我的css文件开头是这样的这里要确保ttf文件一定要有,其他的不管在你的html中也引用了相应的css文件接下来就是最后一步了 生成新的字体库node -
引入bootstrap导致布局混乱
2018-10-21 16:21:34应该将bootstrap首先引入,然后再在下面编写css或者是引入其他css文件。 <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"&... -
css引入特殊字体
2015-11-20 13:25:00...css引入特殊字体建议只是用英文字体,中文字体太大不适合.在CSS中通过@font-face属性来实现网页中嵌入特殊字体.首先获取要使用字体的三种文件格式.EOT,.TTF或.OTF,.SVG, 确保能在主流浏览... -
最简单的 天气预报 引入
2018-03-10 16:02:53一、前言1、目前引入天气预报的初衷仅仅是修饰页面而已,使网页稍微有点时代感,亲切感、体贴感。 2、全部前端引入,一句代码而已二、效果①初步显示②修改地区,如点击图中的湛江,进入如下页面修改为北京点击确定... -
随笔02:jsp引入页面的三种方式
2021-03-01 20:24:181、jsp引入其他页面的方式 – 当我们需要设置一个网页共同的部分时,为了降低代码的耦合,可以直接将其引入 1.1、方式1:page指令 <%@include file="/页面路径"%> <html> <head> <title>... -
网页运行原理
2013-11-21 17:23:41当我们打开一个网页的时候,浏览器会首先创建一个窗口,这个窗口就是我所知道的window对象,也就是整个Javascript运行所依附的全局变量。 为了加载网页文档,当前窗口又需要创建一个...当我们用引入其他的JS时,浏 -
HTML页面中引入CSS和JS的方法总结
2019-04-04 15:17:03HTML文件中怎么样引入CSS样式和JS,这篇文章总结了在...通过这种方式写的样式会覆盖掉其他引入方式的样式,优先选择行内样式。缺点是不利于后期维护,如果一个页面写太多行内样式,也会让页面看着比较乱。 <... -
django模板层之静态文件引入优化
2019-10-03 22:25:311.新手使用 我们一般在初学django的情况下,引入django的静态文件一般有如下两种方式: 通过路径引用: <script type="text/javascript" src="/... 直接从bootcdn或其他网页引用: <link hr... -
前端引入公用模块代码
2020-10-14 17:14:24写网页通常会遇到要公用一个头部区域,底部区域或其他区域。我们已公用头部header为例演示。 1.共用头部header.js document.writeln(` // html写在此处 <ul class="navbar-nav" style="font-size:28px">... -
c标签的 url import 和 redirect
2014-03-27 13:37:13aa bb bb url标签可以构造一个url import标签可以引入其他网页 redirect标签 可以重定向 -
jQuery制作网页版选项卡
2020-12-29 00:41:10网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单...选项卡出现其实只是某一个div获取到了显示的权限,其他的没有显示而已。 •网页代码 选项卡1 <l -
jsp引入其它页面的两种方式
2019-07-25 16:21:36熟悉jsp的知道,有两种include其他页面的方法,一种是说明标签<...我在动态网页制作教程中a.jsp页面上定义了一个 String path = request.getContextPath() , 而这个页面用说明标签引入了一个b.... -
H5网页涂鸦canvas
2017-11-14 17:53:00最近做了个播放页面,标题和一个iframe;需要对这个iframe可以进行网页...本项目没有引入其他的任何工具库,复制代码可以直接运行,下面贴出代码: <!DOCTYPE html> <html lang="en"> <head&g...
-
CSDN如何写花括号并做几点分类?
-
一种基于质谱图频率特征的化合物识别的有效方法。
-
LibraryManagementSystem:图书馆管理GUI应用程序-源码
-
离心泵轴承的技术改造.rar
-
朱老师鸿蒙系列课程第1期-3.鸿蒙系统Harmonyos源码配置和管理
-
js调用安卓iOS方法
-
Spring的整体架构和环境搭建深度解析
-
FFmpeg4.3系列之16:WebRTC之小白入门与视频聊天的实战
-
使用InfoSphereInformationServer集成Teradata数据
-
Python 学习 -Day5(2021.3.2)
-
导电介质结构体表面积分方程的快速求解
-
MySQL 高可用工具 heartbeat 实战部署详解
-
实验室:MIT IT实验室存储库-源码
-
【爱码农】C#制作MDI文本编辑器
-
练习续集关系-源码
-
自动化测试框架Cucumber和RobotFramework的实战对比
-
基于BP神经网络的低压差线性稳压器电磁干扰损伤模型
-
基于Flink+Hudi构建企业亿级云上实时数据湖教程(PC、移动、小
-
实现 MySQL 读写分离的利器 mysql-proxy
-
cordova提示The drawable “screen“ in drawable-land-hdpi has no declaration in the base drawable fold...