实现效果演示：实现代码及注释： <!DOCTYPE html> <html> <head><title>楼层跳跃式的页面布局</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}body, html{height: 100%;}ul{list-style: none;height: 100%;}ul li{height: 100%;}ol{list-style: none;position: fixed;top:200px;left: 50px;}ol li{width: 50px;height: 50px;border: 1px solid #000;text-align: center;line-height: 50px;margin-t...
javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。但有些兼容性问题我们需要解决。首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可，而在IE中则需要利用style元素的styleSheet.cssText来解决。还需要注意的就是在有些版本IE中...
效果预览：http://keleyi.com/keleyi/phtml/menu/1.htm下拉菜单 js+div+css下拉导航菜单完整代码: <!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> <title>css+div+js下拉菜单导航--柯乐义</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} body{padding:0;margin...
Bootstrap对代码显示提供了三种方式：内联代码 1.使用 元素显示单行内联代码 内联代码主要是设置code元素的背景颜色和其内部的文字颜色。 //用法 <code><body></body></code>//源码 code {padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px; }2.使用 元素显示用户输入代码 元素包含的内容是表示该内容需要用户键盘输入，所以一般是设置成input 的效果，用法和code类似 //用法 <pre> <...
废话不多说了，直接给大家贴代码了，具体代码如下所示： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title> <style type="text/css"> body{padding:30px;margin-left:450px;margin-top:200px;width:350px;border: 1px solid #98AFB7; } .progressBar{width:280px;height:20px;border: 1px solid #98AFB...
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。 接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题) 先看看效果吧，如下图（录制gif软件有点渣，看起来卡卡的...） 这种效果可以由元素内嵌套canves实现，也可以由css3实现。 Canves实现 网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下 html代码：<a class="btn color-1 material-design" data-color="#2f5398">Press ...
先给大家展示下效果图，如果大家感觉还不错，请参考实现代码哦！HTML： <div class="container iden_top"> <ul> <li> <p class=iden_add_name>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"></div> </li> </ul> <span class="iden_add">+</span> </div><div class="data_z_create_box"> <div class="create_z_create_box_top"> <span class="data_z_create_box_top_title"></span> <div class=...
我的风格你懂得，具体详情介绍如下 关键代码如下所示：function AsyncLoad(V_tag,V_src) { if (V_tag == "script") { var s = document.createElement(script); s.type = text/javascript; s.async = true; s.src = V_src; var x = document.getElementsByTagName(script)[0]; x.parentNode.insertBefore(s, x); s.onload = function () { if (V_src == "../Content/Scripts/jquery-2.1.1.min.js") { AsyncLoad("script", "../Cont...
一、原生js： /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.type == "js") { document.writeln("<script type=text/javascript src="+ jsonData.path + jsonData.url+"></script>"); } else if...
一、原生js： /*** 加载js和css文件* @param jsonData.path 前缀路径* @param jsonData.url 需要加载的js路径或css路径* @param jsonData.type 需要加载的类型 js或css*/function loadWriteFiles(jsonData){jsonData.path = jsonData.path != undefined ? jsonData.path : "";if(jsonData.type == "js"){document.writeln("<script type=text/javascript src="+ jsonData.path + jsonData.url+">...
本文实例为大家分享了js选项卡效果的具体实现代码，供大家参考，具体内容如下 效果图：实现代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font-size:12px;} .sec,.sec1{ cursor:pointer;} .sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} .sec1{ color:#990000; text-al...
弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终...
效果图：是不是比默认的好看多了，个人的审美观应该还是可以的。 接下来我们一起来看看实现这款美化版Checkbox的源代码，主要思路是利用隐藏原来的checkbox和radiobox，用一个div来模拟checkbox/radiobox，并使用jQuery来完成选择切换时的动画效果。 先来看看HTML代码： <div class="wrapper"><ul><li><p>Gender:</p></li><li><input type="radio" name="radio-btn" />Male</li><li><input type="radio" name="radio-btn" />Female...
检查和测试代码来发现任何潜在错误，从而在放到网站上之前及时消除错误是一个非常重要的过程。代码检查的过程也俗称为是Web设计师 和开发者之间的linting。作为一个设计师，如果你想要写出高度优化的代码，那么你一定需要linting工具。有两种类型的代码检查工具。一种是在 执行时间检查代码中的错误和bug。另一种是使用静态代码分析技术并在执行前检查码。后者因为可以节省时间和麻烦显然更佳。 事实上，linting可以放在不同的阶段...