最近在写个前端与设计的交流PPT，其中有个地方测试了一下多种情况下盒模型的表现，其中有个小地方，关于margin叠加的一种情况，我是第一次发现，估计相对于其他前辈而言，不值一提，自己记录一下吧。
场景是这样的：外层div给他固定了高度和宽度（500px*500px），内层div（300px*300px）也一样但是高度和宽度比外层的 小，为的是减少其他因素的影响，然后对内层div进行margin:10px。问题就在这里了，一直以来都晓得垂直空白边会叠加，但没想到这样也能叠加， 并且ie系列（6，7）和firefox,opera等标准浏览器的表现不一样。
code:
< !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>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title>margin</title>
< style type=”text/css”>
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td{margin:0;padding:0;}
#wrapper{width:500px;height:500px;background:#DADADA;}
#inner{width:300px;height:300px;background:#050505;margin:10px;}
</style>
</head>
< body>
< div id=”wrapper”>
< div id=”inner”>< /div>
< /div>
< /body>
< /html>
Continue reading “空白边叠加”
都知道，a标签通常就是利用href的属性来创建超文本链接，用来链接到互联网中的某个位置，就像网中的一个节点。Internet也因它而神奇。
除了它本身的作为超链接的源的应用外，还有什么扩展应用呢。
1.最简单的，<a href=”xx.xx”><img src=”xxx.jpg”/></a>，这种是最初的扩展，利用图像作为a的内容，而不仅仅是文字，这样就能使得链接看起来更直观，更醒目。
2.javascript ，有时候，为了在点击a标签时能够触发某些事件，你可以在<a >内写javascirpit，例如：< a href=”#” onclick=”alert(”fafsfs”);”>xxx</a>。
3.还有一种，能够给浏览者更进一步的良好体验，就是让鼠标hover时，< a>能够变换视觉效果。
mail.163.com的做法：
利用了onmouseover和onmouseout事件将这个INPUT上的class进行切换，使得背景变换。
优点：对很多元素都可以使用这个方法。
缺点：要添加额外的脚本，如果浏览者禁用脚本，就不会起作用。
Continue reading “偶然想到的a标签”
这段时间，友商网完成了第三次改版，收获了很多，挑其中的一点稍稍的进行了“深入思考比较学习分析研究参悟理解”。啰嗦的话说完了，正题……
应该不难发现，在目前的各大网站中，大量的采用了圆角去修饰边框，使得页面的呈现更加柔和，干净舒服。所以，友商网在这一次改版中也大量采用了这个样的设计，特别是二级页面的大部分元素框，就采用了时尚的银灰色调配上灰黑的圆角。在将设计稿实现成页面的时候，这个地方开始的确让我头疼，因为这些元素有很多相似的特点，也有一些不一样的地方，相似的是：
title是银灰色渐变x轴横向
底部圆角内凹度一样
而不一样的地方是，整个元素框宽度不一定一样，title高度也有两种，在看到绝大部分的频道设计稿后，我决定将这些元素框做成通用的结构和样式，希望能提高开发效率，省去了一次次重复的调试，也有利于不用的前端开发同事统一风格，整体提高开发速度。
实现的思想是这样的（可以说主要是滑动门的应用）：
1.将title的银灰条进行分离（其实也可以合在一起），作为两个结构元素（分别是h2和span）的背景，进行适应的拉伸
Continue reading “圆角的一点思考”
在经过6个小时的奋战后，可爱的友商网以另一种美貌展现给更更可爱的浏览者。时尚的web2.0色调再次优化的页面，我想，会给大家更好的体验。
这次换衣裳，还调整了频道，资讯和课堂合并到了社区，增加了代账平台，将原来的在线管理改版成了在线会计，供应和进销存合并为在线供应链，这是业务模式上的调整，希望更能贴合市场，给广大企业和个人带来更贴切的SAAS服务，还有一个亮点就是增加了免费体验的功能，不用注册也能在线体验各种SAAS产品。
这是衣裳，下次再写写“身材”，o(∩_∩)o…哈哈
在前端开发中经常会用到一些不设置高度的元素，用的最多的，例如清理元素，大家经常会这么写:selector{clear:both;}
他能清理浮动是没错，但是不注意的话就会在IE下造成一些不和谐。请大家看如下样式和图例—–
< !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>
< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
< title >test BR< /title>
< style type=”text/css”>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td{margin:0;padding:0;}
#testBr{ width:950px;height:10px;background:#000; }
< /style >
< /head >
< body >
< div id=”testBr”>< /div>
< /body>
< /html>
下面是#testBr在不同高度值下的表现：
Continue reading “关于IE中DIV的默认BR高度”
前段时间去了趟桃源村附近的IKEA后有点想法，但是由于最近比较忙，并且家里网络不好使，所以没整理，这两天搬了个窝，网络OK了，也有点时间就写写吧。先记点很水的帐：
KDUED成员们突然想搞个户外活动，采一下风，一小伙说，要不去IKEA吧，那里的某些设计不错，大家也没啥好建议，所以敲定就整这个。
我们跟大黄广宇一打车嗖嗖的到了，等了10分钟还不见巾帼们到来，一问，得，迷路了。。-_-！！！都在深圳混好多年了还迷路。。。。。
进门后，第一感觉是：有点温暖，这温暖来自放置在门口的一套沙发，上面坐着几个玩耍的小朋友，戏耍嬉笑真开心，哈哈哈，左边是小朋友乐园，很宽敞， 很有童趣，只要是在8岁以下年龄段混的没有不被吸引的（教育，从娃娃做起。买卖，从娃娃做起？？）。温暖沙发的右边就是上楼的电梯，在电梯上升的过程中你 会被墙上的各种颜色的倒挂椅子吸引，颜色很抢眼，这个时候就抓住你的心了，想知道这个椅子怎么样吗？上来体验吧。。。
在二楼的整个搞怪和享受过程中，我发现一个别的家具售前体验店所没有特点：导航设计。。
Continue reading “由IKEA想到的”
说实话这是我第一次完整的做一个div构架的页面，请教了很多同事！谢谢他们。
说实话我是开发门外汉，但是我对计算机语言比较热衷，自问asp能看懂，能改，但不能原创！
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或Dreamweaver (以下简称PS或DW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
Continue reading “结合友商网Div+CSS布局入门”
百度的贴吧没有提供rss聚合，使得其他网站很难取得帖子列表。所以想在自己的门户上列出某个贴吧最新的帖子列表，看来得另想办法。
获取其他网站的内容最简单的办法就是获取html代码，然后从中分离出想要的内容。要想获取html代码那就离不开xmlhttp了，可是一个贴吧 首页的代码量少说也有几十K，读取全部代码再分离，效率堪忧。只好另辟蹊径——用Wap站的贴吧。代码量少，只有几K，分析起来也比较容易。唯一不足的就 是wap一页只有十条记录。
不废话了，看代码。正则表达式写得太烂了，见谅！
Continue reading “用xmlhttp获取百度贴吧的帖子列表”
