文章标签 ‘CSS’
使用js通过userAgent判断iPad,iPhone和iPod然后添加指定css到head代码如下： 注意：以上代码运行在jQuery环境下。
vertical-align:middle;line-height:16px;padding:3px 1px; 0;font:16px arial vertical-align:middle;line-height:行高值px;padding:3px 1px; 0;font:行高值px arial 文本框文字居中
问题现象描述：IE6,IE7下元素使用position:relative无法跟随父级一直滚动 IE6或IE7下实例重现 点击 http://www.radys.cn 使用的样式与结构如下 .box{width:300px;height:200px;overflow-x:hidden;overflow-y:auto;} .box ul li{text-align:left;position:relative;line-height:1.3em;} .box ul li span{position:absolute;right:5px;top:0;} <div class="box"> <ul> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span [...]
用div css 实现文本底对齐 <div style="position:relative;height:100px;"> <p style="position:absolute; bottom:0px; padding:0px; margin:0px;">这里的文本底部对齐</p> </div> 关键点：父容器为relative,子内容使用absolute（绝对定位）
带有float的margin加display: inline，解决双margin的Bug 更详细的解释请参考 http://www.positioniseverything.net/explorer/doubled-margin.html
图片从中心位置放大效果，目前只测试IE7和FF3.0RC3（家里只装了这两浏览器），效果是从zhuaxia.com上看到的，自己动手实现的代码如下 PS：zhuaxia上面是用JS实现的
DIV和CSS实现满足用户个性化的要求变得很容易，今天向大家介绍一种CSS DIV布局，搭配JS实现页面多风格的技术。 通过这个技术你完全可以自己动手建立一个多风格技术页面和网站了 1. styleswitcher.js function setActiveStyleSheet(title) {var i, a, main;for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {a.disabled = true;if(a.getAttribute("title") == title) a.disabled = false;}}} function getActiveStyleSheet() {var i, a;for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");}return null;} function getPreferredStyleSheet() {var i, a;for(i=0; (a = [...]
目前网页标准已是大势所趋。下面的这些站点将一如既往地显示群聚的力量。 凝视世界顶尖WEB设计师的标准制作，感受标准的气氛，掀起学习标准的浪潮。 CSS设计师们，+U吧。 CSS ZenGarden:http://www.csszengarden.com/ CSS禅意花园是最富盛名的CSS设计陈列馆，DaveShea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式，却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台。 Cssvault:http://www.cssvault.com/ Cssvault是第一个以网站缩略图的方式呈现的优秀设计的网站，而CSS陈列馆（showcase）这一说法也是由这里开始，从开始至今大约一年的时间里面，收录了大量的优秀设计，是CSS设计师必去的网站之一。 Web Standards Awards:http://www.webstandardsawards.com/ Web Standards Award，顾名思义，这里也是收集符合“网页标准”设计的网站，除收集外，还对每月收集来的网站进行评选，获胜设计可以冠以当月“网页标准”设计奖的头衔，对于设计师来说，也是一种殊荣。 CSSBeauty: http://www.cssbeauty.com/ CSSBeauty属于后起之秀，今年五月成立至今，也收录了大量的优秀站点。而与前几个网站有所不同的是，他对说收录的网站进行了分类，诸如：商业，娱乐，个人等等，使得收集的内容对访问者更有针对性。 unmatched〈style〉: http://www.unmatchedstyle.com/ 这个网站是最新出炉的一个CSS陈列馆，和前面介绍的几个网站大同小异，也是采用缩略图的方式呈现，当然每个网站收集者的审美特征都不同，多一个地方无疑也给钟情于CSS设计的朋友多了一个选择，而且他们的更新很勤快。 The Weekly standards: http://www.weeklystandards.com/ 这里是我特别推荐的一个，前面的网站都收集了很多优秀的设计，符合“网页标准”，可为什么这些网站符合“网页标准”，到底这些网站好在哪里？除了外观之外，还有那些地方是需要设计者注意的？这里将带给你答案，每周一个案例分析，精彩纷呈。 Stylegala: http://www.stylegala.com/ 还有呢，Stylegala，也是上个月才推出的一个CSS陈列馆项目，和前面介绍的如出一辙，唯一不同的地方是访问者可以对收集其中的优秀设计进行投票。而作者对色彩搭配方面颇为敏锐，所收录的网站皆有很强的视觉效果。 Postearte: http://www.marcapaginas.net/postearte/galeria.php 还有最后一个。这个网站的主人好像是欧洲人，总之他写的不是英文，看不明白。不过他自己做的Postearte这个网页本身就是一个很优秀的设计。特别是导航条，别出心裁。 如果你感觉这些还不够，建议到 CSSVault推荐的130个CSS布局站点
在http://www.highdots.com/index.php?fontstyle=f-larger这个网站上看到这个菜单非常不错，我用了FF2.0,ie6,ie7,Opera9.21测试都没有问题，所以从它的网站中把这个效果分离出来，以备以后的项目中使用＾＿＾． 现在就下载
从开始认识CSS(DW4)那时起，我就知道了CSS的强大，但从未用CSS排版过，因为我曾经尝试过学习，但感觉太难了 而且用DW的表格，所见及所得，做起页面来非常的快，排版也容易的多，由于最近求职，很多公司都要求DIV，CSS，所以我再次尝试学习 1.学习方式 我以为，看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识)，在查看别人的代码时可以去除一些重复的，或者一些于CSS无关的代码，将更利于我们分析，你可以从中了解到别人是怎么做的，更深一点，你可以考虑为什么要这样做，当然它们做的也不一定全对，就算淘宝，我发现它们的CSS里面也有不少的多余代码，我曾经从淘宝的网页代码里面学到不少的东西，我把基本的框架保留下来，然后分析，并且我将我的分析记录了下来，你可以在这里查看： http://www.dayanmei.com/blog.php/ID_536.htm 2.练习方式 在了解到一些基本的布局方式，以及一些容器的属性之后，可以尝试自己，编写一些简单的布局，遇到出现问题的时候，可以在google搜索一下，或者向蓝色理想论坛以及其它一些讨论标准化的论坛询问一下，会有很多好心人的哦 3.一本手册 在遇到问题的时候或者对某个属性不是很了解，或者对于属性的兼容性不太清楚的时候，这就有很大的作用了 手册可以去这里下载 http://www.w3cn.org/resource/down/2004/73.html 4.多写多练 你发现自己多写了几个布局，或者出了一些问题并解决后，你已经基本掌握了布局的要点了. 如何学习标准化 1、几本书、几个网站、几篇贴子、几个blog 《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习，反思自己之前学习和设计过程中的问题，这样才能有效地提高。 《样式表中文手册》必备的工具，我一般放在桌面随时查询。里面提供了详细的使用说明和实例。 《CSS网站布局实录》较新的一本标准化著作。告诉你怎么去写符合标准的xhtml和css代码，告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者，基本上都是针对实例的布局、效果的实际操作，比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现，关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》，二者结合起来学习效果不错。目前的版本可能因为时间问题，校对很仓促，有不少错别字和有问题的句子没，但涉及到代码到没有发现错误。 《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义，并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义，为准确实现设计意图提供保障。 《html和xhtml权威指南》应该是一本权威的工具书，没有必要通读，可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。 《javascript权威指南》作为行为层的主要技术，不学习javascript就不能完整地学习web标准。 网站设计师 最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。 蓝色理想标准化专版 这个不用说吧，对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习氛围略显浮躁，没有深入理解停留在css表现层次的朋友较多。 CSSer.org 这个网站不知道怎么关掉了……有段时间不去看了，等待站长再次开放吧。 网易 作为门户网站里较早采用web标准的站点之一，其最新版本很值得研究。 下面是一些web标准届牛人朋友的blog，跟着他们能学习很多，而且通过blog这样亲切的形式学习效果应该很好。建议静心阅读他们的系列教程。 http://www.realazy.org/blog/ http://www.andymao.com/andy/ http://old9.blogsome.com/ http://www.greengnn.com/ http://blog.pr1984.com/ http://www.loaoao.com/ 2、如何学习 读写 读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播，那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来，不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写，写一些代码片断，一些布局结构，一些效果的实现。哪怕是照著书敲出代码来，加深记忆和理解，效果要比单纯的度过效果要好得多。 改动 改，不是抄袭。把别人的网站另存下来，改动其中的部分内容，看看页面显示有什么变化，在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化来源于你的改动，这本身就是一个加深记忆和理解的过程。另外一种改法就是把复杂的页面简单化，简单到能演示效果为主，代码少了看起来清晰有利于学习。或者把简单的布局填充内容之后看页面怎么显示，会不会影响到布局，自适应的还是固定大小的，超出固定大小的内容hidden了还是流向了结构之外？有没有什么Bug？青蛙用永远逮不到一个安安静静站在那里的蜻蜓，只有蜻蜓飞起来了青蛙才能判断才能捕食。 睡觉 睡觉前的思考。在显示器之外去思考之前学习到的东西，要有一定的距离和空间高度去看待去思考，比如今天写的布局是不是合理，有没有必要这样复杂，如果把浮动改成绝对寻址呢。等等，就像作平面设计一样，有时候椅子往后一仰，稍稍的远离屏幕，对之前的细节处理就能有一个全新的认识。 收藏 好记性不如烂笔头，总去发帖提问也不是办法。把看到的有用的教程收集起来分类整理，比如布局代码、导航特效、浏览器兼容hack写法等等。建立自己的文档库，时间久了整理整理，如果有合适的条件不要忘记和朋友们分享。 实践 作一个完整的网站/网页项目，未必要复杂或者庞大。但至少要有一个完整的页面，尽可能用熟悉的技术去实现。检验自己、发现问题给自己继续学习的动力。
