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

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

点击弹出层效果

March 9th, 2010

Tips:You can change the code before run.

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

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>
<title>中国站长天空-网页特效-窗口特效-支持各种浏览器的固定悬浮层</title>
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″>
<!–把下面代码加到<head>与</head>之间–>
<style type=”text/css”>
* {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;}

跨浏览器的层固定定位

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>

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

March 2nd, 2010
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
*{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}
–>

如何input与文字对齐

January 22nd, 2010

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

2.INPUT和文字对齐

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

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

可以在全局CSS中定义:input,select{vertical-align: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:"...";
}

分享一个CSS站.

October 1st, 2009

www.cssplay.co.uk