普通公司网站代码片段合辑

<div class="g-bd1 f-cb">
<div class="g-sd1">
<!--左侧内容开始-->
　　　　 <!--左侧内容结束-->
</div>
<div class="g-mn1">
<div class="g-mn1c">
<!--左侧内容开始-->
　　　　 <!--左侧内容结束-->
　　　　 </div>
　　</div>
</div>

/* 两列右侧自适应布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}

<ul class="f-cb mn1c-list">
<li><a href="">关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示</a><span>2015-08-21</span></li>
<li><a href="">关于优化调整路公交线路的公示关于优化调整路公交线路的公示关于优化调整路公交线路的公示关于优化调整路公交线路的公示</a><span>2015-08-21</span></li>
</ul>

.mn1c-list{padding: 18px;}
.mn1c-list li{border-bottom: 1px dashed #d5d5d5;height: 36px;line-height: 36px;position: relative;padding-right: 80px;}
.mn1c-list a{float: left;width: 100%;width: 98%\9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn1c-list span{color: #afafaf;position: absolute;width: 80px;right: 0;height: 36px;line-height: 36px;}

<ul class="f-cb mn1c-list">
<li><a href="">关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示</a><span>2015-08-21</span></li>
　<li><a href="">关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示关于优化调整126路公交线路的公示</a><span>2015-08-21</span></li>
</ul>

.mn1c-list,.mn1c-con{padding:0 18px 18px;border: 1px solid #dadada;border-bottom:none;margin-top: 15px;}
.mn1c-list li{border-bottom: 1px dashed #d5d5d5;height: 36px;line-height: 36px;position: relative;padding-right: 80px;background: url(../images/dol2.gif) no-repeat 10px 16px; padding-left: 21px;}
.mn1c-list a{float: left;width: 100%;width: 98%\9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn1c-list li span{color: #afafaf;position: absolute;width: 80px;right: 0;height: 36px;line-height: 36px;}

<div class="m-page">
共 <span>100</span> 条   <a href="">首页</a> <a href="">上一页</a> <a href="">下一页</a> <a href="">尾页</a>   每页 10 条   当前第 1 页   共 10 页
</div>

.m-page{height: 38px;line-height: 38px;text-align: center;color: #989898;padding-bottom:15px;}
.m-page span,.m-page a{color:#016bb7}

<div class="m-page f-cb">
<div class="m-prev f-fl"><a href="" ><span>上一篇：</span>上一篇上一篇上一篇上一篇上一篇</a></div>
<div class="m-next f-fr"><a href="" ><span>下一篇：</span>下一篇下一篇下一篇下一篇下一篇</a></div>
</div>

.m-page{height: 38px;line-height: 38px;text-align: center;color: #989898;padding-bottom:15px;}
.m-prev{width: 47%;text-align: left;padding-left:3%;}
.m-next{width: 47%;text-align: right;padding-right: 3%;}
.m-prev a,.m-next a{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.m-prev span,.m-next span{color:#464646}

<div class="news-page">
<div>上一页：<a href="">已经是第一篇了</a></div>
<div>下一页：<a href="">汽车保养O2O的划时代意义</a></div>
</div>

.news-page{padding: 30px 0 15px 15px;border-top: 1px solid #ececec;line-height: 36px;color: #636363}