深山老林

日志内容

2007-01-16[原]CSS制作的图片浏览效果－－ImgView

TAG：CSS 原创

昨晚心血来潮做了个CSS的图片浏览效果，貌似很常见……

还是看看 DEMO 吧。

风的影子 @ 09:23 | 看个仔细 | 有话要说 1 | 引用 0 | 编辑

2007-01-03[原]横排列表(li)的左右对齐

TAG：CSS 原创

之前解决的一个小问题，让横排的列表可以左右对齐。相关代码如下：

==================HTML==========================
<div class="overdiv">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</div>
=================================================

==================CSS==========================
.overdiv{
width:290px;
height:300px;
overflow:hidden;
background-color:#436973;
}
.overdiv ul{
list-style:none;
width:320px;
height:auto;
}
.overdiv li{
float:left;
width:80px;
height:80px;
margin-right:25px;
margin-bottom:5px;
background-color:#83B1DF;
text-align:center;
line-height:80px;
}
=================================================

Demo

风的影子 @ 20:51 | 看个仔细 | 有话要说 2 | 引用 0 | 编辑

2006-11-15[原]边框样式的写法总结

TAG：原创 CSS 经验之谈

今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：

border : border-width || border-style || border-color

border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用，如：

=================CSS=================
border:1px solid #FF00FF。
=====================================

这是最简单的应用，如果四个边的样式不是相同的怎办？一般会有下面几种情况，写法差不多：

===============CSS===================
/*边框样式、宽度、颜色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}

/*边框样式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}

/*边框宽度不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border-width:1px 2px 1px 1px;
border:solid #FF00FF;
}

/*边框颜色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
=====================================

还有就是有些边框是没有的，比如只有底边：

================CSS==================
.div1{
/*错误的*/
border:none;
border-bottom:1px solids #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:none none solid;
}
=====================================

注意：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

风的影子 @ 13:30 | 看个仔细 | 有话要说 1 | 引用 0 | 编辑

2006-10-19[原]用CSS画简单的圆角

TAG：原创 CSS

近来总看到圆角：有用图做的、用JS打出来的。不太愿意用，不过有时也是真的没办法，这里介绍一种用CSS画的简单的圆角，只用于抛砖引玉，大家可以再发挥。

----------------------------------------------HTML---------------------------------------------------------
<div class="bim212">

<div class="bim-t">
  <div class="bim-tt"></div>
  <div class="bim-tm"></div>
  <div class="bim-tb"></div>
</div>


<div class="bim-m">
  测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>


<div class="bim-b">
  <div class="bim-bt"></div>
  <div class="bim-bm"></div>
  <div class="bim-bb"></div>
</div>

</div>
----------------------------------------------------------------------------------------------------------------

----------------------------------------------CSS---------------------------------------------------------
.bim212{
/*定义框大小*/
  width:auto;
  height:auto;
}
  .bim-tt,.bim-bb,.bim-tm,.bim-bm,.bim-tb,.bim-bt,.bim-m{
  /*定义框颜色*/
   border-color:#FF6347;
  }
  .bim-t,.bim-b{
  /*上部和下部*/
   width:auto;
   height:4px;
   font-size:0;
   line-height:0;
  }
   .bim-tt,.bim-bb{
    width:auto;
    height:0;
    margin:0 4px;
    border-top-width:1px;
    border-top-style:solid;
   }
   .bim-tm,.bim-bm{
    width:auto;
    height:1px;
    margin:0 2px;
    border-left-width:2px;
    border-right-width:2px;
    border-left-style:solid;
    border-right-style:solid;
   }
   .bim-tb,.bim-bt{
    width:auto;
    height:2px;
    margin:0 1px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
   }
  .bim-m{
   width:auto;
   height:auto;
   padding:3px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
  }
----------------------------------------------------------------------------------------------------------------

其实跟九宫格差不多，只是把上面两部分换成了圆角，不过想画不同的圆角，所用到的样式是不相同的，所以这个方法的灵活性不好，唯一的优点也许就是没用到图片跟脚本吧。:P

风的影子 @ 13:15 | 看个仔细 | 有话要说 0 | 引用 0 | 编辑

2006-08-16[原]用DIV做九宫格

TAG：CSS 原创布局

表格的九宫格实在是很经典，可惜是属于表格布局，在用CSS布局的页面中实在不想使用，于是就做了一个DIV的九宫格。(*~v~*)代码如下：

--------------------------HTML----------------------------------
<div id="ot_right">
  <div class="right-tr"><div class="right-tl"><div class="right-tm"></div></div></div>
  <div class="right-mr"><div class="right-ml">内容</div></div>
  <div class="right-br"><div class="right-bl"><div class="right-bm"></div></div></div>
</div>
----------------------------------------------------------------

--------------------------CSS----------------------------------
/*====公用====*/
*{
/* 通用消除边距偏差 */
margin:0;
padding:0;
}
body{
/* 页面主体模块 */
font-size:75%;
line-height:1.5em;
font-family:tahoma, MingLiu, Verdana, Helvetica;
color:#333333;
}

/*==S==框====*/
#ot_right{
width:470px;
height:300px;
}
.right-tl{
/*左上框*/
width:auto;
height:16px;
padding-left:16px;
background:transparent url(bg_tl.gif) no-repeat left top;
}
.right-tm{
/*上框*/
width:auto;
height:16px;
background:transparent url(bg_tm.gif) repeat-x left top;
}
.right-tr{
/*右上框*/
width:auto;
height:16px;
padding-right:16px;
background:transparent url(bg_tr.gif) no-repeat right top;
}
.right-bl{
/*左下框*/
width:auto;
height:16px;
padding-left:16px;
background:transparent url(bg_bl.gif) no-repeat left bottom;
}
.right-bm{
/*下框*/
width:auto;
height:16px;
background:transparent url(bg_bm.gif) repeat-x left bottom;
}
.right-br{
/*右下框*/
width:auto;
height:16px;
padding-right:16px;
background:transparent url(bg_br.gif) no-repeat right bottom;
}
.right-ml{
/*左框*/
width:auto;
height:100%;
padding-left:16px;
background:transparent url(bg_ml.gif) repeat-y left top;
}
.right-mr{
/*右框内容*/
width:auto;
height:100%;
padding-right:16px;
background:transparent url(bg_mr.gif) repeat-y right top;
}
/*==E==框====*/
----------------------------------------------------------------