草巾冒小子的博客

CSS实现：background 渐变色+图片（含案例、代码、截图）background实现背景：渐变色+图片（含案例、代码、截图）效果截图示下：演示效果，截图示下：代码如下：正确使用#色值，代码示下：/*大背景图区域*/.bg1{ background: url(static/images/tabs-style2/wyc-bg.png) no-repeat center center, linear-gradient(105deg, #F8FCFF 0%, #C4CBD5

a标签：网页超链接中隐藏的钓鱼攻击先看一条代码：<a href="" rel="noopener noreferrer" >跳转到2页</a>1. target="_blank" 导致的钓鱼攻击target="_blank" 导致的钓鱼攻击2. window.opener.location为什么说window.opener.location.href恶意跳转？3. 资源统计：html a标签链接里面为什么要使用 rel="noopener norefe

密码双向加密

重要代码：<!-- apple强制全屏，显示在状态栏下方 --><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><!-- UC默认竖屏 ，UC强制全屏 --><meta name="full-screen" conte

html引用自定义字体 - 设置篇网页中不同的字体，代码是怎么定义的？怎么引用外来字体文件？

-webkit-transition:background-color .3s;transition:background-color .3s;

translateY鼠标hover触发动画 - 上下移动效果图截图：参考代码：.first-screen ul li:hover { border: 2px solid #08f; -webkit-transform: translateY(-8px); transform: translateY(-20px); -webkit-transition:...

html5新标签&amp;lt;head&amp;gt;、&amp;lt;nav&amp;gt;、&amp;lt;footer&amp;gt;兼容性 - 经验小结，处理方案IE支持：IE8或更早的版本不支持HTML5的&amp;lt;nav&amp;gt;标签和媒介查询（MediaQuery）。我们需要引用css3-mediaqueries.js（或者respond.js）和html5shim.js来提供支持。如果你不打算使用html5

1. 效果图2. 代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;css3动画-图片开关灯阴影效果&lt;/title&gt;&lt;style type="text/css"&gt; ul,li{list-sty

1. 效果图2. 代码&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt;&amp

1. 效果图2. 代码如下：&amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;meta charset=&

动画过度都很流畅。这里以gif为模拟效果。1. 效果图2. 代码如下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3特效 - 会呼吸的button按钮&lt;/title&gt; &lt;style type="text/

1. 效果图2. 代码如下&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;CSS3动画 - 心脏跳动&amp;lt;/title&amp;gt; &

1. 效果图2. 代码如下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"/&gt; &lt;title&gt;呼吸灯&lt;/title&gt; &lt

解决IE6中浮动元素的margin双倍边距问题IE6中，第一个浮动到父元素边上的元素，如果含有该方向的margin值，那么margin会以双倍显示。即：浮动元素的左边距在IE6上为所设定的左边距的两倍。这个问题只会发生在浮动行的第一个浮动元素上。准确的说：应该是每一行的第一个元素都会受此影响。为了解决该问题，需要给浮动元素添加属性display: inline，即可解决。除...

什么是css hack？

IE浏览器兼容性提示这里只给大家介绍简单的提示方式：js弹框提示或者HTML页面的文字提示： html代码 1 ： &lt;!--[if lte IE 8]&gt;&lt;style type=&quot;text/css&quot;&gt; .items-btn{display:none;}&lt;/style&gt;&lt;script type=&quot;text/javascript&amp

HTML中 空格是最常用的实体 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。 如需显示小于号，我们必须这样写 < 或 < 但是通常情况下，我们都是用实体名(前者)，而不是数字(后者)，原因就在于实体名(前者)名称易于记忆。 注意：坏处在于，

随着现在互联网时代的井喷式发展，程序员疲于满足用户需求的不断增长，忙于完成各式各样的特效和各式各样的功能，所以如果不经常总结工作中的细节处理是绝对不能达到用户的需求和技术层次的要求的。 今天，就总结一下，关于键盘的键码值问题。键码值对照表 - 表1 :键码值对照表 - 表2 :具体 代码示例，请参考文章 javascript监听键盘事件 -...

360浏览器模式对页面有一些出乎意料的效果的影响： 众所周知，360浏览器有两种模式：兼容模式和极速模式。两种模式下，兼容性不同，有时会导致页面效果不尽相同，各有差异。但模式选择具体如何定的，尚且抛开不管，单就页面的一些兼容性处理来说，目前还远远不足以和google、firfox、等等其他PC浏览器和手机浏览器相媲美。例如：html代码如下<div class="er-code"> <

select自定义箭头样式？兼容性？html代码如下:<div class="selectwrap"> <div>类别</div> <select id="worktype"> <option>最新流行音乐</option> <option>经典金属音乐</option> <option>潮流休闲音乐</option> </se

IE浏览器存在多种兼容问题掌握技巧，不再害怕html代码块代码块语法遵循标准markdown代码，例如：&lt;!DOCTYPE html&gt; &lt;!--[if lt IE 7 ]&gt;&lt;html class="ie6"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7 ]&gt;&lt;html class=&quo

IE浏览器存在多种兼容问题掌握技巧，不再害怕用IE浏览器 打开网站首页，为何首页显示的是手机端页面？注意：当前使用的是 IE8及其以下版本的ie浏览器下面给出名称为：CheckMobile.java文件中部分代码（编译之前），具体示下：JAVA代码块，如下：...部分省略...package com.fh.util;import java.util....

IE浏览器存在多种兼容问题掌握技巧，不再害怕IE浏览器 对 jquery版本的兼容性注意： ie9 / ie8 / ie7 …版本的IE浏览器，不兼容jquery中的部分属性方法；以 jquery.1.7.2版本为例：问题描述，示图如下： 代码块简略，示图如下： html文件，部分代码如下：...部分省略...&amp;lt;script src='js/j...

javascript监听键盘点击时间，比如：enter回车表单提交、禁止F5刷新、禁用鼠标右键等等 本文仅简单做个介绍，权当抛砖引玉了；如果朋友们有更好的建议或者意见，欢迎留言评论。代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti...

IE浏览器下，有的图片会出现一个多余的边框注意： * 你的图片是否为超链接？ *如果，图片 &lt;img&gt; 标签的父元素中有&lt;a&gt;标签，那么在ie浏览器下查看图片的时候，一般情况下，图片会出现一个多余的外边框；这样一来，就显得尤为尴尬，尤为难看；下面我们来看一下，IE8浏览器下，不同代码下，几种效果图：css样式代码如下：...

如何实现多个.html静态页，引用同一个header.html和footer.html文件？ 前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件（footer：CopyRight、友情链接等部分） HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件？因保密等诸多因素，线上项目运行效果，暂不推荐大家...

后台UEditor富文本编辑器 ，编辑的代码被强制过滤，并被强制修改成&lt;p&gt;标签？导致前台页面效果不对？ueditor富文本编辑器，虽然好用，但是很多时候，如果没有足够的使用经验，一般是很难找寻其中的诀窍； 尤其，使用中出现的诸多问题，列举如下： 很多 html 代码被替换成了一堆 &lt;p&gt;···&lt;/p&gt; 标签？ 富文本框的 width 和...

关于MUI框架中，”侧滑导航”之”div模式下拉菜单”的a标签（超链接）的失效问题？ 截图和讲解图片的顺序如下所示：图1图2 · 官方的截图图3 · 官方的截图图4 · 官方的截图图5 · 自定义模板的截图主要HTML、JS代码示下：&amp;lt;p&amp;gt;···部分代码省略···&amp;lt;/p&amp;g...

前端如何监听路由的变化？如何根据前端路由的变化，去操作相应的DOM？ 本文从前端层面上，大致解读一下，前端路由的监听与相关DOM操作的方法。效果图预览：首先我们看一下html代码：&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta char

关于微信内置浏览器，打开图片上传功能，调用的问题前段时间，项目完结测试的时候，同事打开魅族手机测试，无意中发现一个奇葩的问题！ 描述：显示的是文件系统，列表式的，没有调用相机的功能图标，为什么呢？（忘记截图了） 后来发现，是因为手机系统的设置原因；而并非是因为页面的代码问题。先给大家看一下我手头的其他机型 的打开效果：01. HUAWEI 荣...

element-ui 省市区三级联动：选择即改变 注意： 阅读本文，经验传授： vue.js 单组件引入外部或自定义的 .js文件，并调用文件内的 json数据； 灵活使用element-ui的select组件，“ 选择即改变 ” 即 (点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项)； 任意二级、三级联动的json 格式的数据包，都可以拿...

如何自定义 input 复选框的样式作为一个前端开发者，很多时候都会遇到不同的开发需求，比如：自定义下拉选项卡的样式自定义radio单选框的样式自定义checkbox复选框样式自定义input输入框样式自定义ul,li列表的样式自定义多背景自定义table下td多行文字的垂直居中问题等等：这些问题，有的需要通过代码设置，来取消浏览器或者设备自带的或者默认的样式。但往往，有的可以修改