如果你的网页中有<a href=“#”> …….</a> 这样的连接，而且已经出现的滚动条，并且下拉了一些，那么当点击这个连接的时候就会返回页面顶部，很是讨厌。以下几中方法可以防止这个问题 1 将<a href=“#”> …….</a> 改为<a href=“javascript:;”> …….</a> 2 将<a href=“#”> …….</a> 改为<a href=“#” onclick="return false"> …….</a> 3 如果实在不需要一个连接，而只是想让浏览者把鼠标放在这里的时候让鼠标变成手 那么你也可以将……..前的<a> 去掉，用<span style="cursor:hand">代替也可以 4 将<a href=“#”> …….</a> 改为<a href=“####”>…….</a> 5 将<a href=“#”> …….</a> 改为<a href="javascript:void(0)">…..</a>
css部分 ==================================== <style type="text/css"> <!– #demo { overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } </style> html部分 ==================================== <div id="demo"> <div id="demo1"> 在这里添加滚动的内容 </div> <div id="demo2"></div> </div> <script> <!– var speed=10; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 function Marquee(){ if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); [...]
em { display:block; font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */ border:4px solid;/* border值越大,三角形越大 */ border-color:#fff #fff #fff #f60;/* 通过改变颜色值,可产生不同效果,自己实验 */ } 在页面里写<em></em>即可
首先感谢一下搜索引擎：http://www.baidu.com/s?ie=gb2312&bs=a%3Ahover%CE%B1%C0%E0&sr=&z=&cl=3&f=8&tn=baidu&wd=a%3Ahover%CE%B1%C0%E0&ct=0 再感谢一下怿飞’blog，最后再感谢一下BI ! 昨天在给朋友做网站，遇到这样一个问题：【笔记本维修品牌】和【崔哲工程师风采】下面的图片和文字排列那块儿，我想做到这样的效果：鼠标移到文字链接上，同时改变图片的边框颜色。 记得以前遇到过类似的情况，解决办法是给图片定义:hover的颜色即可。css的写法如下： a img{ border:1px solid #ccc; } a:hover img{ border:1px solid #000; } 但实际情况呢是：这个写法在ie下是没有效果的。原因是：在css1中这个伪类只针对a对象有效；css2中对所有对象均有效。但要命的是ie6仅支持css1中的:hover。 大致看了一下前面怿飞’blog和BI的帖子，了解到解决这个问题的精髓是：要让原始a的某一属性发生改变。即关于这个问题BI帖子的沙发回复。 所以，我们再设置原始a的一些属性值，也就变成下面这样： a{ background:#fff; } a:hover{ background:#ffffff; } a img{ border:1px solid #ccc; } a:hover img{ border:1px solid #000; } 以上红色部分是对原始a的背景颜色进行设置，值得一提的是：尽管#fff和#ffffff是一样的，都是白色，但是在被:hover识别时解析为两个不同的值。另外，还可以用其他的属性进行设置。（具体可以看看怿飞的blog） 注：上面所有css我只是简单的说这么个意思，a对象的设置肯定要视具体情况而定··· 哎呀，真是太强大了···在此感慨一下：没有搜索引擎解决不了的问题！
这两天在做几个页面的时候，关于页面底部信息（页脚）的布局遇到有几种情况，这里记录下来，以备查阅。（均以div布局） 我先说一下我遇到的两种情况吧： 第一种情况：左边有个logo，右边是页脚信息。最外边的div有2px的边框，整个div没有高度限制。 首先想到的是定义一个最外边div，并定义border-top:2px solid #a40000；将里面的内容text-align:center;然后将左边的logo浮动到左侧(float:left)，这样的写法我们预览到的界面显示结果是：logo到最左边去了，页脚信息在div里居中显示。这样肯定不是我们的初衷，我们是希望logo和页脚信息都在整个div里居中显示。 所以，我想到的解决办法是：在这个div里再写一个div，并定义它的宽度（这个宽度实际上是你自己看着设置的，根据最外边div的宽度来设置个差不多的数值就就可以了），将这个div里设置margin:0 auto；也就是让它居中。然后我们再将logo浮动到左侧，并将右侧的页脚信息居中显示。 下面我们说说右边页脚的写法：右边的两行页脚信息我是用li来写的。设置li最基本的字体属性，并让它居中显示。这里注意一下行高，也就是line-height的值，其实，我们也是追求完美的，所以我们要考虑到右侧两行的页脚信息是否与左侧的logo在垂直方向居中对齐，那么我们这里就设置li的line-height，这个值呢，两行页脚的行高加在一起和logo的高度一样就可以了，比如logo的高度是48，那么我们设置li的line-height:24px;就可以了。 第二种情况：这个div里有一个x轴的平铺背景，并有高度height:100px的限制。 我先说一下我一开始的写法：定义最外边的div，设置背景x轴平铺，设置div的高度，然后是ul，ul里写li，设置li的行高。同样这个行高我们根据100px的高度来设置个33px就差不多了，问题不大。但实际预览结果你会发现：三行页脚信息确实差不多铺满了整个高度（但实际上我们是想要这样的布局：三行页脚信息在整个div里垂直居中，并且上下有等高的边距。）这样的话我们就想到设置ul的上下margin值，再改li的行高，好，那么我们设置ul的上下margin值，但是这样，问题又来了，在ie下是没问题的，但在ff下，整个div往下走了10px的高度（原因是设置了ul的上下边距）。。。那我们换个思路，既然margin不行，我们就用padding，对，我们设置padding的上下边距值，恩，试了一下，可以了！ 那，我们可不可以既不用设置ul的margin的值也不用设置padding值来达到我们想要的效果呢？答案是可以的。那我们就从最外边的整个div的高度下手，我们先设置它的高度，再设置一个等值的上下边距padding，然后ul里的margin和padding都是0，其实这样也可以。 其实，还有一种写法，那就是用p写，设置p的margin和padding值都为0，并设置line-height，同样最外边的div里还是要padding上下等值边距的。同样也可以达到我们想要的效果。 下面我们再来看看sina和土豆是怎么写页脚信息的： 可以看到，sina也是用p写的，在右边可以看到它设置了p的margin和padding值都为0，并设置行高为20px。 再来看看土豆的↓ 土豆呢，是把所有的页脚信息放在一个div里，加这个里面的内容居中，然后每一行用br进行强制换行。（不太推荐用这种方法，但这种方法也是最简单的） 总结：反正呢，写页脚信息的方法很多，也会遇到各种不同的情况，我们只要将最终的效果实现出来就可以了。 推荐写法：用p写，设置p的margin和padding值都为0，然后设置行高。各容器的高度设置就得视情况而定了。
我们经常会碰到新闻列表的页面布局，如下图： 那么，这样的页面该怎么写呢？…. 当然，我们应该用li去写··· 这里，想和大家探讨一下右侧日期的写法··· 在网上，看到两种写法： 第1种写法： <li><a href="#"><span class="title">新手培训帮助</span><span class="date">11-27</span></a></li> 这种写法是分别给新闻标题和日期写一个类，将新闻标题float:left，将日期float:right； 第2种写法： <li><span class="date">11-27</span><a href="#">新手培训帮助</a></li> 这种写法只是给日期写一个类，将将日期float:right，这样也是可以将日期布局到到右侧的，但这里要注意的是：span要在a的前面，并写在a的外面。 说说我以前一直惯用的写法： <li><a href="#">新手培训帮助</a><span class="date">11-27</span></li> 这是我以在看到前面1、2两种写法之前的惯用手段，这样写，会有一些问题，日期是浮动到右侧了，但在页面上显示的话会折行，也就是它并不会很服帖的和每条新闻标题对齐，而是会往下来，差不多会有一行的距离，于是，我只有在日期span类里定义margin一个上边距的负值，并视实际情况定义其他三个边距的值，这样也可以达到目的。但是这样貌似会增加代码的行数（呵呵，其实好像影响也不大）··· 所以，我在这里推荐第二种写法··· 但是呢，问题还是有的：如果你改变日期的字体，比如：10px的Verdana字体，预览，你会发现，日期又会往下跑一点，这应该是10px的Verdana英文字体所占的像素比较小造成的，如果你用12px的宋体，就不会有问题，所以呢，如果是特别追求完美的那还是得定义margin的上边距负值！
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 4 IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; [...]
想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 通过许多实际项目，个人认为一个完备的前端产品开发团队，必须拥有如下的人才配备，也希望大家补充： ◎ 团队全体成员达到所有技能中的a级标准 ◎ 团队全体成员必须掌握两项技能中的b级标准，并保证所有的b级标准在该团队中有50%以上成员能达到 ◎ 团队全体成员必须掌握一项技能中的c级标准，并保证所有的c级标准在该团队中有25%以上成员能达到 具体技能描述： 【必备】UserInterface ◎ PhotoShop/Fireworks Design a – 配合美工将草图形成具体的符合WebPage的设计 b – 有快速制作分层高品质PSD、PNG的能力 c – 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码 ◎ Flash Design a – 基本动画效果 b – 复杂的交互体系设计，了解第三方swf辅助设计软件 c – 复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等） 【必备】Browser-side (Web Application) ◎ XHTML/CSS a – 基本的layout实现 b – 严格跨平台的layout实现以 c – 优雅的HTML code，尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为"一切都已经准备就绪了"，而不是"捉襟见肘"。 ◎ JavaScript/Ajax/DOM a – 基本的DOM操作，了解AJAX，可以实现数据通信 b [...]
<div style="background:url(images/log_01.gif) no-repeat; width:283px; height:137px; overflow:hidden;"> <a href="http://www.163.com/" target="_blank" style="display:block; width:283px;height:137px;"></a> <a href="http://xiaoi.olomo.com/matching.php?u=82499" target="_blank"><img style="border:0; position:relative;bottom:50px; margin-left:175px;" src="images/wyyhq.gif" /></a> </div> 要实现的页面效果是：在一张背景图片上再加上一个图片按钮的链接··· 实现↓ ·定义一个定值宽高的div，并在div里定义背景 ·把a写在这个div里，并将a作为块元素处理 ·将图片按钮的链接（同样也是a）同样也在这个div里，并对这个a进行相对定位 大致就是这样实现··· 打完收工···
