【CSS和HTML】
文章平均质量分 80
Rattenking
迎接着黎明的曙光前行!
展开
-
【CSS3】---- 纯 css 控制 html5旋转音乐图标,控制背景音乐
2. 无限旋转3. 停止动画4. 实现className的切换1. JS 实现播放和暂停的切换HTMLJS2. JQUERY 实现3. VUE 实现JS5. 总结注意:此文章只是单纯实现音乐图标的旋转和暂停的切换,没有对背景音乐的暂停和播放进行处理;css3 的动画功能很强大,但是同时需要我们处理好不同浏览器的兼容性处理!WXRUI体验二维码我的博客,欢迎交流!我的CSDN博客,欢迎交流!微信小程序专栏前端笔记专栏微信小程序实现部分高德地图功能的DEMO下载微原创 2022-07-07 10:59:16 · 1528 阅读 · 2 评论 -
双飞翼布局----利用float和margin实现双飞翼布局
圣杯布局实现两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。 这里改进只是对布局进行改进,会将中间栏放到最后渲染!HTML代码<div id="main-content"> <div id="main-left">left容器</div> <div id="main-right">right容器</div> <div id="原创 2017-11-24 15:17:21 · 493 阅读 · 0 评论 -
双飞翼布局的原理
双飞翼布局的起源双飞翼布局介绍-始于淘宝UED双飞翼布局解决的问题 两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。其实双飞翼布局就是在圣杯布局的原理上进行完善,实现相同效果的完美布局!双飞翼布局原理HTML代码<div id="content"> <div id="main-wrap"><div id="main"></div></div> <原创 2017-11-24 14:51:34 · 1903 阅读 · 0 评论 -
圣杯布局的原理
圣杯布局的起源In Search of the Holy Grail圣杯布局解决的问题 两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。圣杯布局的原理HTML代码<div class="content"> <div class="center col"> </div> <div class="left col"> </div>原创 2017-11-24 13:54:25 · 3653 阅读 · 0 评论 -
使用showdown.js将Markdown文档转换为HTML
引入showdown.js<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>通过showdown转换var converter = new showdown.Converter();//转换为HTMLvar html = converter.makeHtml(markdownText);/原创 2017-11-16 10:47:58 · 2405 阅读 · 0 评论 -
神奇的position:sticky
sticky定义position:sticky定义, eg:CSS中position属性介绍(新增sticky) 设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。sticky特点sticky属性有以下几个特点:原创 2017-11-21 13:54:08 · 2001 阅读 · 0 评论 -
前端常见面试题
1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?IE: trident内核Firefox:gecko内核Safari:webkit内核Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit,Google与Opera Software共同开发)2、描述一下渐进增强和优雅降级之间的不同吗?...转载 2017-04-01 16:15:46 · 680 阅读 · 0 评论 -
JS获取当前网址信息
通过window.location对象获取对应的属性1、设置或获取对象指定的文件名或路径(pathname) window.location.pathname2、设置或获取整个 URL 为字符串(href) window.location.href3、设置或获取与 URL 关联的端口号码(port) window.location.port4、设置或获取 U...原创 2017-05-10 17:33:43 · 1855 阅读 · 0 评论 -
Browser 对象(一、history)
history对象包含用户在浏览器窗口中访问过的URLhistory对象是window对象的一部分,也就是说可以window.history进行访问1、history对象的属性(length) console.log(history.length);通过history.length直接返回浏览器历史列表中URL的数量 2、history对象的方法back() ...原创 2017-06-28 15:55:23 · 965 阅读 · 0 评论 -
关于字体图标在firefox上本地访问无法显示的问题分析
转载地址:https://my.oschina.net/u/2457218/blog/782822一、问题在本地引入了Font Awesome 字体图标,网页未部署到服务上(在本地直接访问,部署到nginx服务器,火狐浏览器能显示)目录结构:引入方式:<link href="../css/font-awesome.css" rel="stylesheet" type...转载 2017-07-11 16:00:25 · 6248 阅读 · 0 评论