菜鸟也用jQuery 在IE6实现max-width

步骤1:下载jQuery1.3     官方http://jquery.com/

步骤2:将下载的jquery-1.3.2.min.js 拷贝到网站文件夹中,如我的拷贝于images中

步骤3:在<head></head>之间拷贝一下代码

<script language=”javascript” src=”images/jquery-1.3.2.min.js”></script>
<script language=”javascript”>
if($.browser.msie && $.browser.version == 6.0)
window.onload = function(){
var maxWidth = parseInt($(‘#ncontent  img’).css(‘max-width’));
$(‘#ncontent img’).each(function(){
if ($(this).width() > maxWidth)
$(this).width(maxWidth);
});
}</script>

步骤4:修改一个参数,例:需要让   #ncontent 中图片实现max-width,我就把 #ncontent   img {   } 中添加好max-width; ,然后在上面的js代码中修改这个id或class名称为你定义的名称即可。

本人也是菜鸟,希望高手能提出更简洁方法互相交流。 菜鸟朋友如还不清楚可q我94377250,共同进步。

qcms 留言本DIY

<span style="font-size: large;"><span style="color: #ff0000;"><span style="color: #ff0000;">原文(转自qcms官方)</span></span></span>
 
<span style="font-size: large;"><span style="color: #ff0000;"><span style="color: #ff0000;"><a href="http://qesy.5d6d.com/thread-177-1-1.html">http://qesy.5d6d.com/thread-177-1-1.html</a></span></span></span>
 
<span style="font-size: large;"><span style="color: #ff0000;"> </span></span>
 
<span style="font-size: large;"><span style="color: #ff0000;"><span style="color: #ff0000;">效果:
<a href="http://www.xiyyx.cn/qcms/guest.asp" target="_blank">http://www.xiyyx.cn/qcms/guest.asp</a></span></span></span>
 
<span style="font-size: large;"> </span>
 
<span style="font-size: large;"><span style="color: #ff0000;">开始吧。</span></span>

ie6双倍边距解决办法!

div {
     float:left;
     margin-left:10px;
     width:420px;
     height:150px;
     border:1px solid red
     }

 

  这样设置以后。本来左边距设置为10px,但IE6.0解释为20px,这是一个比较头疼的问题。
  但解决也非常简单。办法就是是加上display:inline。就搞定了。

DIV CSS实例:橙蓝互换的CSS翻页效果

  CSS翻页效果在实际开发中是最常遇见的情况

  在前面的教程中我们曾经介绍过一篇相关的文章:
  DIV CSS实例:一款不错的CSS翻页效果(DIGG)
  http://www.52css.com/article.asp?id=647

  但编码不够优化,有些地方比较烦琐!

  现在我们再看这一款CSS翻页效果
  最终效果www.52CSS.com如下图所示

2200811801839

  下面的图片是本案例中的链接背景图片:

v200811802116
  下面是XHTML编码:

 Example Source Code
[www.52css.com]
<div id=”pagebar”>
    <a href=”#”><<</a>
    <span class=”page_now”>1</span>
    <a href=”#”>2</a>
    <a href=”#”>3</a>
    <a href=”#”>4</a>
    <a href=”#”>5</a>
    <a href=”#”>6</a>
    <a href=”#”>7</a>
    <a href=”#”>8</a>
    <a href=”#”>9</a>
    <a href=”#”>10</a>
    <a href=”#”>11</a>
    <a href=”#”>12</a>
    <a href=”#”>13</a>
    <a href=”#”>14</a>
    <a href=”#”>15</a>
    <a href=”#”>>></a>
</div>

  下面是CSS编码:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
* {
    margin:0;
    padding:0;
    text-decoration:none;
}
#pagebar {
    float:left;
    display:inline;
    width:570px;
    height:32px;
    margin:50px;
    font-size:13px; }
#pagebar a,#pagebar .page_now {
    display:block;
    float:left;
    margin-right:4px;
    padding:2px 5px;
    border:1px solid #f30;
    color:#fff;
    font-weight:800;
    background:url(pagebar_bg.png) repeat-x  0 0 ;
}
#pagebar a {
    display:inline;
}
#pagebar a:hover {
    border:1px solid #03c;
    background-position:0 -30px;
}
#pagebar .page_now {
    border:1px solid #333;
    background-image:none;
    background:#666;
}

  最终的运行效果:

 Source Code to Run [
www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

xhtml+div+css设计者要注意的几个地方(转载)

1. 要有合理并赋有语义的化的 属性。
例如:
头部布局 hearter
页面盒子 main
页脚 footer
窗口盒子 nav 。。。。。。。
2. 在书写CSS过程中,要区别对待 id 与 clss ,id 为页面唯一样式 class 是可多出引用的样式。
例如:
<div id=”nav_left”>01</div>
<div id=”nav_left”>02</div>
<div id=”nav_left”>03</div>
这样做是错误的,且不符合 W3C对于 XHTML的标准化规范。正确的写法就是用class
<div>01</div>
<div>02</div>
<div>03</div>
3. 在XHTML CSS 中不要属性标签不能使用大写,因为XHTML中对于大小写是很敏感的,在Transitional模式下的确可以容纳这些错误,但是无法通过W3C验证的。Strict模式下是绝对不允许出现的。
例如:
<BR> <DIV> 等等的所有属性标签。
正确的是:
<br /> <div>
4. 在XHTML中要确保有开始就有关闭。
例如:
<ul>
<li>首页
<li>产品
</ul>
<p> 您现在的位置<br>
这样是不对的,正确的写法为
<ul>
<li>首页</li>
<li>产品</li>
</ul>
<p><span> 您现在的位置</span></p><br />说明 br 因为一个独立的标识所以作为一个个体完整的标识存在 其关闭形式就是 <br />
5. 如果在CSS文件中使用了 float 浮动属性 那么在IE6中就会极容易出现双倍浮动的BUG
例如:
#div { float:left; padding:10px; width:300px; height:580px;}
那么这个div 很容易就会在IE6中出现 宽达到600px 的BUG 这样就会导致IE6中出现页面错位混乱的情况。
解决方法目前只能采用CSS HACK 的写法
区别IE6与FF:
background:#000;*background:#CCC;
区别IE6与IE7:
background:#F30 !important;background:#00F;
区别IE7与FF:
background:#F63; *background:#F33;
区别FF,IE7,IE6:
backgroundrange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6                      IE7                    FF
*                √                        √                      ×
!important  ×                        √                      √
——————————————————————————–
另外再补充一个,下划线”_”,
IE6支持下划线,IE7和firefox均不支持下划线。
还有一种写法就是 display:inline  就是将元素显示为行内元素.
#div {display:inline;  float:left; padding:10px; width:300px; height:580px;}
6. CSS中是可以进行缩写的。
例如颜色 白色 完整的颜色代码是 #FFFFFF 根据 RR GG BB 的缩写规则可以缩写为 #FFF
注意:有些代码是不可以缩写的 例如 #0D2345 墨蓝色 是不符合 RR GG BB的缩写规范的所以必须采用全写方式,最后要注意的一点是 颜色代码要大写

最后一些 XHTML+CSS 的常用命名
CSS命名规则
头:header
内容:content/containe
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

XHTML文件中id的命名
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright