蜈蚣's Blog - 早起的蜈蚣有鸟吃~

中间定宽，两侧不同背景自适应

wxbwyx821 , 2010/01/12 16:10 , (x)html+css , 评论(4) , 阅读(983) , Via 本站原创

一项目中，设计设计的头部是通栏的，中间是定宽，两侧背景自适应的~ 一边是黑色块，一边是红色块，下面是还带边框的。介种设计不多见。俺也是头一次遇到。咋实现呢？一开始用了一种笨方法。就是给html写了一个黑色背景图平铺。然后再给body一个足够大的红色块背景图。介样可以实现，但不是好方法。一是，图片太大。二是并不能确保大分辩率情况正常显示。在标准群里问了下，京-奔波儿灞童鞋给了一种方法可行。但没那么简单，我测试下了，兼容性会有些问题，我做了下修改，做到了兼容，但用到了HACK，用了三层结构：
下面给出代码：

样式部分：
……

使劲点这里阅读全文

JQuery 模拟下拉列表

wxbwyx821 , 2009/12/23 18:56 , Jquery , 评论(1) , 阅读(1327) , Via 本站原创

最近在做一项目时，设计师改变了下拉框的默认样式。无奈，只能通过模拟实现。
以下是结构：

以下是JQ代码：
……

使劲点这里阅读全文

JQuery Tab

wxbwyx821 , 2009/12/04 11:15 , Jquery , 评论(0) , 阅读(440) , Via 本站原创

用JQ写了个Tab, 在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" />
<script type="text/javascript" src="http://www.wugong.net.ru/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
// JavaScript Document by centipede
$(function() {
  $(".tabBox li").eq(0).addClass("on");
  $(".tabContent .tcon").eq(0).show(); //第一栏目显示
  /*$(".tabBox li").mouseover(function() {
    $(this).addClass("on").siblings().removeClass("on");
    var _liNum = $(".tabBox li").index(this);
    _tConNum = $(".tabContent .tcon").eq(_liNum);
    _tConNum.show();
    _tConNum.siblings().hide();
  }); //滑过切换 */
  $(".tabBox li").click(function() {
    $(this).addClass("on").siblings().removeClass("on");
    var _liNum = $(".tabBox li").index(this);
    _tConNum = $(".tabContent .tcon").eq(_liNum);
    _tConNum.show();
    _tConNum.siblings().hide();
  }); //点击切换
})
</script>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/1.5 Arial, Helvetica, sans-serif; text-align:center; background:#fff; }
ul, li { list-style:none; }
a { color:#000; text-decoration:underline; }
a:hover { color:#f00!important; }
.tabWrap { width:500px; margin:0 auto; overflow:hidden; }
.tabBox { width:500px; overflow:hidden; }
.tcon { width:498px; height:300px; display:none; overflow:hidden; border:solid 1px #ccc; }
a { padding:5px 10px; }
a:hover { border:solid 1px #ccc; padding:5px 10px; }
.tabBox li { float:left; }
.tabBox li.on { color:#fff; background:red; }
.tabBox li.on a:hover { color:#fff!important; }
</style>
<title>demo</title>
</head>
<body          >
<div class="tabWrap">
    <ul class="tabBox">
        <li><a href="#">新闻 </a></li>
        <li><a href="#">天气 </a></li>
        <li><a href="#">搜索 </a></li>
        <li><a href="#">娱乐 </a></li>
        <li><a href="#" >学习 </a></li>
    </ul>
    <div class="tabContent">
        <div class="tcon">我是新闻版块</div>
        <div class="tcon">我是天气版块</div>
        <div class="tcon">我是搜索版块</div>
        <div class="tcon">我是娱乐版块</div>
        <div class="tcon">我是学习版块</div>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

Tags: jquerytab

FF英文长串断行问题

wxbwyx821 , 2009/08/21 12:43 , (x)html+css , 评论(4) , 阅读(1097) , Via 本站原创

真是N久没更新日志了，GG都生气了，把我的站PR从2一下子降到0了。好可惜啊。前几天一朋友问我英文长串FF下断行问题，以前找到的是JS方法，感觉不是太好，因为那是获取ID的，批量断行，可能要写

使劲点这里阅读全文

web标准的可用性、可访问性、可维护性

wxbwyx821 , 2009/06/25 14:00 , 用户体验 , 评论(1) , 阅读(836) , Via 本站原创

声明这篇文章是在网上找到的，当时没记下地址，蜈蚣擅自在蜈蚣巢穴转载了，还请原文主不要见怪，理解万岁，共享万岁~

一直听说过web标准的可用性、可访问性、可维护性，但是具体的定义，我还是不是很清楚，今天总结下，理清一下思维。
在Web前端开发界，有三个词经常被提及：可用性（Usability）、可访问性（Accessibility）和可维护性（Maintainability）。
可用性指的是：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
可维护性一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码，对企业的长期发展非常重要。
可用性和可维护性定义比

使劲点这里阅读全文

生命的列车

wxbwyx821 , 2009/06/24 22:40 , 心灵驿站 , 评论(1) , 阅读(657) , Via 本站原创

生命的列车，建议大家在有声音条件时，再看一遍~

Flash Player文件

点击打开/折叠播放器

用户体验

wxbwyx821 , 2009/06/12 17:59 , 用户体验 , 评论(2) , 阅读(649) , Via Foxling

FROM:http://foxling.cn/category/ued/

FF下两列等高问题

wxbwyx821 , 2009/06/06 22:00 , (x)html+css , 评论(4) , 阅读(779) , Via 本站原创

今天一朋友让我帮她看一页面问题时, 涉及到了两列等高, 外容器overflow:hidden; 然后两列都写padding-bottom: 32767px; margin-bottom: -32767px; 这样就可以实现两列等高, 但她的页面的需求是中间没有边框, 只是左右有. 就是只给左容器一个border-left 右容器只给一个 border-right IE没问题, FF下有问题,边框显示不全, 但写了 border就没事.
把demo贴上来,大家可以看看:

使劲点这里阅读全文