Skip to content

Instantly share code, notes, and snippets.

@tpeng

tpeng/dabblet.css

Created May 12, 2012 15:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tpeng/2667054 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tpeng/2667054 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
a { color: #00c; text-decoration: none; }
a:visited { color: #00c; }
a:hover { text-decoration: underline; }
.clear {clear:both;}
#content {
float: left;
width: 80%;
}
.hl {
font-family: Helvetica, Arial, sans-serif;
border: 1px solid #ddd;
/* border-bottom-width: 0; */
padding: 10px;
margin: 20px;
border-style: solid;
background-color: #f8f8f8;
}
.hl .avatar {
float: left;
padding-top: 3px;
}
.hl .name {
float: left;
/* width: 128px;*/
text-align: left;
margin: 10px;
font-weight: bold;
}
.hl .action {
float: left;
width: 64px;
margin: 10px;
}
.hl .content {
width: 600px;
margin-left: 74px;
text-align: left;
overflow: hidden;
word-wrap: break-word;
top: -30px;
position: relative;
}
.hl .source {
float: left;
width: 600px;
margin-left: 74px;
text-align: left;
}
#sidebar {
float: right;
width: 15%;
border: 1px solid #ddd;
margin: 20px;
}
#sidebar ul {
list-style: none;
padding-left: 10px;
}
#sidebar ul li {
padding: 2px;
}
body {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 100%;
margin: 0px auto 0px auto;
width: 60%;
background-color: #f4f4f4;
position: relative;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="content">
<div class="hl">
<div class="avatar">
<img height="64" width="64" src="http://api.freebase.com/api/trans/image_thumb/en/avatar_2009?maxwidth=32&maxheight=32&mode=fillcrop">
</div>
<div class="name">特瑞tpeng</div>
<div class="action">赞了</div>
<div class="clear"></div>
<div class="content"><a href="/api/article/getBody?url=http://www.36kr.com/p/106718.html">过了9月，MobileMe用户要么通过购买获得额外空间，要么使用苹果提供的5GB免费方案</a></div>
<div class="source">来自：亚马孙和巴诺</div>
<div class="clear"></div>
</div>
<div class="hl">
<div class="avatar">
<img height="64" width="64" src="http://api.freebase.com/api/trans/image_thumb/en/avatar_2009?maxwidth=32&maxheight=32&mode=fillcrop">
</div>
<div class="name">特瑞tpeng</div>
<div class="action">赞了</div>
<div class="clear"></div>
<div class="content"><a href="/api/article/getBody?url=http://www.36kr.com/p/106718.html">相对于用table的方法的好处是不用增加无语义标签，简化标签嵌套深度。这个思路是这样的，通过改变块级元素的display属性值为inline类型，然后设置text-align:center来实现居中。这种方法也有一定不妥之处就是把块级元素改为行内元素后，行内元素比块元素少了一些功能。比如说设定长宽值等，在项目运用中可能会有一些限制，大家可以自行选择</a></div>
<div class="source">来自：亚马孙和巴诺</div>
<div class="clear"></div>
</div>
<div id="load-more">load more</div>
</div>
<div id="sidebar">
<ul class="columnList">
<li>
<a target="_blank" href="/?column_id=4f9c0ef3a09464038569168f"></a>
<img title="新浪科技" src="http://tp1.sinaimg.cn/1642634100/50/5613120647/0">
<a target="_blank" href="/?column_id=4f9c0ef3a09464038569168f">新浪科技</a>
</li/>
<li>
<a target="_blank" href="/?column_id=4f9ebf9d003c640307c8e547"></a>
<img title="36氪" src="http://tp4.sinaimg.cn/1750070171/50/5627443866/1">
<a target="_blank" href="/?column_id=4f9ebf9d003c640307c8e547">36氪</a>
</li>
</ul>
</div>
<clear>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment