![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Html+Css+Js
文章平均质量分 53
Div+Css
林中明月间。
努力又平庸 ,自卑又内敛 。
展开
-
<img>是什么元素?可替换元素
什么是可替换元素?在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。其他的可替换元素1. 典型的可替换元素<iframe> <video&g转载 2023-02-20 16:57:07 · 241 阅读 · 0 评论 -
Html 使用svg图标、iconfont的使用方法
https://zhuanlan.zhihu.com/p/54088196SVG 代码也可以写在一个以.svg结尾的文件中,然后用<img>、<object>、<embed>、<iframe>等标签插入网页。<img src="search.svg"><object id="object" data="search.svg" type="image/svg+xml"></object><embed id=转载 2021-02-05 11:31:50 · 3409 阅读 · 0 评论 -
input 标签的 accept 属性、excel等文件类型
https://blog.csdn.net/mp624183768/article/details/84761914?ops_request_misc=&request_id=&biz_id=102&utm_term=input%2520accept&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-2-84761914.nonecasehttps://blog.转载 2020-12-08 18:42:41 · 7696 阅读 · 0 评论 -
js空格处理
https://www.cnblogs.com/a-cat/p/8872498.htmlJS判断字符串是否为空或是否全为空格var test = " ";//为空或全部为空格if (test.match(/^[ ]*$/)) { console.log("all space or empty");}str.trim()方法 trim()方法是用来删除字符串两端的空白字符并返回,trim方法并不影响原来的字符串本身,它返回的是一个新的字符串。 缺.转载 2020-11-11 19:29:35 · 1036 阅读 · 0 评论 -
图片懒加载\滚动加载
* { padding: 0; margin: 0;}#main { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -moz-column-gap:20px; -webkit-column-gap:20px; column-gap:20px; paddin转载 2017-11-27 18:27:46 · 674 阅读 · 0 评论 -
css hover控制其他元素
<html><body><style> #a:hover {color : #FFFF00;} #a:hover > #b:first-child{color : #FF0000;} #a:hover > #b{color : #FF00FF;} #a:hover + #c{color : #00FF00;} #a:hover + #c > #b{color : #0000FF;}</st.转载 2020-06-15 22:35:25 · 8563 阅读 · 0 评论 -
H5 table表格案例、边距 解析(表格带有滚动条)
一个简单的表格:<table id="tab1" width="100%" cellspacing="0" border="1px"> <thead> <tr> <th>第一季度</th> <th>第二季度</th> <th>第三季度...原创 2017-12-18 19:59:16 · 8789 阅读 · 0 评论 -
手机h5页面唤起打电话、发邮件、发短信功能、QQ交谈
支持html5的浏览器在web页面里面实现拨打电话的功能<a href="tel:139xxxxxxxx">一键拨打号码</a><a href="mailto:yuojian@163.com">一键发送邮件</a><a href="sms:139xxxxxxx">一键发送短信</a>点击跳转qq聊天窗口&...转载 2018-04-28 12:23:29 · 4845 阅读 · 0 评论 -
Vue video标签poster属性在安卓微信中不生效问题解决
poster属性这是用来引用video的封面图片的!!!!!style="object-fit:cover"其实你还可以改变属性的值,比如说:style="object-fit:fill"会拉伸图片,,,,,<video width="100%" height="100%" controls="controls" poster="封面图地址" style="obj...转载 2020-01-16 14:05:17 · 2999 阅读 · 1 评论 -
js导出Excel文件,不兼容ie
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="tools"> ...转载 2019-04-11 11:32:36 · 1263 阅读 · 0 评论 -
拍照、上传图片身份证,电话验证表单提交
FileReader+Ajax+PHP实现异步上传图片和预览:https://blog.csdn.net/fdipzone/article/details/37974511原理:1.使用FileReader 读取图片的base64编码2.使用ajax,把图片的base64编码post到服务器。3.根据接收到post的数据分析图片的类型(jpg,gif,png),并把bas...原创 2019-03-13 18:41:26 · 3025 阅读 · 0 评论 -
网页点击下载文档
h5网页下载链接弹窗 <a href="文件路径" download="文件名称">点击下载</a>1.下载项目中的文件如果要下载的是一个excel文件模板,可以先将该文件放在项目文件夹下面,然后在页面下载按钮上加上onclick事件:<i title="下载" onclick="window.open('http://www.xxx.com/路径/文件.原创 2018-11-26 17:11:59 · 1221 阅读 · 0 评论 -
marquee 详解
转载:https://www.cnblogs.com/zmr2520/p/5307481.htmlmarquee标签:创建 一个滚动的文章字幕,应用于文字、图片、表格基本语法:<marquee>文字、图片代码、Flash动画代码和gif动态小代码</marquee>marquee标签属性direction :表示滚动的方向(默认为left) lef...转载 2018-11-20 10:13:29 · 2314 阅读 · 1 评论 -
Jquery跳转页面后的导航栏添加选中后样式
<!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><met...原创 2018-05-17 20:00:19 · 3537 阅读 · 2 评论 -
H5视频、音频详解
iframe嵌套视频,视频全屏用不了<iframe width="100%" height="100%" src="Videosrc" frameborder="0" align="center" allowfullscreen="true"></iframe><body><!-- 视频:video source 音频:audio 媒体元...原创 2018-10-10 17:45:17 · 898 阅读 · 0 评论 -
H5拖放操作。
<style> li{ width: 100px; height: 30px; background: yellow; margin: 10px; list-style: none; } #div1{ width: 100px; height: 100px; background: red; margin: 200px; }</s...转载 2018-10-09 22:15:15 · 187 阅读 · 0 评论 -
页面加载完毕相关信息淡入效果
参考别人的博客:https://blog.csdn.net/shuaizi96/article/details/77505449首次打开网页时,因为需要加载一些第三方js包的原因,页面内容显示出来会有或长或短的延迟时间,如果延迟时间太长,那么就需要在这之前加入loading动画来实现一个过渡效果在网上找到一个不错的CSS加载动画效果:30种CSS3炫酷页面预加载loading动画特效这...转载 2018-09-13 16:14:17 · 3609 阅读 · 1 评论 -
图文环绕布局css
<style> .box{ width: 500px; border: 1px solid #000; } .box img{ float: left; }</style><body> <div class="box"> <img src="img/1.jpg" alt=""> <p>这是内...原创 2019-10-14 16:31:05 · 2762 阅读 · 0 评论 -
php input上传图片导致所有输入数据都为null问题
使用form表单来同时提交输入数据和上传文件,但是可能不成功,可能有如下两种问题:1、输入数据OK,但是后台$_FILES里面没有文件,这种原因一般是form表单里漏了一个属性,加上enctype="multipart/form-data"即可2、另一种情况是本来输入数据上传成功,但是加入上传文件,也加入了上述属性,但是提交后后台所有数据都为null了,不会报错,这种情况是上传文件过大,一...转载 2019-04-03 09:54:02 · 751 阅读 · 0 评论 -
左侧滑动侧边栏 slideou.js
<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=de...转载 2019-04-12 22:24:42 · 318 阅读 · 0 评论 -
左侧滑动侧边栏 原生js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&...转载 2019-04-12 22:39:27 · 2324 阅读 · 0 评论 -
导航栏下拉至一定高度后固定在顶部的特效
转自:https://blog.csdn.net/vailook/article/details/53783691<script type="text/javascript"> $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到docu...转载 2017-12-09 09:22:43 · 2419 阅读 · 0 评论 -
html 不规则表格A4纸、html A4纸样式、毫米像素相互转换
https://www.jianshu.com/p/ae843652a021https://blog.csdn.net/a772116804/article/details/78836480https://blog.csdn.net/a772116804/article/details/79581610<table style="border-collapse: colla...转载 2019-09-18 14:24:50 · 2316 阅读 · 1 评论 -
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-...原创 2019-09-10 15:31:48 · 2121 阅读 · 0 评论 -
jq实现星星评价
参考:https://www.jianshu.com/p/02969846f1edhttps://www.cnblogs.com/baixuemin/p/6492257.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...转载 2019-07-02 22:55:26 · 1270 阅读 · 0 评论 -
鼠标悬停表格上显示这一格的全部内容
转自:https://www.jb51.net/article/86347.htm<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/jav...转载 2019-06-12 16:22:09 · 6355 阅读 · 0 评论 -
jq、js 动态循环100个div
js:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>div100</title> <style> div{ width: ...转载 2019-05-17 17:41:41 · 4026 阅读 · 0 评论 -
jq 二级下拉并把值添加到input框
css:.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: auto; -webkit-overflow-scrolling: touch; backgrou...原创 2018-03-08 13:05:31 · 2289 阅读 · 0 评论 -
优惠券页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="js/rem.js"></script> <meta http-equiv="X-UA-Compatible" content="ie=edge...原创 2019-04-17 14:36:48 · 632 阅读 · 0 评论 -
左侧滑动侧边栏 slideout.js 简单
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Slideout Demo</title> <meta http-equiv="cleartype" content="on"> <...转载 2019-04-12 22:50:34 · 682 阅读 · 0 评论 -
css左右两栏、左中右三栏布局
左右两栏:<style type="text/css"> .wrap{ margin: 0 auto; width: 1200px; } #left{/*左边宽度固定*/ width: 200px; height: 500px; background: pink; float: left; } #right{ height: 500px; ...原创 2018-09-06 16:33:28 · 4677 阅读 · 0 评论 -
input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
转自:http://blog.csdn.net/doguanghan/article/details/69628017?utm_source=itdadao&utm_medium=referral <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm...转载 2018-02-06 17:24:28 · 3378 阅读 · 0 评论 -
HTML里怎么给普通按钮添加超链接
使用javascript,比如:这是一个按钮 看到abc.html了吗?改成你想要链接到的页面URL。原创 2018-01-25 18:01:32 · 11642 阅读 · 0 评论 -
网站hover导航二级菜单
<style>header { width: 100%; height: 60px; margin: auto; background: #4b94f2;}header .nav { width: 1150px; padding: 0 25px; margin: 0 auto; height: 100%; display: flex; f...原创 2018-01-25 14:12:44 · 4260 阅读 · 0 评论 -
仿商城菜单样式、隐藏
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>jQuery仿天猫分类菜单代码</title><link rel="stylesheet" href="css/style.css" />&原创 2017-12-01 18:10:35 · 762 阅读 · 0 评论 -
html 文字两边加横线\竖线\ Css3中间文本两侧横线、左侧添加一个竖线
第一种://横线<style> .exple { height: 50px; line-height: 60px; text-align: center; } .order .line { display: inline-block; width: 250px; // 横线长度 border-top: 1...原创 2017-11-11 14:24:05 · 20045 阅读 · 1 评论 -
html里面type的主要类型 || HTML5新增表单控件和表单属性
placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。值 "text/css" 指示内容是标准的 CSS。text/css和text/javascriptbutton:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。<br><input...原创 2017-11-09 10:46:51 · 1522 阅读 · 0 评论 -
如何实现网页鼠标浏览左边的导航右边显示对应的页面
#left_nav{width:320px;}#left_nav ul {list-style: none;margin: 0; padding: 0;overflow:hidden; float: left;}#left_nav ul li{width: 80px; height: 30px ;border: 1px solid;}#left_nav .active {background原创 2017-12-13 11:40:48 · 4952 阅读 · 1 评论 -
如何实现左边为导航栏点击后右边为连接页面
如何实现左边为导航栏点击后右边为连接页面function setTab(m,n){ var tli=document.getElementById("leftmenu"+m).getElementsByTagName("li"); var mli=document.getElementById("mcont"+m).getElementsByTagName("ul"); f原创 2017-12-13 12:02:52 · 4221 阅读 · 0 评论 -
input的required属性
<form action="demo-form.php"> Username: <input type="text" name="usrname" required> <input type="submit"></form>当一个input标签设置了required属性时,若属性值为true,则表示当能容为空时,不允许提交inpu...原创 2017-11-16 16:21:01 · 2529 阅读 · 0 评论