楼兰故乡

公元4世纪，楼兰国突然销声匿迹。

Archive for the ‘Div+CSS’ category

如何横向排列DIV+CSS

May 8th, 2010

<code>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>无标题文档</title>

</head>

@charset “utf-8″;

/* CSS Document */

body{

padding:0;

margin:0;

font-family:Arial, Helvetica, sans-serif;

background:url(images/main_bg.gif) 0 0 repeat-x #fff;

color:#5E5E5E;

}

div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{

margin:0; padding:0;

}

ul{

margin:0;

padding:0;

list-style-type:none;

font-size:0;

line-height:0;

}

.spacer{

clear:both;

font-size:0;

line-height:0;

}

/*————————————————main——————–*/

#body{

width:918px;

margin:0 auto;

}

/*————————————————top——————-*/

#top{

width:903px;

height:23px;

background:url(images/top_nav_bg.gif) 0 0 repeat-x;

padding:8px 15px 0 0;

}

#top ul{

float:left;

width:815px;

}

#top ul li{

float:left;

font-size:0;

line-height:0;

}

#top ul li a{

display:block;

padding:0 14px;

font:bold 11px/23px Arial, Helvetica, sans-serif;

color:#6C6C6C;

background-color:inherit;

text-decoration:none;

}

#top ul li a:hover{

color:#fff;

background-color:#BD0000;

}

#top ul li a.hover{

display:block;

padding:0 14px;

font:bold 11px/23px Arial, Helvetica, sans-serif;

color:#fff;

background-color:#BD0000;

text-decoration:none;

cursor:text;

}

#top p{

float:right;

padding:2px 0 0 12px;

background:url(images/phone_icon.gif) 0 2px no-repeat;

font:bold 11px/16px Arial, Helvetica, sans-serif;

color:#C89601;

background-color:inherit;

}

/*————————————————top——————–*/

</style>

<body>

<ul>

<li><a href=”#”>About us</a></li>

<li><a href=”#”>Support</a></li>

<li><a href=”#”>Solutions </a></li>

<li><a href=”#”>Targets</a></li>

<li><a href=”#”>Signup</a></li>

<li><a href=”#”>Meetings</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

</body>

</html>

<!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>无标题文档</title><link href=”css.css” rel=”stylesheet” type=”text/css” media=”all” /></head><style type=”text/css”>@charset “utf-8″;/* CSS Document */body{ padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; background:url(images/main_bg.gif) 0 0 repeat-x #fff; color:#5E5E5E;}div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{ margin:0; padding:0;}ul{ margin:0; padding:0; list-style-type:none; font-size:0; line-height:0;}.spacer{ clear:both; font-size:0; line-height:0;}/*————————————————main——————–*/#body{ width:918px; margin:0 auto;}/*————————————————top——————-*/#top{ width:903px; height:23px; background:url(images/top_nav_bg.gif) 0 0 repeat-x; padding:8px 15px 0 0;}#top ul{ float:left; width:815px;}#top ul li{ float:left; font-size:0; line-height:0;}#top ul li a{ display:block; padding:0 14px; font:bold 11px/23px Arial, Helvetica, sans-serif; color:#6C6C6C; background-color:inherit; text-decoration:none;}#top ul li a:hover{ color:#fff; background-color:#BD0000;}#top ul li a.hover{ display:block; padding:0 14px; font:bold 11px/23px Arial, Helvetica, sans-serif; color:#fff; background-color:#BD0000; text-decoration:none; cursor:text;}#top p{ float:right; padding:2px 0 0 12px; background:url(images/phone_icon.gif) 0 2px no-repeat; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#C89601; background-color:inherit;}/*————————————————top——————–*/</style><body><div id=”top”> <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>About us</a></li> <li><a href=”#”>Support</a></li> <li><a href=”#”>Solutions </a></li> <li><a href=”#”>Targets</a></li> <li><a href=”#”>Signup</a></li> <li><a href=”#”>Meetings</a></li> <li><a href=”#”>News</a></li> <li><a href=”#”>Blog</a></li> <li><a href=”#”>Contact</a></li> </ul> <p>+01-4445-6678</p> </div></body></html>

</code>

No comments »

Posted in Div+CSS, Web

点击弹出层效果

March 9th, 2010

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>弹出层效果</title> <style type="text/css">  </style> <script language="javascript" type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; } </script> </head> <body> <div id="popDiv" class="mydiv" style="display:none;">弹出窗口 <a href="http://www.5jun.com">www.5jun.com</a> <a href="javascript:closeDiv()">关闭窗口</a></div> <div id="bg" class="bg" style="display:none;"></div> <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> </body> </html>

Tips:You can change the code before run.

No comments »

Posted in Div+CSS

Tags: 弹出层

支持各种浏览器的浮动固定层

March 2nd, 2010

直接上货

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>中国站长天空-网页特效-窗口特效-支持各种浏览器的固定悬浮层</title>

<!–把下面代码加到<head>与</head>之间–>

* {padding:0; margin:0;}

body {height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;}

html {height:100%; overflow:hidden;}

.fixed {position:absolute; top:10px; left:50%; width:100px; margin-left:-490px; height:350px; background:#fc0; border:1px solid #f60; text-align:center;}

.fixed2 {position:absolute; top:10px; left:50%; width:100px; margin-left:370px; height:350px; background:#fc0; border:1px solid #f60; text-align:center;}

.wrapper {height:100%; overflow:auto; overflow-y:scroll;}

.body {width:700px; margin:0 auto; background:#f2f2f2; padding:20px;}

</style> » Read more: 支持各种浏览器的浮动固定层

No comments »

Posted in Div+CSS

Tags: 固定层浮动层

跨浏览器的层固定定位

March 2nd, 2010

<!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>
<style>
*{margin:0}
body{
height:1000px;
width:1000px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
var a = document.getElementById(‘a’);
var d = document.getElementById(‘d’);
if(isie6){
a.style.position = ‘absolute’;

window.onscroll = function(){
d.innerHTML = ”;
}
}else{
a.style.position = ‘fixed’;
}
a.style.right = ’0′;
a.style.bottom = ’0′;
}
</script>
</head>
<body>
<div id =”d” style=”display:none;”></div>
<div id=’a'>test</div>
</body>
</html>

No comments »

Posted in Div+CSS

Tags: 固定层

固定层在页面的顶部,底部DIV

March 2nd, 2010

<html>

<head>

<title>无标题文档</title>

<!–

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

html,body{height:100%;width:100%;overflow:hidden;}

.xx {position:absolute;left:0px;top:0px;z-index:1;width:100%;background-color:#F3F6FB;border-bottom:1px solid #d0dbe7; margin-left:-18px; height:50px;}

.yy{ position:relative;width:100%;height:100%;overflow-x:auto;overflow-y:scroll; text-align:center}

–>

</style> » Read more: 固定层在页面的顶部,底部DIV

No comments »

Posted in Div+CSS

Tags: 固定层

如何input与文字对齐

January 22nd, 2010

在按钮的样式里面加入：vertical-align:middle;

2.INPUT和文字对齐

定义INPUT的样式，input {vertical-align:middle;}，这样文字就会和INPUT框对齐。

3.以此类推，SELETE框等都如此

可以在全局CSS中定义：input,select{vertical-align:middle;} 省的后面麻烦

No comments »

Posted in Div+CSS

Tags: css middle

如何让CSS控制文本显示省略号

November 12th, 2009

为了更符合实际，我用一个div装起要调试的内容,并为这个div定义一个宽度。
css代码：
div{width:200px;}
html代码：
<div>
<span>CSS Web Design</span>
</div> 

    在IE中实现是非常简单的，CSS 如下：
span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} 

    但在FF中用上面的样式是实现不了的,因为text-overflow: ellipsis;是IE中特有的(非CSS标准)。现在在FF下看到的仅仅只是把溢出的内容切除了，说到"溢出切除",这下说到点子上了，在FF中实现就要用到非常规的方法，一个标签作切除内容，再加一个标签作填补省略号用，并且加起来的长度就能超过容器的宽度，本例指的就是DIV的宽度200px，实现的想法就是这样。那么继续进一试验，关于切除内容，这个已经基本上解决了，那就来说补省略号，不用JS，用CSS实现的话就要用到伪对象after,伪对象不懂的就要先去温故或百度一下。先从HTML下手，为span标签外再加一层p标签（当然你也可以加其它标签的）
html代码：
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程</span><p>
</div>
    我们再为这个P标签加样式。
CSS：
p:after{
content:"...";
} 

    这样还不行，因为省略号是有宽度的，这样省略号就跳到一下行了，下面要做的就是让span 加省略号的宽度不大于容器宽度(准确的说是相等)，并且让省略号紧跟内容的内容，下就是解决上面这些问题的CSS样式：
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
} 

    这里还要补充的一点是关于p span 的宽度用了"max-width"这个属性，IE不能解释该属性，而FF可以,这样就避开了IE对SPAN宽度的重新应用。上面说得有乱，归纳如下：
html代码：
<div>
<p><span>CSS Web Design</span><p>
</div>

css代码：
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}
/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* FF 下的样式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}

楼兰故乡

Archive for the ‘Div+CSS’ category

如何横向排列DIV+CSS

点击弹出层效果

支持各种浏览器的浮动固定层

跨浏览器的层固定定位

固定层在页面的顶部,底部DIV

如何input与文字对齐

如何让CSS控制文本显示省略号

分享一个CSS站.

www.cssplay.co.uk