石周明

CSS部分： <style type=”text/css”> ul{ width:438px; } li{ float:left; width:146px; height:80px; text-align:center; font-size:12px; list-style:none; } li img{ margin:0 auto; display:block; } </style> HTML部分： <ul id=”bxlist”> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input type=”radio” name=”radiobutton” value=”radiobutton” /><label>点击打开宝箱按钮</label></span></li> <li><img src=”http://adsfile.qq.com/web/post_46x40.gif” /><span><input [...]

CSS部分： <style type="text/css"> .color{ color:#f60; } </style> HTML部分： <div id="all"> <li><a href="#">网站首页</a></li> <li><a href="#">产品介绍</a></li> <li><a href="#">联系我们</a></li> </div> JS部分： <script type="text/javascript"> function changeColor(){ var fdiv = document.getElementById("all"); var alllink = fdiv.getElementsByTagName("a"); for (var i=0; i<alllink.length; i++){ alllink[i].onclick = function(){    for (var j=0; j<alllink.length;j++){    alllink[j].className="";    } this.className="color";    } } } window.onload = changeColor [...]

我晕 没想到 addLoadEvent也有先后执行顺序··· 做个记号···备忘

function changeTrColor(){ var tables = document.getElementsByTagName("table"); for (var i=0; i<tables.length; i++){     var odd = false;     var rows = tables[i].getElementsByTagName("tr");     for (var j=0; j<rows.length; j++){         if (odd == true){         rows[j].style.backgroundColor = "#f00";         odd = false;         } else {            odd = true;     [...]

CSS部分： ul li{ border:1px solid #ccc; font-family:"Times New Roman", Times, serif; font-size:12px; width:100px; height:30px; line-height:30px; overflow:hidden; } ul li a{ display:block; width:100px; height:30px; overflow:hidden; color:#999999; background:#fff; } ul li a:hover{ background:#ffffff; color:#a40000; } ul li a span{ display:block; } ul li a:hover span{ display:none; } .t2{ background:#ccc; } .t2 td{ background:#fff; } .t2 td a{ [...]

JS部分： <script type=”text/javascript”> function addCon(){ var para = document.createElement(“p”); var cont1 = document.createTextNode(“嘿嘿，我就是”); var em = document.createElement(“em”); var cont2 = document.createTextNode(“这样”); var cont3 = document.createTextNode(“被插入到文档里的”); para.appendChild(cont1); em.appendChild(cont2); para.appendChild(em); para.appendChild(cont3); var div = document.getElementById(“testdiv”); div.appendChild(para); document.getElementById(“finput”).setAttribute(“value”,”再点一次吧”) } </script> html部分： <div style=”border:1px solid #ccc;” id=”testdiv”> <input id=”finput” type=”button” value=”点我把” onclick=”addCon()” /></div> 例子比较简单 用到基础的方法appendChild

JS部分： <script type="text/javascript"> function showQuoteSite(){ var quotes = document.getElementsByTagName("blockquote"); for (var i=0; i<quotes.length; i++) {    var url = quotes[i].getAttribute("cite");    var quoteChildren = quotes[i].getElementsByTagName("*");//每个quote元素里所有元素节点（是一个数组）    var elem = quoteChildren[quoteChildren.length - 1];// 所有元素节点里的最后一个元素节点 赋给变量elem    var link = document.createElement("a");    var link_text = document.createTextNode("source");    link.appendChild(link_text);    link.setAttribute("href",url);    var sups = document.createElement("sup");    sups.appendChild(link); [...]

网页设计师是变幻无常的。我们喜欢拿东西做试验，喜欢观察人们如何与我们的产品进行交互。我们喜欢尝试与众不同的设计方法，这些在将来可能会成为主流和经典。因此，随着新设计方法的兴起，越来越多的设计师关注他们、使用他们，新的趋势也就诞生了。 在过去的几个月，我们分析了很多网页设计，观察新趋势，权衡设计决策和代码解决方案的优点。在这篇文章里，我们将展示2009年网页设计趋势：动态、新的设计元素和新的图形表现形式。接着还讨论了这些趋势被使用的情况和现有的一些漂亮的案例。在这篇概述中我们还遗漏了哪些动态吗？发表评论吧，好让我们知道！ 本文仅涵盖了过去几个月中我们发现的25个趋势之中的10个。第二部分将在下周发表。届时将涵盖布局、新的视觉表现形式和新的设计元素。敬请期待。 2009年网页设计趋势 首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中，将带你逐一回顾每个趋势和漂亮的案例，他们将激发你在下个项目中的灵感。 1. 凸版印刷 2. 富UI 3. 透明的PNG 4. 大字号(版面) 5. 自定义字体（sIFR 等） 6. 模式化对话盒/会话窗 7. 多媒体区 8. 杂志外观 9. 旋转木马（幻灯片） 10. 导言模块 好，现在就让我们到具体内容中去仔细看看上面提到的每个趋势。 1. 凸版印刷 在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。 2. 富UI 我们欣喜的看到，用户界面在现代网站和网页应用中已经变得越来越漂亮、越来越实用了。在过去的一年里，这些网站应用的用户体验已得到大大改善，从而使得用户界面的丰富性和响应度都非常接近经典的桌面应用程序。AJAX和Flash在为用户提供动态交互的广泛应用上，已经有了先进、成熟并且专业的解决方案。 特别值得一提的是，过去一年里我们看到在设计元素中使用了更多的留白，更多的填充以及更大的空间。我们还注意到，许多现代用户界面用直观的视觉提示来表现用户与系统间的交互情况。比如，当按钮被按下时，它的外观就由“正常”变为“按压”（就像Newspond.com和Quicksnapper.com上这样），确认并对用户与系统的交互给予及时反馈。除此之外，越来越多的服务能够进行用户个性化：对我们而言，这清晰的表明，更适用的用户界面将在2009年到来。 上述两个例子表明，网页应用的设计师们在功能介绍和改善交互性、响应度等用户体验问题上投入了更多的精力。 3. 透明的PNG 透明的PNG，尽管不被IE6支持，但从去年来看似乎已经得到了很好的普及。显然，设计师们试图更好地把背景图片融入到实际内容中，并打算形成一种风格，这在印刷媒体中很常见，比如在杂志中。在多数情况下，半透明背景从页面整体背景中脱颖而出，其目的是为了突出一个重要的设计元素，例如头条和公告。有时透明PNG也作为模式化对话盒(会话窗)的背景。 去年，我们描述了许多可以利用透明度发挥网页设计创意的方法，很多设计师似乎也在他们的工作中尝试着这些技术。有趣的是，透明经常被使用在设计的头部或底部，但也有些设计 超越了这种定式。 4. 大字号(版面) 在之前的文章（1，2 ）中，我们列举过一些大字号(版面)的杰出案例。2009年，大字号(版面)将成为主流。特别是设计机构，开发大型项目，做产品网站和在线服务的，他们会使用大字号(版面)来传达自己网站最重要的信息。 这些设计元素的字体大小通常都要超过36px，在很多情况下，为迎合观众都会使用非常漂亮的字体。总的来说，设计师投入更多精力在排版的细节方面，如主次关系，行高和字体的选择。其结果是：网站更漂亮，风格更一致，看起来可靠且值得信赖。 5. 自定义字体 就像设计师花费了更多精力在排版上一样，他们也更注重用来作网站正文副本的字体。尽管有像Helvetica, Arial, Georgia和Verdana这些毋庸置疑地占据统治地位的经典字体存在，我们仍观察到有一股向自定义字体发展的微弱趋势（例如使用sIFR）。 有趣的是，这些字体往往无缝结合于网站设计中；它们几乎从不需要网站因它而“更新”排版。设计师们试图融合漂亮的版式和炫目的视觉设计，以此来改善网站的外观和用户体验。 6. 模式化对话盒/会话窗 模式化对话盒（会话窗）其本质上就是一个改进型的弹出窗。它们以友好的界面替代了传统JavaScript弹出窗口，并且使用户的注意力始终集中在网站最重要的区域内。状态窗通常是被用户的动作所触发（如注册或登录），并且出现于主内容之上，就像桌面应用中的一个窗口。会话窗往往以一个非常微妙的方式出现：它们通常采用半透明，并且有一个“关闭”按钮。 [...]

很多时候 我们都想在IE里实现这样的布局：一个容器box有一个固定的高度 当内容超出固定高度时自动拉伸 即使内容比较少时 也可以保持一个最小高度 这个布局对FF来说是小事一桩 只要给box定义一个min-height值就可以了 但遗憾的是IE不能识别这个属性 那我们有什么办法让IE也支持min-height吗？答案是肯定的，必须的。 下面以一份简单的html为例 我们可以这样定义CSS： .box{ 　　margin:0 auto; 　　padding:10px; 　　border:1px solid #ccc; 　　width:500px; 　　min-height:45px;/*为FF定义min-height*/ 　　height:auto;/*IE里高度自动*/ 　　height:45px;/*再为IE设置一个固定高度值*/ 　　} p{ 　　margin:0; 　　line-height:20px; 　　text-indent:2em; 　　font-size:12px; 　　} 结构部分： <div class="box"> <p>很多时候 我们都想在IE里实现这样的布局：一个容器box有一个固定的高度 当内容超出固定高度时自动伸缩</p> <p>这个布局对FF来说是小事一桩 只要给box定义一个min-height值就可以了 但遗憾的是IE不能识别这个属性 那我们有什么办法让IE也支持min-height吗？答案是肯定的，必须的。</p> </div> 我们暂且只看红色部分的CSS，其他的先不看。意思我就不再说了，已经注释了。可以把上面的css部分和结构部分保存为一份html在浏览器里预览一下↓ 在IE下：box的高度随着内容的增加自动拉伸了，即使将第二个p删除，我们发现，它还是可以保持45px的高度，嘿嘿，我们想要的效果实现啦！ 但很多时候，在CSS的世界里，总是解决了一个问题，又会出现另一个问题，这里也是 在FF下：一开始box是定义了一个边框的，这个时候，你会发现，box的边框线并没有像IE里那样在外面，而是被压在了内容的下面。这个问题的原因是因为：FF只识别了一开始定义的min-height，并没有识别auto，所以我们在这里给它来个hack，height:auto !important; 再到FF刷新看一下页面，是不是正常了呢？ 也就是说box的css应该是这样： .box{ margin:0 auto; padding:10px; border:1px solid #ccc; width:500px; [...]

http://www.yybushe.com/onClick_Change_DivShow.html 实现原理比较简单： 通过getElementsByTagName找出所有a 并置空a的样式 点击的时候赋样式 通过document.getElementsByTagName找出所有div并置空div的样式 通过split和getElementById找出对应div 并赋div on状态下的样式名