Posts tagged as ' Div+Css ' ...



 

纯CSS效果提示

 
 14 十一 2009 @ 1:08 上午 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<meta name=”Author” content=”Aultoale” />
<style type=”text/css”>
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>
</head>
<body>
<a id=”tip” href=”#”>
移到这里试试!
<span id=”tip_info”>这里是提示信息!</span>
</a>
</body>
</html>

Posted By: 大宇
Last Edit: 14 十一 2009 @ 01:08 上午

Email • Permalink • Comments (0)
Tags
Tags:
Categories: Div+Css, html
 

DIV+CSS+JS制作滑动折叠的文字效果

 
 14 十一 2009 @ 1:02 上午 

<!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>DIV+CSS+JS制作滑动折叠的文字效果</title>
</head>
<style type=”text/css”>
<!–
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,”宋体”}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
–>
</style>
<script type=”text/javascript”>
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = “none”;
var isOpen = false;
head.onmouseover = function() {
this.style.background = “#EFEFEF”;
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = “#EFEFEF”;
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = “#FFF”
}
function show() {
head.style.borderBottom = “1px solid #DADADA”;
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}

More »

Posted By: 大宇
Last Edit: 14 十一 2009 @ 01:04 上午

Email • Permalink • Comments (0)
Tags
Tags: , ,
Categories: Div+Css, html, js
 

CSS首字下沉

 
 14 十一 2009 @ 12:56 上午 

<!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>CSS首字下沉</title>
<style type=”text/css”>
.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}
</style>
</head>
<body>
<div> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>
<div> 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 </div>
</body>
</html>

Posted By: 大宇
Last Edit: 14 十一 2009 @ 01:03 上午

Email • Permalink • Comments (0)
Tags
Tags:
Categories: Div+Css, html
 

css加锚点分页效果

 
 14 十一 2009 @ 12:55 上午 

<style type=”text/css”>
* {margin:0; padding:0;}
body {font:normal 12px/1.5em Verdana, Lucida, Arial, Helvetica, “宋体”, sans-serif;background:#FCFCFC;}
.wrapper {width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
.content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
.box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
.pager {width:180px;height:20px;margin:5pxauto;text-align:right;}
.pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
.pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}
</style>

<div>
<div id=”a1″><h2>锚点控制内容</h2><p>第一屏</p><p>网上有很多这样的教程，我这个只是娱乐而已</p></div>
<div id=”a2″><h2>锚点控制内容</h2><p>第二屏</p></div>
<div id=”a3″><h2>锚点控制内容</h2><p>第三屏</p></div>
<div id=”a4″><h2>锚点控制内容</h2><p>第四屏</p></div>
<div id=”a5″><h2>锚点控制内容</h2><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p></div>
</div>
<div>
<a title=”" href=”#a1″>1</a>
<a title=”" href=”#a2″>2</a>
<a title=”" href=”#a3″>3</a>
<a title=”" href=”#a4″>4</a>
<a title=”" href=”#a5″>5</a>
</div>

Posted By: 大宇
Last Edit: 14 十一 2009 @ 01:03 上午

Email • Permalink • Comments (0)
Tags
Tags: ,
Categories: Div+Css, html
 

底边工具条

 
 15 七 2009 @ 6:48 下午 

看到一些网站的底边下的工具条或是导航条效果很不错，FACEBOOK的很经典，自己也研究了一下简单的实现了功能    代码如下，IE6可能会有问题因为用到了position:fixed  虽然使用了_position:absolute;做兼容处理  但没有用IE6做测试

<!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″ />
<title>position:fixed</title>
</head>
<style>
.m-chat-box{position:fixed;_position:absolute;z-index:99999;width:100%;bottom:0}
.m-chat{position:relative;height:34px;background:url(http://i3.sinaimg.cn/lx/deco/2007/1229/yocc071229img/eladies_home_bg_002.gif) repeat-x ;border-left:1px solid #b5b5b5;border-right:1px solid#b5b5b5;margin:0 70px 0 15px;}
</style>
</head>

<body>
<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />
1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />
1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />
1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>
<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />
1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />
1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />
1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>

<div>
 <div>
  position:fixed
 </div>
</div>

</body>
</html>

下面的是我在网上找到的方法 一起记录在这吧
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定  */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

Posted By: 大宇
Last Edit: 28 八 2009 @ 10:58 上午

Email • Permalink • Comments (0)
Tags
Tags:
Categories: Div+Css, html
 

JS+DIV+CSS实现滑动抽屉效果

 
 15 四 2009 @ 4:31 下午 

这个效果很酷，用在菜单和列表上是最好不过了，我只是简单的实现了功能  ， 美化没怎么做 ，喜欢的话可以自己再改改，IE7 FF测试通过

<script>
var moveNum = 110; //移动总像素
var leftNum = 25;  //距左端像素

function openMenu(){
var y = moveNum;
function closelist(){
document.getElementById(‘list’).style.left=y+”px”;
y–
if(y==leftNum){clearInterval(intv);}
}
intv=setInterval(closelist,1);
}

function closeMenu(){
var y = leftNum;
function showlist(){
document.getElementById(‘list’).style.left=y+”px”;
y++;
if(y==moveNum){clearInterval(intv);}
}
intv=setInterval(showlist,1);
}

</script>

<div style=”margin-left:200px;width:110px;height:100px;background:#eeeeee;overflow:hidden”>

<div style=”width:20px;height:100px;background:#00FF00;float:right;” onclick=”openMenu()”>打开</div>

<div id=”list” name=”list” style=”float:right;height:100px;width:90px;background:#FF0000;left:110px;position:relative ;z-index:10;” >
<div style=”float:left;width:20px;height:100px;background:#0000FF;” onclick=”closeMenu()”>关闭</div>
<div style=”float:left;”>fdsfdf<br />fdsfsf</div>
</div>

</div>

Posted By: 大宇
Last Edit: 15 四 2009 @ 05:15 下午

Email • Permalink • Comments (0)
Tags
Tags: , ,
Categories: Div+Css, js
 

css图片滤镜

 
 08 四 2009 @ 2:11 下午 

语法:STYLE=”filter:filtername(fparameter1,fparameter2…)}(Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数)

滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.
More »

Posted By: 大宇
Last Edit: 08 四 2009 @ 02:11 下午

Email • Permalink • Comments (0)
Tags
Tags: ,
Categories: Div+Css
 

CSS图形渐变滤镜

 
 08 四 2009 @ 2:07 下午 

图型变换代码如下.

      23.随机变换效果             type=”progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23)”

0.方形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)”
交叉形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)”
菱形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)”

1.方形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)”
交叉形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)”
菱形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)”

2.圆形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)”
加号形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)”
星形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)”
More »

Posted By: 大宇
Last Edit: 08 四 2009 @ 02:07 下午

Email • Permalink • Comments (0)
Tags
Tags: ,
Categories: Div+Css
 

5.12国殇网站灰色代码

 
 13 三 2009 @ 4:42 下午 

<!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”>

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>

Posted By: 大宇
Last Edit: 13 三 2009 @ 04:42 下午

Email • Permalink • Comments (0)
Tags
Tags:
Categories: Div+Css, html
 

DIV滚动条

 
 22 十二 2008 @ 8:50 下午 

<DIV style=”PADDING-RIGHT:10px;OVERFLOW-Y:auto;PADDING-LEFT:10px;SCROLLBAR-FACE-COLOR:#ffffff;FONT-SIZE:11pt;PADDING-BOTTOM:0px;SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;OVERFLOW:auto;WIDTH:450px;SCROLLBAR-SHADOW-COLOR:#919192;COLOR:blue;SCROLLBAR-3DLIGHT-COLOR:#ffffff;LINE-HEIGHT:100%;SCROLLBAR-ARROW-COLOR:#919192;PADDING-TOP:0px;SCROLLBAR-TRACK-COLOR:#ffffff;FONT-FAMILY:宋体;SCROLLBAR-DARKSHADOW-COLOR:#ffffff;LETTER-SPACING:1pt;HEIGHT:100px;TEXT-ALIGN:left”>

       DIV滚动条 <br />

      所谓DIV滚动条，就是利用DIV标签，<br />

      在里面嵌入CSS样式表，<br />

      加入overflow的属性值，<br />
   
      这样，当div所规范的区域内的内容达到一定程序时，<br />
     
      滚动条就派上用场。效果类似iframe<br />     

      代码在下一楼提供。 <br />
　　
      参考核心代码：<br />

　　滚动条相关颜色属性：<br />

　　face-color：滑块颜色<br />

　　hightlight-color：高亮颜色<br />

　　3dlight-color：三维光线颜色<br />

　　darkshadow-color：暗影颜色<br />

　　shadow-color：阴影颜色<br />

　　arrow-color：箭头颜色<br />

　　tack-color：滑道颜色<br />

　　滚动条属性：<br />

　　overflow：auto为自动，yes为有，no为无<br />

　　overflow-x：横向滚动条<br />

　　overflow-y：纵向滚动条<br />

</DIV>

Posted By: 大宇
Last Edit: 22 十二 2008 @ 08:50 下午

Email • Permalink • Comments (1)
Tags
Tags:
Categories: Div+Css
Previous Entries
Last 50 Posts
Register an account
Change Theme...
  • Users » 1
  • Posts/Pages » 165
  • Comments » 12
Change Theme...
  • VoidVoid « Default
  • LifeLife
  • EarthEarth
  • WindWind
  • WaterWater
  • FireFire
  • LightLight

关于



    No Child Pages.

Linux命令手册



    No Child Pages.

php.ini配置



    No Child Pages.

Memcache协议



    No Child Pages.