内容结构


class="list-content"
该属性修饰的div表示一块内容区域,该属性的div会产生上、右、左20px的外边距
class="block"
该属性修饰的div表示一块内容区域,写在class="list-content"内
class="banner"
该属性修饰的div表示块元素的名称,是专门用来修饰class="block"的,写在class="block"内。可以缺省
class="main"
该属性修饰的div表示填写正文内容,写在class="block"内,与class="banner"同级
该属性的div会产生10px的内边距
完整结构代码
<!--内容区域-->
<div class="list-content">
	<!--块元素-->
	<div class="block">
		<!--用来修饰块元素的-->
		<div class="banner">
			<!--左侧标题-->
			<span>我是标题</span>
			<!--右侧链接-->
			<span class="subtitle">
				<a href="#">
					<!--请注意图片的路径-->
					<img src="../javaex/m/images/more.png" />
				</a>
			</span>
		</div>
		<!--正文内容-->
		<div class="main">
			这里可以填写正文内容
		</div>
	</div>
</div>
演示代码
<!--顶部-->
<!--如果你想让顶部元素固定,就为该元素添加 id="javaex-header"-->
<div id="javaex-header" class="header">
	<a class="left" href="#"><span class="icon-storage"></span></a>
	<span>Javaex</span>
	<a href="#" class="right"><span class="icon-search"></span></a>
</div>

<!--中间内容区域-->
<div class="list-content" style="margin-top:1.2rem;margin-bottom:1.25rem;">
	<!--块元素-->
	<div class="block">
		<!--用来修饰块元素的-->
		<div class="banner">
			<!--左侧标题-->
			<span>我是标题</span>
			<!--右侧链接-->
			<span class="subtitle">
				<a href="#">
					<!--请注意图片的路径-->
					<img src="../javaex/m/images/more.png" />
				</a>
			</span>
		</div>
		<!--正文内容-->
		<div class="main">
			这里可以填写正文内容
			<!--分割线-->
			<p class="divider"></p>
			<!--左右结构-->
			<div class="left-right">
				<span>左侧内容</span>
				<span>右侧内容</span>
			</div>
		</div>
	</div>
</div>

<!--底部固定-->
<!--
	如果你想让底部元素固定,就为该元素添加 id="javaex-footer"
-->
<div id="javaex-footer" class="footer-ul">
	<ul class="equal-5">
		<!--为li添加active属性,可以高亮-->
		<li class="active"><span class="icon-home"></span><br>首页</li>
		<li><span class="icon-cast"></span><br>板块</li>
		<li><span class="icon-edit-2"></span><br>发帖</li>
		<li><span class="icon-compass"></span><br>发现</li>
		<li><span class="icon-user-o"></span><br>我的</li>
		<span class="clearfix"></span>
	</ul>
</div>
内容结构演示