HTML,HTML开发教程,HTML问题

网站如何创建百度地图显示地理位置

2020-11-20

在做企业网站的时候，我们会放置一个地理位置，我们可以引用百度地图，来显示我们的店铺所在位置效果演示：操作步骤1、打开百度地图https://map.baidu.com/，搜索输入地址2、点击地址3、会出现如下视图4、点击分享5、复制我们想要的地址6、复制https://j.map.baidu.com/b8/S ，粘贴到我们的iframe框架代码中7、完整demo代码<!DOCTYPE;html> <html> <head> ;;;<meta;charset="UTF-8"> ;;;<title>地图演示</title> </head> <meta;content="width=device-width,initial-s

html页面加载好再进入网站功能实现

2019-10-08

2954 0

css代码：#loadingDiv{position:absolute;left:0;width:100%;top:0;background:#fff;z-index:10000} #loadingDiv;div{position:absolute;width:auto;height:105px;padding-left:215px;background:#fff;url(../images/loading.gif);no-repeat;center;center/50px;50px}js代码：var;_PageHeight;=;document.documentElement.clientHeight, ;; _PageWidth;=;document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） var;_LoadingTop;=;_PageHeight;>;61;?;(_PageHeight;-

使用clipboard.js 实现复制隐藏文本的内容

2019-09-18

4248 0

一、起初是使用浏览器提供了 copy 命令。document.execCommand("copy")如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用; copy 命令，将文本复制到剪切板。但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好用了<script> function;copyUrl();{ ;;;;$("#copyinput").select();;;//;选择对象; ;;;;document.execCommand("Copy");;//;执行浏览器复制命令; ;;;;alert("已复制到剪贴板！"); } <script>但是#copyinput不能

html选项卡封装案例及调用

2019-08-27

2653 0

选项卡在网页中经常会用到，以下是一个简单的案例封装。1、代码封装function;tabSwtich(m,c,a){ ;;;;var;change=function(i){ ;;;;;;;;;;;;m.each(function(index){ ;;;;;;;;;;;;;;;;index==i?$(this).addClass(a):$(this).removeClass(a); ;;;;;;;;;;;;});; ;;;;;;;;;;;;c.each(function(index){ ;;;;;;;;;;;;;;;;index==i?$(this).show():$(this).hide(); ;;;;;;;;;;;;}); ;;;;;;;;}; ;;;;m.each(function(i){ ;;;;;;;;$(this).mouseenter(function(){ ;;;;;;;;;;;;change(i); ;;;;;;;;}); ;;;;}) }2、调用方法：$(functi

自定义radio单选按钮样式

2019-06-06

3194 0

思路：1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；2. 然后把真正的单选按钮隐藏起来；3. 最后把生成内容美化一下。<!DOCTYPE;html> <html> <head> <meta;charset="UTF-8"> <meta;content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0";name="viewport"> </head> <body> <p;class="tm2"> ;;;;<span>性别：</span> ;;;;<label;for="sex

图片延时加载jquery-lazyload.js的使用

2019-01-25

3450 0

细心的游客可能会发现，本网站加了图片延时加载，使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。jquery-lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，以下是使用详解：附件：jquery-lazyload.js.txtimg标签：<img;data-original="/uploads/book/20190108/5b44a5cb123633242b4cba83ac87cdc1.jpg";alt="";>js代码：$(function();{;;;; $("img").lazyload({effect:;"fadeIn",placeholder:;"/images/4e8b6995-

prettify实现html页面黑色高亮代码

2017-06-18

2893 0

头部引入prettify样式和js：<link;href="/public/static/index/css/prettify.css";rel="stylesheet">;;;; ;;;; <script;src="/public/static/index/css/prettify.js"></script>给body加onload="prettyPrint()"方法<body;onload="prettyPrint()">底部script代码：<script>;;;; window.onload;=;function;();;;; {;;;;;; prettyPrint();;;;; };;;; $(function();{ ;;prettyPrint(); ;;$('pre').addClass

html当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

2017-12-20

4392 0

当页面滚动到距顶部一定高度时某DIV自动隐藏和显示<script> $(function(){;; ;;var;height;=;$(".subMenu1").offset().top;;;//指定位置class ;;;$(window).scroll(function(){;; ;;;if($(window).scrollTop()>height){;; ;;;;$("#back").show();;;;;;;;;;;;;;; ;;;};; ;;;else{;; ;;;;$("#back").hide();;; ;;;};;; ;;});; ;; }) </script>

HTML5 video标签视频比例拉伸

2017-08-26

4521 0

HTML5 video标签视频比例拉伸项目中有碰到视频比例拉伸的需求，可以通过以下方法来实现视频的拉伸。<style> video;{ ;;;;object-fit:fill; ;;;;width:800px; ;;;;height:320px;}</style><h1>测试视频比例拉伸：</h1> <style> ;<video;src="http://7xnzpx.com1.z0.glb.clouddn.com/miaoxingren_360p.mp4";controls;autoplay;loop> </video>

手机端自适应字体大小和元素宽度自适应

2017-12-05

2674 0

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。字体、宽高都用rem来定义，此方法略爽！@media;(min-width:0px){ ;;;;html{font-size:12px;}} @media;(min-width:;320px){ ;;;;html{font-size:12px;}} @media;(min-width:;340px){ ;;;;html{font-size:13px;}} @media;(min-width:;360px){ ;;;;html{font-size:14px;}} @media;(min-width:;380px){ ;;;;html{font-size:15px;}} @media;(min-width:;400px){ ;;;;html{fo