html
关注
分享
扫一扫
黄宝康
这个作者很懒，什么都没留下…
展开
-
程序员自定义风扇
效果如下：<!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=edge"> <title转载 2020-07-16 16:05:08 · 447 阅读 · 0 评论 -
js实现音频播放
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> body{ margin: 0; padding原创 2020-05-21 21:54:55 · 2166 阅读 · 0 评论 -
自定义全屏分页插件
pageswitch.js/*! * PageSwitch 1.0 * */(function($){ "use strict"; /*说明:获取浏览器前缀*/ /*实现：判断某个元素的css样式中是否存在transition属性*/ /*参数：dom元素*/ /*返回值：boolean，有则返回浏览器样式前缀，否则返回false*/ var _prefix = (fun...原创 2020-03-23 16:24:37 · 327 阅读 · 0 评论 -
xpath
使用火狐或者谷歌浏览器定位元素。$x("//img[@class='s-news-img']")火狐浏览器安装一个try-xpath插件，也非常好用。其中浏览器给我们提供了复制xpath的功能，在实践学习中，我们需要有能力编写xpath。语法：tag[attribute='value']在css选择器当中id用#,class用.相对路径和绝对路径问题/表示一层一层往下查找/...原创 2020-03-20 17:55:23 · 298 阅读 · 0 评论 -
页面进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .loading{ width: 100%; height: 100...原创 2020-03-13 11:54:26 · 474 阅读 · 0 评论 -
HTML左中右div布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin: 0;padding: 0 } #wrap{ ...原创 2020-03-11 16:12:32 · 2588 阅读 · 0 评论 -
select下拉选中，页面跳转
<select id="newLocation"> <option selected>Select a topic</option> <option value="script06.html">Cross-checking fields</option> <option value="script07原创 2018-05-30 16:06:35 · 1996 阅读 · 0 评论 -
文字过长显示省略号的一样简单解决方法，不用额外的其他框架
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字过长显示省略号</title><style type="text/css">.longtex原创 2018-06-07 14:33:55 · 5684 阅读 · 0 评论 -
CSS3中text-shadow,动画animation和transform-style以及@keyframes的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试text-shadow</title> <style type="text/css">原创 2018-08-14 09:12:51 · 674 阅读 · 0 评论 -
CSS3中border-image的使用
border-image语法border-image:url(border.png) 70 70 70 70 repeat第一个是图片路径，接下来的四个是切割图片的宽度，单位为像素，可以可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70，最后一个为图片延伸方式，可选参数分别为：round(平滑)，repeat(重复) ，stretch(拉伸)专业墙纸贴纸厨房用具装饰出...原创 2018-08-14 16:03:58 · 518 阅读 · 0 评论 -
CSS3中颜色渐变色彩
CSS3 Gradient分为线性渐变（linear）和径向渐变（radial）。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。线性渐变语法：linear-gradient(to bott...原创 2018-08-15 13:54:22 · 857 阅读 · 0 评论 -
HTML页面meta标签内容详解
所有的浏览器都支持meta标签，用于提供页面相关信息，信息都是以名（http-equiv和name标示）/值（content标示）对的形式现实。属性content，用于定义http-equiv(定义http头部信息，服务器向浏览器提供的信息)和name（指定网页信息的相关的名称）相关的信息；http-equiv就是在HTTP头部指定了一些服务器返回给浏览器的有用信息＜meta http-eq...转载 2019-05-31 11:58:55 · 620 阅读 · 0 评论 -
checkbox制作开关样式
如下是学习心得，如何制作一个开关样式。.hbk-switch{ display: inline-block; vertical-align: top; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms...原创 2019-10-10 10:17:47 · 747 阅读 · 0 评论 -
window.open的使用
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;window.open的使用&lt;/title原创 2018-05-30 15:25:02 · 354 阅读 · 0 评论 -
iframe的使用
<body> <iframe src="iframe01.html" name="icontent" id="icontent"></iframe> <h1>Main Content Area</h1> <h2> <a href="page1.html原创 2018-05-30 14:22:46 · 471 阅读 · 0 评论 -
iframe 迫使页面总是单独显示
if (top.location != self.location) { top.location.replace(self.location);}首先，检查当前页面（self）的位置是否处于浏览 器窗口层次结构的最顶层。如果当前页面不在顶层，就将顶层页面替换为当前页面 的位置。这迫使当前窗口显示我们的页面，而且只显示我们 的页面。可以直接将 top.location 设置为...原创 2018-05-30 13:49:16 · 505 阅读 · 0 评论 -
模仿bootstrap写响应式图片布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Ty原创 2017-09-05 09:54:43 · 1218 阅读 · 0 评论 -
box-shadow的用法
语法box-shadow: h-shadow v-shadow blur spread color inset;demo小案例：<!DOCTYPE html><html><head><style> body{margin:30px;background-color:#E9E9E9;}div.polaroid{width:294px;padding:10px 10px 20px原创 2017-09-05 10:54:35 · 1696 阅读 · 0 评论 -
Html中发现a标签包含一个img标签，对齐方式没有居中问题
自己一直是搞后端开发的，偶然接手一个项目，自己制作了一个比较简单的html页面，发现了一个问题，a标签包含img标签后，对齐方式改变了，纳闷了许久，最终还是解决了。<html> <head> <style type="text/css"> *{ margin: 0; padding: 0;原创 2017-08-31 19:06:37 · 4692 阅读 · 1 评论 -
DOM事件处理方式
DOM事件处理分DOM 0级处理，2级处理，以及兼容IE8以下版本。以下代码可以兼容各大浏览器版本。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM事件</title></head><body> <div id="div"> <button id="btn">原创 2017-09-19 13:59:41 · 569 阅读 · 0 评论 -
我对onselect和onchange事件的误解
很少用onselect事件，今天我才发现onselect事件：当选择一段文字的时候触发。以前我一直以为onselect和onchange都是是内option元素切换的时候触发。是我误解了onselect事件。<!doctype html><html><head><meta charset="utf-8"><title>onselect与onchange的区别</title><script>原创 2017-09-12 19:24:40 · 5908 阅读 · 0 评论 -
用Jquery获取iframe父页面元素
方法一：$("#父窗口元素ID",window.parent.document);对应javascript版本为:window.parent.document.getElementById("父窗口元素ID")；取父窗口的元素方法：$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector,window.parent.paren原创 2017-09-12 20:47:32 · 442 阅读 · 0 评论 -
让所有浏览器支持HTML5 video视频标签
方法很简单，只要调用一段js，就可以让主流浏览器实现video标签的视频播放。使用方法： 要想让主流浏览器都支持HTML5标签，使用非常简单，只要链接一个js文件就可以了。所以，只要您的页面上（头部或底部）有这么段代码：<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>对于原创 2017-11-01 20:08:01 · 3054 阅读 · 0 评论 -
给Eclipse代码编辑区设置背景图片
1：找到Eclipse的安装路径，进入plugins目录2：进入带ui主题的文件夹3：主要关注的是css何images文件目录 在css文件增加以下样式.MPart StyledText { background-image: url(./1.jpg); background-color: white; background-position: no-repeat;原创 2017-12-28 19:11:23 · 10173 阅读 · 3 评论 -
eWebEditor编辑器的使用
eWebEditor是一款文本编辑器，个人并不是很看好它，反而感觉它的样式比较丑陋，以前在项目上大都使用KindEditor或者Layui自带的Editor，对图片上传，视频上传等支持的比较好。言归正传，今天我带领大家如何使用eWebEditor。从网上下载eWebEditor，下载之后的目录结构如下：我的是在Eclipse里打开的。主要是用到了ewebeditor.htm。而ew原创 2018-01-10 11:19:52 · 5808 阅读 · 0 评论 -
document.querySelector()方法
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。获取文档中id=”container”的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti原创 2018-03-22 20:17:13 · 159413 阅读 · 30 评论 -
iframe交互问题，浏览器存在差异
搞前端的都知道，iframe存在跨域访问的问题。 在不同浏览器中，google浏览器出于安全考虑，对于file协议有安全限制，无法用js访问本地资源。为了说明不同浏览器间iframe访问的差异，我将举例说明。huangbaokang.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &a原创 2018-04-10 14:20:09 · 1961 阅读 · 0 评论 -
后台系统定时检查session的状态，当session失效的时候，自动跳转到登录页
这个需求比较常见，一般做法是在公共的引用文件中加入js定时器，定时检查session的状态。公共文件一般是一些js，css文件，以及一些自己封装的js函数库等。 如在公共文件include_common.jsp文件中加入如下代码：&lt;!-- 每分钟检查session的状态，当session过期的时候，跳到登录页面 --&gt;&lt;script type="text/java...原创 2018-04-19 14:16:02 · 5315 阅读 · 2 评论 -
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 div，p，h1，form，ul，li是块元素的例子。display:inline就是将元素显示为行内元素.inline元素的特点是： 和其他元素都在一行上； 高，行高及原创 2017-09-05 09:39:10 · 450 阅读 · 0 评论