Html+Css+Js
关注
分享
扫一扫
文章平均质量分 53
Div+Css
林中明月间。
努力又平庸 ，自卑又内敛 。
展开
-
＜img＞是什么元素？可替换元素
什么是可替换元素？在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。其他的可替换元素1. 典型的可替换元素<iframe> <video&g转载 2023-02-20 16:57:07 · 293 阅读 · 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 · 3824 阅读 · 0 评论 -
input 标签的 accept 属性、excel等文件类型
https://blog.youkuaiyun.com/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 · 8103 阅读 · 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 · 1077 阅读 · 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 · 693 阅读 · 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 · 8621 阅读 · 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 · 8862 阅读 · 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 · 5171 阅读 · 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 · 3108 阅读 · 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 · 1288 阅读 · 0 评论 -
拍照、上传图片身份证，电话验证表单提交
FileReader+Ajax+PHP实现异步上传图片和预览：https://blog.youkuaiyun.com/fdipzone/article/details/37974511原理：1.使用FileReader 读取图片的base64编码2.使用ajax，把图片的base64编码post到服务器。3.根据接收到post的数据分析图片的类型(jpg,gif,png)，并把bas...原创 2019-03-13 18:41:26 · 3055 阅读 · 0 评论 -
网页点击下载文档
h5网页下载链接弹窗 <a href="文件路径" download="文件名称">点击下载</a>1.下载项目中的文件如果要下载的是一个excel文件模板，可以先将该文件放在项目文件夹下面，然后在页面下载按钮上加上onclick事件：<i title="下载" onclick="window.open('http://www.xxx.com/路径/文件.原创 2018-11-26 17:11:59 · 1262 阅读 · 0 评论 -
marquee 详解
转载：https://www.cnblogs.com/zmr2520/p/5307481.htmlmarquee标签：创建 一个滚动的文章字幕，应用于文字、图片、表格基本语法：<marquee>文字、图片代码、Flash动画代码和gif动态小代码</marquee>marquee标签属性direction ：表示滚动的方向（默认为left） lef...转载 2018-11-20 10:13:29 · 2350 阅读 · 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 · 3570 阅读 · 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 · 930 阅读 · 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 · 212 阅读 · 0 评论 -
页面加载完毕相关信息淡入效果
参考别人的博客：https://blog.youkuaiyun.com/shuaizi96/article/details/77505449首次打开网页时，因为需要加载一些第三方js包的原因，页面内容显示出来会有或长或短的延迟时间，如果延迟时间太长，那么就需要在这之前加入loading动画来实现一个过渡效果在网上找到一个不错的CSS加载动画效果：30种CSS3炫酷页面预加载loading动画特效这...转载 2018-09-13 16:14:17 · 3630 阅读 · 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 · 2805 阅读 · 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 · 339 阅读 · 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 · 2360 阅读 · 0 评论 -
导航栏下拉至一定高度后固定在顶部的特效
转自：https://blog.youkuaiyun.com/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 · 2444 阅读 · 0 评论 -
html 不规则表格A4纸、html A4纸样式、毫米像素相互转换
https://www.jianshu.com/p/ae843652a021https://blog.youkuaiyun.com/a772116804/article/details/78836480https://blog.youkuaiyun.com/a772116804/article/details/79581610<table style="border-collapse: colla...转载 2019-09-18 14:24:50 · 3612 阅读 · 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 · 2149 阅读 · 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 · 1327 阅读 · 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 · 6548 阅读 · 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 · 4069 阅读 · 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 · 2319 阅读 · 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 · 725 阅读 · 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 · 704 阅读 · 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 · 4712 阅读 · 0 评论 -
input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
转自：http://blog.youkuaiyun.com/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 · 3435 阅读 · 0 评论 -
HTML里怎么给普通按钮添加超链接
使用javascript，比如：这是一个按钮 看到abc.html了吗？改成你想要链接到的页面URL。原创 2018-01-25 18:01:32 · 11699 阅读 · 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 · 4298 阅读 · 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 · 781 阅读 · 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 · 20570 阅读 · 0 评论 -
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 · 1553 阅读 · 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 · 4989 阅读 · 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 · 4258 阅读 · 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 · 2563 阅读 · 0 评论 -
动态提示下拉框
a{color:red;text-decoration:none;font-size:12px}动态提示的下拉框 请输入1或2或3或4或5进行测试： 1 12 123 1234 2 23 234 2345 3 34 345 3456 5 51 51原创 2017-12-08 11:56:38 · 703 阅读 · 0 评论