typecho主题双栏代码和css代码
以下是一个简单的typecho主题双栏示例代码:
HTML代码:
<div id="wrap">
<div id="main">
<?php while($this->next()): ?>
<div class="post">
<h2 class="title"><a href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h2>
<div class="entry"><?php $this->content('阅读更多...'); ?></div>
</div>
<?php endwhile; ?>
</div>
<div id="sidebar">
<ul>
<?php $this->widget('Widget_Metas_Category_List')->to($category); ?>
<?php while ($category->next()): ?>
<li><a href="<?php $category->permalink(); ?>"><?php $category->name(); ?></a></li>
<?php endwhile; ?>
</ul>
</div>
</div>
CSS代码:
/* 主体布局 */
#wrap {
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#main {
width: 70%;
margin: 0;
}
#sidebar {
width: 30%;
margin: 0;
}
/* 文章样式 */
.post {
margin-bottom: 30px;
}
.title {
margin-bottom: 10px;
}
.entry {
line-height: 1.5;
font-size: 16px;
}
/* 侧边栏样式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
color: #333;
}
原文地址: http://www.cveoy.top/t/topic/CE3 著作权归作者所有。请勿转载和采集!