font-weight:normal//normal是普通粗细字体
其他的font-weight属性IE不支持
你写网页是用什么软件呢？Dreamweaver？FrontPage？ UltraEdit 还是记事本？其实除了这类编写 HTML 和程序码的软件以外，还有很多小巧而且免费的软件，可以帮助你在写网页时更方便、写的更好哦！尤其时在写 CSS、Javascript 或 Ajax 的时候，这些都是不可或缺的软件呢！也是小正正平常工作在使用的软件，现在要介绍给你！综合开发工具
综合的网站开发工具几乎都是浏览器的插件，提供了许许多多的功能，例如：
开关 CSS、开关 Javascript、开关 Cache：可以马上看到你的网页在浏览器中没有 CSS、没有 Javascript 或没有快取时的是长怎么样子。为什么要看没有 CSS 和 Javascript 的状况呢？一切都是为了 Accessibility 啊！
检视页面中文件的 DOM 结构和指定范围的原始码。
检视每个元素或 DIV 的ID、Class、目前的CSS样式（包括继承的样式），也可以将元素或 DIV 的外框显示出来。对于找出 CSS 和 Javascript 的问题十分有用。
检验 HTML 和 CSS 语法是否正确、符合 W3C 的标准。
因为这些工具是属于浏览器的插件，所以有分为给 IE 和 Firefox (缩写为FF) 所使用的版本，包括有：
Internet Explorer Developer Toolbar (IE)
Web Developer Extension (FF)
Firebug (FF)
HTTP 呼叫检视工具
让你可以很容易看到任何由浏览器所发出的 HTTP Request 的一切细节，包括档头资讯、所传递的参数、档案大小、传输速度和时间…等等。用来观察 Ajax 呼叫的行为和除错最方便了！
HttpWatch (IE)
Firebug (FF)
原始码工具
其实大部分的综合开发工具就已经有这样的提供功能，让你单独检视网页中某个区域的原始码，或是帮你检查语法的正确性，另外也有单独小巧的原始码相关工具可以使用。想要鼠标滑过去就立刻看到该范围的原始码吗？而不需要在茫茫“码“海中捞针。
Instant Source (IE, 不是免费的)
HTML VALIDATOR (FF)
图形相关工具
除了用 Photoshop、Fireworks 这类标准的大型软件来切图以外，对于平常一些简单的工作，杀机焉用牛刀呢？
Color Cop：可以吸取画面上任何地方的颜色色码。
MeasureIt (FF)：测量画面上的像素距离，例如想知道行距、边界要设为多少像素时，就靠他了。
Screen Calipers：这是另一套用来测量画面上像素距离的小软件。
Split Browser (FF)：将 Firefox 同一个浏览器视窗分为上下或左右两半，让你可以在同一个画面上同时看到两个或多个不同的网页内容，互相做比对，而不需要在多个视窗中切换来切换去。
IE Tab (FF)：虽然是叫做 IE Tab，但这可是 Firefox 的插件。让你在 Firefox 的浏览器视窗中开启 IE，神奇吧！
MWSnap：免费的萤幕抓图软件，用来切图也很方便，只要用秀图软件将原始网页设计的整张图打开、显示在萤幕上，就可以用萤幕抓图软件，撷取出某个范围的图形了。
HyperSnap：另一套好用的萤幕抓图软件，但不是免费的。
Picasa：Google 的免费秀图、图片管理软件。
Adobe Labs’ Kuler：Adobe 提供配色参考的网站，想不出要用什么颜色时，不妨去看一看找寻灵感吧！
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<script src="http://js.ue.766.com/common/jqLib/jquery-1.6.2.min.js" type="text/javascript"></script>
<title>开关</title>
<style>
.box{background: #629FCEwidth: 200pxheight: 30pxborder-radius: 15pxposition: relativeleft: 50pxtop: 50px}
.slider{background: #F6F6F6width: 100pxheight: 30pxborder-radius: 15pxposition: absolutetransition: left 0.5s -moz-transition: left 0.5s -webkit-transition: left 0.5sleft:0}
span{height: 30pxline-height: 30pxcolor: #F6F6F6font-weight: 800}
.m{float: leftmargin-left: 50px}
.w{float: rightmargin-right: 50px}
</style>
</head>
<body>
<div class="box">
<div class="slider" id="slider"></div>
<span class="m">男</span>
<span class="w">女</span>
</div>
</body>
<script>
$("#slider").toggle(
function () {
$(this).css("left","100px")
},
function () {
$(this).css("left","0")
}
)
</script>
</html>
手打了一个给你，嘿嘿
