IT博客-skl-随笔分类-Div+CSShttp://www.cnitblog.com/skl/category/7906.htmlzh-cnTue, 27 Sep 2011 23:12:25 GMTTue, 27 Sep 2011 23:12:25 GMT60如何让select的样式也漂亮起来http://www.cnitblog.com/skl/archive/2008/12/29/53188.html单单Mon, 29 Dec 2008 04:03:00 GMThttp://www.cnitblog.com/skl/archive/2008/12/29/53188.htmlhttp://www.cnitblog.com/skl/comments/53188.htmlhttp://www.cnitblog.com/skl/archive/2008/12/29/53188.html#Feedback0http://www.cnitblog.com/skl/comments/commentRss/53188.htmlhttp://www.cnitblog.com/skl/services/trackbacks/53188.htmlhttp://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>如何让select的样式也漂亮起来</title>
<style type="text/css">
<!--
.select * {
  margin: 0;
  padding: 0;
}
.select {
  border:1px solid #cccccc;
  float: left;
  display: inline;
  }
.select div {
  border:1px solid #f9f9f9;
  float: left;
}
/* 子选择器，在FF等非IE浏览器中识别 */
.select>div {
  width:120px;
  height: 17px;
  overflow:hidden;
  }
 
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
  display:block;
  float: left;
  margin: -2px;
}
.select div>select {
  display:block;
  width:124px;
  float:none;
  margin: -2px;
  padding: 0px;
}
.select:hover {
  border:1px solid #666666; //鼠标移上的效果
}
.select select>option {
  text-indent: 2px; //option在FF等非IE浏览器缩进2px
}
-->
</style>
</head>
<body><div class="select">
 <div>
 <select>
  <option>看见效果了吧</option>
  <option>看见效果了吧</option>
  <option>看见效果了吧</option>
 </select>
 </div>
</div>
</body>
</html>

单 2008-12-29 12:03 发表评论
]]>SELECT样式控制http://www.cnitblog.com/skl/archive/2008/12/29/53189.html单单Mon, 29 Dec 2008 04:03:00 GMThttp://www.cnitblog.com/skl/archive/2008/12/29/53189.htmlhttp://www.cnitblog.com/skl/comments/53189.htmlhttp://www.cnitblog.com/skl/archive/2008/12/29/53189.html#Feedback0http://www.cnitblog.com/skl/comments/commentRss/53189.htmlhttp://www.cnitblog.com/skl/services/trackbacks/53189.html<style>
select{
width:120;
margin:-2px;
}
.myselect{
width:118;
border:1px solid #000099;
overflow:hidden
}
</style>


<span class=myselect>
<select>
    <option>1</option>
    <option>2</option>
</select>
</span>



单 2008-12-29 12:03 发表评论
]]>默认图片是灰色鼠标放上去变彩色css效果代码 http://www.cnitblog.com/skl/archive/2008/12/26/53075.html单单Fri, 26 Dec 2008 08:02:00 GMThttp://www.cnitblog.com/skl/archive/2008/12/26/53075.htmlhttp://www.cnitblog.com/skl/comments/53075.htmlhttp://www.cnitblog.com/skl/archive/2008/12/26/53075.html#Feedback0http://www.cnitblog.com/skl/comments/commentRss/53075.htmlhttp://www.cnitblog.com/skl/services/trackbacks/53075.html<style type="text/css">

A IMG {
              FILTER: gray
            }
A:hover IMG {FILTER:
}</style><a href="http://www.sincol.com">
<img border="0" alt="" src="http://www.sincol.net/uploads/img/lanrentuku_colorpic.jpg" /> </a>



单 2008-12-26 16:02 发表评论
]]>div滑动变背景http://www.cnitblog.com/skl/archive/2008/12/26/53074.html单单Fri, 26 Dec 2008 07:55:00 GMThttp://www.cnitblog.com/skl/archive/2008/12/26/53074.htmlhttp://www.cnitblog.com/skl/comments/53074.htmlhttp://www.cnitblog.com/skl/archive/2008/12/26/53074.html#Feedback0http://www.cnitblog.com/skl/comments/commentRss/53074.htmlhttp://www.cnitblog.com/skl/services/trackbacks/53074.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=gb2312" />
<title>火红五月天</title>
<style type="text/css">
#menu ul li{
float:left;
list-style:none;
margin:1px;
}
a{
background:url(http://www.anace.cn/images/zdbs.gif) no-repeat 0px 5px;  /* 这里是背景的关键部分 */
text-decoration:none;
color:#CCCCCC;
font-size:100%;
background-color:#235F9A;
padding:2px 4px;
border-top:2px solid #666;
border-left:2px solid #666;
border-bottom:1px solid #999;
border-right:1px solid #999;}
a:hover{
background-color:#3276A9;
background:url(http://www.anace.cn/images/rss_article.gif) no-repeat 0px 5px;  /* 这里是背景的关键部分 */
border-bottom:2px solid #666;
border-right:2px solid #666;
border-top:1px solid #999;
border-left:1px solid #999;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="＃">首页</a></li><li><a href="＃">音乐</a></li><li><a href="＃">分享</a></li><li><a href="＃">有趣</a></li><li><a href="＃">对联</a></li>
</ul>
</div>
</body>
</html>

单 2008-12-26 15:55 发表评论
]]>Div和Span区别http://www.cnitblog.com/skl/archive/2008/12/16/52685.html单单Tue, 16 Dec 2008 07:43:00 GMThttp://www.cnitblog.com/skl/archive/2008/12/16/52685.htmlhttp://www.cnitblog.com/skl/comments/52685.htmlhttp://www.cnitblog.com/skl/archive/2008/12/16/52685.html#Feedback0http://www.cnitblog.com/skl/comments/commentRss/52685.htmlhttp://www.cnitblog.com/skl/services/trackbacks/52685.html         SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

　　下面以一个实例来说明这两个属性的区别。

　　代码:

　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，

DIV也被用来在HTML文件中建立逻辑部分。但与

SPAN不同，

工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

　　效果:

　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。

　　还有一个标识符具有类似的功能，

　　DIV也被用来在HTML文件中建立逻辑部分。但与

　　SPAN不同，

　　工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。



单 2008-12-16 15:43 发表评论
]]>