搜索
show-nav

Opera、firefox添加收藏的方法

<a rel="sidebar" href="http://cosa.elianba.com" title="elianba.com">elianba.com</a>

关键是：rel="sidebar"，不用脚本，浏览器会自动识别
试一下
IE6、Firefox2侧栏中打开页面：
<a target="_search" href="http://cosa.elianba.com" title="elianba.com">elianba.com</a>

试一下
改变文字选中后的背景色（IE下无效）：
*::-moz-selection { background-color:#663399; color:#FFFFFF; }

自适应宽度圆角矩形(圆太小了吗?)

先说百分比宽度的布局，id为container的div宽度自适应，里面分左右2个部分宽度<=50%(有1px的边框)。代码如下：

<div id="container">
    <div class="fleft circle">
   &...

阅读全文>>

吊牌

吊牌，就是物品上面贴的标签。一开始我也以为这东东叫标签，经过老大的指点才知道他的名字叫吊牌。[break]

点击在新窗口中浏览此图片

阅读全文>>

让IE6 “支持”min-width

还是利用margin值可以为负来模拟实现的，margin的负值还可以实现固定大小的容器的绝对局中。代码：

阅读全文>>

框架结构

FF下body为百分比时宽度、高度值始终是相对html的。不同的是：
以FF为标准：
Ie7对body宽度的计算与FF一样（此时html的宽度与body相同），body高度则是相当于当前浏览器窗口内容区域。
Ie6下html的宽度不可变，始终为当前浏览器窗口内容区域宽度、高度。

阅读全文>>

锚点选项卡

利用锚点实现选项卡的切换效果，选项卡照理说听该用visibility属性来实现，可是好像大家用的都是display，Why????：


<!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=gb2312" />
<title>锚点 - 选项卡？</title>
<style type="text/css">
body {font:12px "宋体"}
div {height:230px;width:230px;background:#999;overflow:hidden;}
span {display:block;width:230px;height:230px;background:yellow;text-align:center;}
</style>
</head>
<body   >
<div> <span id="test1">第1个</span> <span id="test2">第2个</span> <span id="test3">第3个</span> <span id="test4">第4个</span> </div>
<a href="#test1">第1个</a> <a href="#test2">第2个</a> <a href="#test3">第3个</a> <a href="#test4">第4个</a>
</body>
</html>

EP，迟到了……

     以后就用Editplus写代码了，坚决不用Dw，到不是因为Dw不好用，而是启动的太慢了。整了个把钟头熟悉了Editplus的自动完成，至于Dw的代码提示吗就不用了，貌似xhtml中常用的标签就那么些，css属性也不是很多，忘记了还可以查手册……
    Editplus的自动完成功能实在是很强大，可以将常用的大串代码存成片段，用的时候只需要输入自己设定的几个字母就行了。

阅读全文>>

附件下载：
xhtml.rar 4.81KB

师傅，等等我！

    今天运气还不是一般的好，一路的红灯都被我碰到了。YYD，差点迟到……上次也是，50米的破路居然花了20分钟……

绝对水平对齐的表单

     新浪的写法：绝对定位input标签。
  
    新浪采用的是在input外嵌套相对定位的div标签，这里直接相对定位并左浮动label标签，input标签相对label绝对定位。

    height==line-height时，默认情况下文字并不是绝对垂直居中的：height、line-height同为偶数时上下相差3px，同为奇数时上下相差2px。要达到绝对居中height应为奇数，此时line-height=height+2px，IE7&FF中文字绝对居中。IE6下需设置overflow:hidden。


<!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=gb2312" />
<title>水平对齐的表单 www.etosun.cn</title>
<style type="text/css">
* {margin:0px;padding:0px;}
body {font:12px "宋体";}
.myform {margin:100px auto 0 auto;padding-left:10px;width:490px;height:29px;line-height:31px;overflow:hidden;background:#FFFF00;}
label {position:relative;float:left;width:145px;}
.myform input {position:absolute;}
.uname input, .pw input, .check input{width:80px;top:5px;height:15px;line-height:15px;}
.uname {width:150px;}
.uname input {left:55px;}
.pw {width:140px;}
.pw input {left:45px;}
.check {width:120px;}
.check input{left:55px;width:40px;}
.botton {width:70px;}
.botton input {top:5px;width:61px;height:19px;}
</style>
</head>
<body >
<div class="myform">
    <form>
        <label class="uname">用户名：<input type="text" name="uname" /></label>
        <label class="pw">密码：<input type="password" name="pw" /></label>
        <label class="check">验证码：<input type="text" name="check" /></label>
        <label class="botton" ><input type="image" name="imageField" id="imageField" src="button.gif" />
        </label>
    </form>
</div>
</body>
</html>

标准浏览器下父容器高度自适应

这里的标准是相对IE而言的，比如：FF、Opera、Safari。例子：


<!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=gb2312" />
<title>父容器高度自适应</title>
<style type="text/css">
.test {width:454px;background:blue;float:left;}/*第一种&#124;overflow:hidden 第二种*/
.test .tleft {float:left;width:200px;background:yellow;}
.test .tright {float:right;height:500px;width:200px;background:green;}
.test .clearfloat {clear:both;}/*第三种*/
</style>
</head>
<body    >
<div class="test">
    <div class="tleft">left</div>
    <div class="tright">right</div>
    <!-- <div class="clearfloat"></div> -->
</div>
</body>
</html>
[/hcode][separator]
       比较好用的方法有：1、overflow:hidden；2、&lt;div class=&quot;clearfloat&quot;&gt;&lt;/div&gt
今天突然发现让父容器浮动也能达到这个效果，只是用起来要捎带注意点而已。

[hcode]
<!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=gb2312" />
<title>父容器高度自适应</title>
<style type="text/css">
.test {width:454px;background:blue;float:left;}/*ouverflow:hidden;这是第三种方法，float:right;}*/
.test .tleft {float:left;width:200px;background:yellow;}
.test .tright {float:right;height:500px;width:200px;background:green;}
.test .clearfloat {clear:both;background:red;}
</style>
</head>
<body    >
<div class="test">
    <div class="tleft">left</div>
    <div class="tright">right</div>
    <!--<div class="clearfloat"></div>去掉这里的注释是二种方法-->
</div>
</body>
</html>
1 2 3 4 5 6
分类
链接
存档

Powered by emlog turf