![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML/CSS
swrd2014
这个作者很懒,什么都没留下…
展开
-
CSS中表示cellpadding和cellspacing的方法
本文和大家重点讨论一下用CSS来表示表格的cellpadding和cellspacing方法,表格的cellpadding和cellspacing我们经常会用一定的方式来清除默认样式,请看下文详细介绍。用CSS来表示表格的cellpadding和cellspacing方法表格的cellpadding和cellspacing我们经常会用如下的方式来清除默认样式:引用tab转载 2015-05-27 19:46:29 · 445 阅读 · 0 评论 -
页面布局瀑布流的写法(原生js)
瀑布流布局转载 2016-09-18 07:42:16 · 650 阅读 · 0 评论 -
页面布局瀑布流的写法(CSS写法)
瀑布流布局转载 2016-09-18 07:48:21 · 3370 阅读 · 0 评论 -
这可能是史上最全的CSS自适应布局总结教程
这可能是史上最全的CSS自适应布局总结教程标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题。所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可转载 2017-02-15 14:11:33 · 23593 阅读 · 2 评论 -
实现3D旋转下拉菜单
*{ margin: 0; padding: 0; text-decoration:none; } #containter{ margin: 20px; height: 100%; width: 100%; text-align: center; } .menu{ height: 30px; }原创 2017-04-20 15:35:03 · 547 阅读 · 0 评论 -
vue 简单仿写百度搜索
vue .grey{ background: #CCC; height: 25px; } ul,li{ margin: 0; padding: 0; list-style-type:none; margin-left: 65px; width: 306px; } .dialog{原创 2017-06-09 19:27:27 · 702 阅读 · 0 评论 -
CSS布局奇淫巧计之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。本文非常基础,老鸟可以略过。 负边距在普通文档流中的作用和效果那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位、固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的。看下转载 2017-08-16 16:11:58 · 221 阅读 · 0 评论 -
纯CSS绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法复制代码代码如下:#triangle-up { width: 0; height: 0; borde转载 2017-08-11 17:00:25 · 227 阅读 · 0 评论 -
BFC原理及应用
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要先介转载 2017-08-21 17:50:09 · 195 阅读 · 0 评论 -
jsonp请求实例原生和jquery
$.ajax({ type:"get", url:"https://c.y.qq.com/qzone-music/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg", async:false, jsonp:"jsonp1", jsonpCallback:"jsonp1", dataType:"jsonp", dat原创 2017-09-04 15:25:54 · 315 阅读 · 0 评论 -
原生按字数多少自动切换焦点
自动切换焦点 (function(){ function focusForwad(event){ var target = event.target; if(target.value.length === target.maxLength) { let form = target.fo原创 2018-01-11 18:39:57 · 213 阅读 · 0 评论 -
使用回调和Promise两种方法实现3个小球依次移动
promise调用 .ball{ width: 20px; height: 20px; border-radius: 50%; } .ball1{ background-color: red; } .ball2{ background-color: yellow; } .ball3{ background-color: green原创 2018-01-14 19:29:29 · 430 阅读 · 0 评论 -
canvs绘制动态时钟
A draw canvas let draw = document.getElementById('draw'); let context = draw.getContext('2d'); let angle = Math.PI/360; var DateTime = { initDial: function(){原创 2018-01-17 14:15:20 · 459 阅读 · 0 评论 -
深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解我们知道CSS3的Animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-...转载 2018-05-28 20:28:33 · 192 阅读 · 0 评论 -
渐进式Web应用(PWA)入门教程(上)
渐进式Web应用(PWA)入门教程(上)最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。 但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。 移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换...转载 2018-05-30 10:54:45 · 672 阅读 · 0 评论 -
渐进式Web应用(PWA)入门教程(下)
渐进式Web应用(PWA)入门教程(下)上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍。渐进式Web应用(PWA)入门教程(上)在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的。第一步:使用HTTPS渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前。...转载 2018-05-30 10:57:11 · 280 阅读 · 0 评论 -
页面布局瀑布流的写法(jQuery写法)
瀑布流布局 -->转载 2016-09-18 07:44:26 · 404 阅读 · 0 评论 -
CSS reset
css@charset "utf-8";/* CSS Document */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}body{font-size:12px;}img{border:none;}li{list-style:non转载 2016-09-05 14:35:13 · 174 阅读 · 0 评论 -
width:100%缩小窗口时背景图片出现空白bug
页面容器(#wrap)与页面头部(#header )为100%宽度。而内容的容器(#page)为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度:改变浏览器窗口的大小,小于内容层宽度,如下图所示。拖动水平滚动条,出现了bug的样子。右边的背景不存在了。如下图所示。问题的根本在于:当窗口缩小时,转载 2015-06-02 10:33:52 · 2910 阅读 · 0 评论 -
使用iframe实现无刷新提交表单
header("Content-type: text/html; charset=utf8"); ?> $user=$_POST['username'];$pass=$_POST['password'];if($user=='an'&&$pass=='123')echo "alert(登录成功....');";原创 2015-07-08 15:34:13 · 426 阅读 · 0 评论 -
chart.css
*{margin:0px;padding:0px;}html,body{height:100%;width:100%;}body{color:#333;background:url(images/bg.gif) repeat;font-size:1em;font-family: "Microsoft Yahei";}.原创 2015-07-02 21:09:28 · 386 阅读 · 0 评论 -
选中radio,禁用其它radio控件
请选择查看的数据类型实时数据历史数据 选择您想查看的参数 幅值频率衰减系数是否上电温度 fu原创 2015-07-02 21:05:58 · 2519 阅读 · 0 评论 -
使用jquery禁用radio
1-6-1//等待dom元素加载完毕.$(document).ready(function(){ var $cr = $("#field111"); //jQuery对象var $cr1= $("#field112"); $cr.click(function(){ if($cr.is(":checked")){ //jQuery方原创 2015-07-03 15:44:25 · 8598 阅读 · 0 评论 -
如何让 height:100%; 起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向转载 2015-08-24 22:38:08 · 337 阅读 · 0 评论 -
block,inline和inline-block概念和区别
总体概念block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。大体来说HTML元素各有其自身的布局级别(block元素还是inlin转载 2015-08-25 09:39:16 · 265 阅读 · 0 评论 -
四级联动下拉菜单
jQuery多级联动美化版Select下拉框DEMO演示 body { color: #555; font-size: 14px; font-family: "微软雅黑", "Microsoft Yahei"; background-color: #EEE;}a { color: #555;}a:hover { color: #f00;}.input {原创 2016-06-28 13:45:05 · 2490 阅读 · 2 评论 -
VLC播放RTSP视频流(360浏览器可用)
--> var itemId = 0; var url = "";var totalTime = "";var playTime;var ss=0;var sMin=0;var sH=0;var millisec=0;var tottime = 0;var iTime;function registerVLCEvent(event, hand原创 2016-06-28 20:00:48 · 7231 阅读 · 4 评论 -
JS无缝隙轮播图
原生JS代码 焦点轮播图 *{ margin: 0; padding: 0; text-decoration: none;} body { padding: 20px;} #container { width: 600px; height: 400px; border: 3px solid #333; overfl转载 2016-08-18 15:10:56 · 822 阅读 · 0 评论 -
简单倒计时逻辑实现
团购——限时抢-->还剩 var sh; function FreshTime(){ var endtime=new Date("2016/10/15,12:20:12");//结束时间 var nowtime = new Date();//当前时间 var lefttime= parseInt((endtime.getTi转载 2016-09-09 17:14:50 · 1237 阅读 · 0 评论 -
仿京东商城侧边导航栏写法
body { padding: 0; font-size: 10pt; behavior:url(css/csshover.htc); } .topmenu { display: block; width: 220p转载 2016-08-19 15:18:47 · 18057 阅读 · 0 评论 -
js五子棋的实现
html 五子棋 csscanvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;}js var me = true;var over = false;var chessBox = [转载 2016-09-11 17:44:19 · 2721 阅读 · 0 评论 -
原生js实现必应自动搜索功能(事件绑定和事件代理和键盘事件),亲测chrome实现
bing search body{background-color: #333;} .bg-div{position:relative;background-image: url(../river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(../logo.png);height:原创 2016-09-13 18:12:30 · 1632 阅读 · 0 评论 -
jquery实现必应的自动下拉搜索功能
body{background-color: #333;} .big-img{background-image: url(img/river.jpg); background-repeat: no-repeat; width:1228px;height:690px;margin: 0 auto;position: relative;} .logo{background: url(im原创 2016-09-14 11:36:44 · 770 阅读 · 1 评论 -
H5使用canvas实现星星闪烁效果
html star JSmain.jsvar can;var ctx;var w,h;var girlPic = new Image();var starPic = new Image();var num = 60;var stars = [];var lastTime,deltaTime;var转载 2016-08-12 19:11:15 · 12965 阅读 · 1 评论 -
70多个非常实用的web开发CSS小技巧
1. 文字水平居中将一段文字置于容器的水平中点,只要设置text-align属性即可:text-align:center; 2. 容器水平居中先该容器设置一个明确宽度,然后将margin的水平值设为auto即可。div#container { width:760px; margin:0 auto; } 3. 文字垂直居中单行文字的垂直居中,只要将行高与容...转载 2018-09-20 10:42:16 · 1009 阅读 · 0 评论