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

    布局     

两列右侧自适应布局

html

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

css

/* 两列右侧自适应布局 */
.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;}

    模块     

文章列表：

1、不带点：

html

<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>

css

.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;}

2、带点：

html

<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>

css

.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;}

分页：

html

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

css

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

上一页下一页：同行

html

<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>

css

.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}

上一页下一页：不同行

html

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

css

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