存档

‘div+css学习’ 分类的存档

2端2种颜色,中间固定宽度和颜色

2015年4月27日 没有评论

要求实现如下效果(根据宽度自适应)

2端2种颜色,中间固定宽度和颜色

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style type=”text/css”>
* {padding:0px;margin:0px;}
.box {height:28px;background:red;position:relative;}
.leftBlue {width:50%;height:28px;background:blue;position:absolute;left:0px;top:0px;z-index:0}
.content {height:28px;background:black;width:1000px;margin:0px auto;position:relative;z-index:1;text-align:center;color:#fff;line-height:28px;}
</style>
</head>

<body>
<div class=”box”>
<div class=”leftBlue”></div>
<div class=”content”>内容</div>
</div>
</body>
</html>

div层跟随滚动条滚动position:absolute;fixed;relative的定位具体用法

2013年9月16日 没有评论

很多情况下我们都遇到一种效果,那就是div层会根据滚动条滚动而固定在网页的某个角落

有几种解决方法,不过我的解决方法抛弃了IE6用户,如果你还在使用IE6或者仍然为IE6的用户考虑,那么我建议你也抛弃!

1,position:fixed

这种方法很常见,道理很简单,就不做说明了,如果不懂,你可以去百度,但是这样会有一个bug,如果不固定页面宽度的情况下top和bottom是非常好控制的,但是left的值就麻烦了。

所以引入第二种解决方法,如下:

2,position:absolute;和position:relative公用,代码如下:

<div style=”position:relative;width:1000px;margin:0px auto;”>
<div id=”gundong”></div>
</div>

懂吧,第一个层是1000px的宽度,那么这个时候,你再用position:fixed就不行了吧?因为很简单,没指定宽度

定义个css样式:.contentFixed {position:fixed;top:0px;width:250px;}

如此通过js动态应用css样式到id=”gundong”的层上即可解决问题,但是一定要记住,这里有个bug,如果你不指定width:250px的话

分类: div+css学习 标签: , ,

解决div+css中ie的bug:input type=”text”时候,会撑开外层一个间隙高度

2013年9月13日 没有评论

不知道光看标题的人可能看懂,今天在项目中遇到一个bug,找了许久没有找到原因,后来经过耐心研究,终于搞定了。

在div+css的布局中,如下代码:

<div><input type=”text” /></div>

<div><input type=”text” /></div>

不知不觉,ie会在2个div中间增加一个大约5em高度的间距,通过网络寻找,原来这个不是marging,也不是padding,是ie内核解析渲染的bug,所以你无论设置div的margin为0px或者input的padding为0px,都不起作用,那么下面说说解决方法吧。

解决div+css中ie的bug:input type=”text”时候,会撑开外层一个间隙高度的方法如下:

<div><span>&nbsp;</span><input type=”text” /></div>

<div><span>&nbsp;</span><input type=”text” /></div>

在input前面增加<span>&nbsp;</span>即可解决问题,呵呵不知道为什么,总之解决了,当然了,可以加下css定义,防止<span>&nbsp;</span>真的起作用了,css如下:

<span style=”font-size:0px;width:0px;height:0px;”>&nbsp;</span>

分类: div+css学习 标签: ,

仿2005年淘宝导航条div+css效果

2013年5月12日 没有评论

首先,我们需要以下css文件:

*{margin:0px;padding:0px}

body{text-align:center;font-size:12px}

#nav{width:700px;margin:auto;margin-top:50px}

#nav ul li{list-style:none;margin-left:1px;float:left}

#nav ul li a{display:block;text-decoration:none;background:url(left.gif) no-repeat left top;margin-top:3px}

#nav ul li a:hover{margin-top:0px}

#nav ul li a:hover div{padding:6px 10px 9px 10px}

#nav ul li a div{background:url(right.gif) no-repeat right top;padding:6px 10px}

#nav #lian01 a{margin-top:0px;background-position:left -27px}

#nav #lian01 a div{padding:6px 10px 9px 10px;background-position:right -27px}

#nav #lian02 a:hover{background-position:left -57px}

#nav #lian02 a:hover div{background-position:right -57px}

#nav #lian03 a:hover{background-position:left -87px}

#nav #lian03 a:hover div{background-position:right -87px}

#nav #lian04 a:hover{background-position:left -117px}

#nav #lian04 a:hover div{background-position:right -117px}

#nav #lian05 a:hover{background-position:left -147px}

#nav #lian05 a:hover div{background-position:right -147px}

#nav #lian06 a:hover{background-position:left -177px}

#nav #lian06 a:hover div{background-position:right -177px}

#nav #lian07 a:hover{background-position:left -207px}

#nav #lian07 a:hover div{background-position:right -207px}

#nav #lian08 a:hover{background-position:left -237px}

#nav #lian08 a:hover div{background-position:right -237px}

#nav #lian09 a:hover{background-position:left -267px}

#nav #lian09 a:hover div{background-position:right -267px}

#nav #lian10 a:hover{background-position:left -297px}

#nav #lian10 a:hover div{background-position:right -297px}

#nav #lian11 a:hover{background-position:left -327px}

#nav #lian11 a:hover div{background-position:right -327px}

再次,我们需要以下html源代码:

<link href=”css.css” rel=”stylesheet” />
<div id=”nav”>
<ul>
<li id=”lian01″><a href=”http://www.baidu.com”><div>首页</div></a></li>
<li id=”lian02″><a href=”#”><div>数码通讯</div></a></li>
<li id=”lian03″><a href=”#”><div>女人</div></a></li>
<li id=”lian04″><a href=”#”><div>男人</div></a></li>
<li id=”lian05″><a href=”#”><div>家居</div></a></li>
<li id=”lian06″><a href=”#”><div>书籍音像</div></a></li>
<li id=”lian07″><a href=”#”><div>运动</div></a></li>
<li id=”lian08″><a href=”#”><div>游戏</div></a></li>
<li id=”lian09″><a href=”#”><div>宠物</div></a></li>
<li id=”lian10″><a href=”#”><div>香港街</div></a></li>
<li id=”lian11″><a href=”#”><div>淘宝商城</div></a></li>
<li id=”lian12″><div id=”new”><img src=”new.gif” alt=”新加栏目”></div></li>
</ul>
</div>

还有,我们需要以下2张图片作为附件:

淘宝导航条效果,左侧图片

淘宝导航条效果,左侧图片

淘宝导航条效果,右侧图片

淘宝导航条效果,右侧图片

这样,完整的仿2005年淘宝导航条div+css效果就完成了,当然别忘记了在html中加入文件头声明。在这里只是记忆,留个记号。

分类: div+css学习 标签: , , , ,
css.php