随笔分类 - HTMLHTML相关
摘要：现在显示器一般都是宽屏，网页两端常常会留白。两边可能会放一些推荐、标签或是导航什么的辅助模块。现在有的网站页面内容过长时，用户将滚动条向下拉时，拉到一定程度，左右两侧的辅助模块就会固定在指定位置，不随滚动条滚动。这个的体验很好。试着自己写了一个。原理很简单，就是使用JS计算当滚动条位置大于元素显示位置时，将元素设置为 position:fixed; 设置好top,left这样就固定好位置了。下载：http://files.cnblogs.com/zjfree/ScrollFix.rar
阅读全文
posted @ 2012-01-14 16:19
摘要：瀑布布局演示：http://docs.kissyui.com/docs/html/static/demo/waterfall/demo2.html就想花瓣网的样子http://huaban.com/开始以为是使用float:left来实现的，后来测试后发现是使用JS绝对定位控制的。自己试了一下，这个的布局感觉很实用。效果如下图：实例下载：http://files.cnblogs.com/zjfree/jsFall.rar
阅读全文
posted @ 2012-01-06 17:34
摘要：响应式页面设计参考资料http://www.qianduan.net/responsive-web-design.html原理根据不同浏览器宽度，页面设置不同的展示样式。使用JS模拟<!DOCTYPE html><html><head> <title>css width</title> <style type="text/css"> .divTest{ border:solid 2px gray; width:300px; height:200px; } .w1200 .divTest{ backgro
阅读全文
posted @ 2011-12-26 13:25
摘要：测试css下图片是何时加载的。测试结论以下样式图片在页面加载时就加载内嵌样式<div style="background-image:url(image.aspx?from=page);">内嵌样式表.divCur{background-image:url(image.aspx?from=style1);}当 存在两个.divCur{background-image:url(image.aspx?from=style1);} .divCur{background-image:url(image.aspx?from=style2);}则只第二个图片会被加载外部样式
阅读全文
posted @ 2011-12-26 13:13
摘要：原理利用CSS特性 #msgBody div{}，当有ID为msgBody存在时才生效来实现。兼容性兼容IE7+、Chrome、火狐IE6下Select元素总在最上层。并且不支持fix所以只能绝对定位。弹出层是会跳转到顶部。IE6下修改body的ID后display:block; 显示有问题（有一部分显示），在IE6下时，使用left:-10000px;来实现隐藏。JS中调用方法弹出方法：document.body.id = 'msgBody';隐藏方法：document.body.id = '';Chrome下测试效果实例下载：http://files.cnb
阅读全文
posted @ 2011-12-19 16:25
摘要：测试的网页结构如下：<!DOCTYPE html><html><head> <title>标题</title></head><body onclick="alert(1);"><div>aaaaaaa</div></body></html>打开网页后，点击空白处并不会触发body的onclick事件。只有点击有文字的那一行才会触发。说明body没有充满网页。但奇怪的是IE、Chrome如上面所说。而火狐点击空白处会触发onclick事件。为了看
阅读全文
posted @ 2011-12-12 16:59
摘要：<input />在浏览器中会解析成什么呢？经过测试会解析成文本输入框。使用JS获取type属性也是text。(IE、火狐、Chrome)但发现如果使用如下样式：input[type="text"]{color:red;}只在IE下有效。（未测试IE9）
阅读全文
posted @ 2011-12-12 16:05
摘要：效果：代码：<!DOCTYPE html><html><head> <title>TABLE 样式</title> <style type="text/css"> .tbData { border-collapse:collapse; border:solid 3px #ddd; font-family:Courier New, Tahoma, 宋体; font-size:14px; color:#333; background-color:white; border-spacing:0px; } .t
阅读全文
posted @ 2011-11-29 17:27
摘要：请使用CHROME浏览器查看ABC123文字测试 ABC123文字测试 ABC123文字测试 ABC123文字测试代码：<div style="background-color: #535353; color: #353535; font-family: 微软雅黑; font-size: 64px; padding:20px; font-weight:bold;"> <span style="text-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;">ABC123文字测试</
阅读全文
posted @ 2011-10-21 09:27
摘要：代码<!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>无标题页</title> <style type="text/css"> b{colo
阅读全文
posted @ 2011-10-20 17:50
摘要：代码<!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>无标题页</title></head><body><!--haha ha
阅读全文
posted @ 2011-10-20 17:26
摘要：我的闪烁文字 abc123我的闪烁文字 abc123边框代码：<div id="div1">我的闪烁文字 abc123</div><div id="div2">我的闪烁文字 abc123</div><div id="div3" style="height:200px; width:200px; border:solid 5px black;">边框</div><script type="text/javascript"
阅读全文
posted @ 2011-10-20 16:02
摘要：soliddotteddasheddoublegrooveridgeinsetoutset
阅读全文
posted @ 2011-10-20 15:45
摘要：sssssssssssssssss asdfasdf啊是的发生的防守对方 sssssssssssssssss asdfasdf啊是的发生的防守对方sssssssssssssssss asdfasdf啊是的发生的防守对方 sssssssssssssssss asdfasdf啊是的发生的防守对方sssssssssssssssss asdfasdf啊是的发生的防守对方sssssssssssssssss asdfasdf啊是的发生的防守对方sssssssssssssssss asdfasdf啊是的发生的防守对方sssssssssssssssss asdfasdf啊是的发生的防守对方ssssssssss
阅读全文
posted @ 2011-10-20 15:36
摘要：your browser does not support the canvas tag 代码<!DOCTYPE><html><head> <title>无标题页</title></head><body><canvas id="myCanvas">your browser does not support the canvas tag</canvas><script type="text/javascript">function dra
阅读全文
posted @ 2011-10-20 15:08
摘要：禁止CHROME焦点在输入框时显示外边框：outline:none;禁止CHROME中textarea能改变大小功能：resize:none;按钮样式 textarea { resize:none; outline:none; } input[type=button] { border:solid 1px gray; background-color:#eff; padding:3px 10px; *padding:0px 3px; *padding-top:...
阅读全文
posted @ 2011-10-20 13:04
摘要：代码：<!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>无标题页</title> <style type="text/css"> body,
阅读全文
posted @ 2011-10-20 12:57
摘要：请使用CHROME浏览器查看。TAB导航样式TAB1 TAB1 TAB1 TAB1asdfasdfasdfasdfasdf代码 <style type="text/css"> .divTab { position:relative; top:2px; margin-left:10px; } .divContent { -webkit-box-shadow:0px 0px 10px #ddd; -moz-box-shadow:0px 0px 10px #ddd; box-shadow:0px 0px 10px #ddd; } ...
阅读全文
posted @ 2011-10-20 11:25
摘要：当HTML代码中包含display:none的文本时，复制内容时是否包含？测试如下：aaaaaaaaaaaaaaaaaa此内容已 display:none;ccccccccccccccccccccc此内容已 visibility:hidden;ffffffff超出部分ffffffffffffffff可复制以上到如下框测试代码如下：<table><tr><td>aaaaaaaaaaaaaaaaaa</td></tr><tr style="display:none;"><td>此内容已 disp
阅读全文
posted @ 2011-07-07 16:55
摘要：对于未知的HTML标签各个浏览器都是怎么处理的呢？代码如下：<style>aa2{font-size:24px; color:blue;}</style><aa1 style="font-size:24px; color:red;">test 测试</aa1><aa2>test 测试</aa2><script>document.write(document.getElementsByTagName('aa2')[0].tagName);</script>效果如下：
阅读全文
posted @ 2011-07-04 17:55
|
||
