提取Google Project边栏的风格
效果可以看http://code.google.com/p/google-code-prettify/
原理是 利用3层的box边框大小
- 行内容一
- 行内容二
- 行内容三
示例代码：
<div style="background: #e5ecf9; margin-bottom: 0.6em;">
<div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="margin: 0; padding: 0 13px 0 13px;">
<ul>
<li>行内容一</li>
<li>行内容二</li>
<li>行内容三</li>
</ul>
</div>
<div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
</div>
<div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="margin: 0; padding: 0 13px 0 13px;">
<ul>
<li>行内容一</li>
<li>行内容二</li>
<li>行内容三</li>
</ul>
</div>
<div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
<div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
</div>
分离CSS和HTML
CSS代码--
.pmeta_bubble_bg {
background: #e5ecf9;
margin-bottom: 0.6em;
width: 300px;
}
.box-inner {
margin: 0;
padding: 0 13px 0 13px;
}
.round1 {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.round2 {
border-left: 2px solid #fff;
border-right: 2px solid #fff;
}
.round4 {
border-left: 4px solid #fff;
border-right: 4px solid #fff;
}
.round1,
.round2,
.round4 {
font-size: 0;
margin: 0;
padding: 0;
height: 1px;
}
background: #e5ecf9;
margin-bottom: 0.6em;
width: 300px;
}
.box-inner {
margin: 0;
padding: 0 13px 0 13px;
}
.round1 {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.round2 {
border-left: 2px solid #fff;
border-right: 2px solid #fff;
}
.round4 {
border-left: 4px solid #fff;
border-right: 4px solid #fff;
}
.round1,
.round2,
.round4 {
font-size: 0;
margin: 0;
padding: 0;
height: 1px;
}
HTML代码--
<div class="pmeta_bubble_bg">
<div class="round4"></div>
<div class="round2"></div>
<div class="round1"></div>
<div class="box-inner">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="round1"></div>
<div class="round2"></div>
<div class="round4"></div>
</div>
<div class="round4"></div>
<div class="round2"></div>
<div class="round1"></div>
<div class="box-inner">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="round1"></div>
<div class="round2"></div>
<div class="round4"></div>
</div>
由于blogger被无期限“和谐”，故将此文转了过来。
原文：http://playts.blogspot.com/2009/02/google-project.html
Tag:
评论
发表新评论