leoyi520

学会独处

学会独处才能长大。改变自己,适应这个社会才能改变我要改变的。

迷糊

刚才睡午觉时,一直迷迷糊糊的,剧情一遍一遍的重复重复。

蔡元培:决定孩子一生的不是成绩而是健全的人格

说得很对

idealscometrue:

天天美好:



蒲公英:



曲院風荷:

  



   


东方人a:

   

   

   



    

    

    


孩子从小的教育影响着以后的发展道路,而孩子的教育又要身系父母,那么正确的家庭教育应该是什么样的呢?一起看看蔡元培给父母的8个关键教育指导吧。

    

    

    

    

    

    

    

    

     

     

     

     

     

     

     


蔡元培:决定孩子一生的

     

     

     

     

     

     

     


不是成绩而是健全的人格

     

     

     

     

     

     

     


     

     

     

     

     

     

     


     

     

     

     

     

     

     


     

     

     

     

     

     

     


     

     

     

     

     

     

     


     

     

     

     

     

     

     


     

     

     

     

     

     

     


     

     

     

     

     

     

     



     

     

     

     

     

     

     

    
    

    

    

    

    

    

    


来源:捕鱼者

    

    

    


   




移动端的普通列表样式

普通的列表样式

移动端的普通列表样式 - qq330168885 - 琉忆光年的博客


CSS

/*地产案例*/
.news-list{
margin-bottom: 20px;
}
.news-list li{
width: 100%;
padding:10px 0;
border-bottom: 1px solid #ccc;
overflow: hidden;
*zoom:1;
z-index: 100;
}
.news-list li .leftBox{
width: 73%;
margin-right: 5px;
}
.news-list li .leftBox h4{
font-size: 13px;
font-weight: bold;
text-overflow: ellipsis;
white-space:nowrap;
overflow: hidden;
margin:10px 0;
}
.news-list li .leftBox a{
color:#555;
}
.news-list li .leftBox p{
font-size: 13px;
color:#999;
}
.news-list li .rightBox{
width: 25%;
}


 HTML

<ul class="news-list clear">
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_09.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_12.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_15.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_18.jpg" class="img-responsive">
</div>
</li>
<li>
<div class="leftBox fl">
<h4><a href="#">广州海珠琶洲XXXXX实业投资有限公司</a></h4>
<p>2017-04-20</p>
</div>
<div class="rightBox fr">
<img src="images/l_09.jpg" class="img-responsive">
</div>
</li>
</ul>


两种列表样式-经常用到

这两种列表样式经常要写到

两种列表样式-经常用到 - qq330168885 - 琉忆光年的博客

 

CSS


.titleBox{
height: 30px;
line-height: 30px;
color:#DB3657;
border-bottom: 1px solid #ccc;
}
.titleBox h4{
color:#DB3657;
float: left;
margin-left: 15px;
padding:4px 2px;
border-bottom: 2px solid #DB3657;
}

.detail-hot-list{
margin-top: 10px;
}
.detail-hot-list li{
float: left;
width:48%;
margin-bottom: 10px;
}
.detail-hot-list li:nth-child(odd){
margin-right: 10px;
}
.detail-hot-list li p{
overflow: hidden;
*zoom:1;
z-index: 1000;
margin-bottom: 0;
font-size: 14px;
}
.detail-hot-list li h4{
padding:5px;
font-size: 14px;
}

/*第二个的*/

/*下面是新闻*/
.newsBox .circle{
display: inline-block;
margin-right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #999;
}
.newsBox{
margin-bottom: 60px;
}
.newsBox ul{
margin: 10px 0;
}
.newsBox ul li{
margin:5px 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.newsBox ul li a{
color:#666;
}

.ico-more{
display: inline-block;
color:#fff;
height:17px;
width: 12px;
margin-right: 15px;
margin-top: 3px;
float:right;
background: url("../images/x_04.jpg")no-repeat;
}


html

<div class="row">
<!-- 案例展示 -->
<div class="titleBox clear">
<h4>案例展示</h4>
<a href="#" class="ico-more"></a>
</div>
<div class="col-xs-12">
<ul class="detail-hot-list clear">
<li><a href="#">
<img src="images/s_35.jpg" class="img-responsive">
<p>
<h4>珠江新城楼盘</h4>
</p>
</a></li>
<li><a href="#">
<img src="images/s_37.jpg" class="img-responsive">
<p>
<h4>广州白云楼盘</h4>
</p>
</a></li>
</ul>
</div>
</div>
<div class="row">
<!-- 新闻动态 -->
<div class="titleBox clear">
<h4>新闻动态</h4>
<a href="#" class="ico-more"></a>
</div>
<div class="col-xs-12">
<div class="newsBox clear white">
<ul>
<li><span class="circle"></span><a href="liebiao.html">2016城市卖地收入排行榜,多城土地收入创纪录.</a></li>
<li><span class="circle"></span><a href="liebiao.html">2016城市卖地收入排行榜,多城土地收入创纪录。 </a></li>
<li><span class="circle"></span><a href="liebiao.html">2016城市卖地收入排行榜,多城土地收入创纪录。 </a></li>
</ul>
</div>
</div>
</div>


移动端个人中心样式

这是一个移动端的个人中心的样式:

移动端个人中心样式 - qq330168885 - 琉忆光年的博客


CSS

/*个人中心*/
.topIntroBox{
background: url("../images/p_01.jpg")no-repeat top center;
}
.topIntroBox .aboutMe{
width: 50px;
height: 60px;
margin: 0 auto;
}
.topIntroBox .aboutMe .aboutImg{
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 65px;
background: url("../images/me.png")no-repeat top center;
}
.topIntroBox .aboutMe h3{
font-size: 14px;
text-align: center;
color:#fff;
}
.personBorder{
border-bottom: 2px solid #ccc;
padding-bottom: 4px;
margin-bottom: 10px;
}
.personBorder h3{
font-weight: 500;
margin-top: 10px;
font-size: 18px;
}
.personList h4 {
padding:5px 0;
margin-left: 8px;
}
.personList h4 a{
color:#888586;
}
.personList div{
height: 30px;
line-height: 30px;
margin-bottom: 5px;
}
.rightAll{
color:#777;
font-size: 15px;
}
.icon{
display: inline-block;
width: 20px;
height: 20px;
margin-top: 5px;
}
.icon-1{
background: url("../images/p_04.jpg")no-repeat center;
}
.icon-2{
background: url("../images/p_07.jpg")no-repeat center;
}
.icon-3{
background: url("../images/p_10.jpg")no-repeat center;
}
.icon-4{
background: url("../images/p_13.jpg")no-repeat center;
}
.ico-index{
display: inline-block;
width: 40px;
height: 40px;
margin-left: 10px;
margin-top: 5px;
}
.ico-index-1{
background: url("../images/p_17.jpg")no-repeat center;
}
.ico-index-2{
background: url("../images/p_19.jpg")no-repeat center;
}
.ico-index-3{
background: url("../images/p_21.jpg")no-repeat center;
}

/*兼容iphone5*/
@media screen and (max-width: 320px){
.topListBox{
top:15px;
left: 33%;
}
.topIntroBox{
height: 180px;
}
.personBottom{
padding-bottom: 150px;
}
.personBottom h4{
font-size: 15px;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px){
.topListBox{
top:40px;
left: 38%;
}
.topIntroBox{
height: 200px;
}
.personBottom h4{
font-size: 16px;
}
}


 HTML:

<div class="container" id="returnTop">
<!-- 头部 -->
<div class="row">
<div class="topIntroBox clear">
<a href="javascript:window.history.back(-1);" class="setBox" ></a>
<div class="aboutMe">
<div class="aboutImg"></div>
<h3>凉人</h3>
</div>
</div>
</div>
<!-- 个人中心头部 -->
<div class="row">
<div class="col-xs-12">
<!-- 成长值 -->
<div class="row">
<div class="col-xs-4 padding10 borderRight">
</div>
</div>
<!-- 列表 -->
<div class="row personList">
<div class="left10 personBorder">
<h3>我的收藏</h3>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-1 fl"></span>
<h4 class="fl"><a href="#">商品收藏</a></h4>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-2 fl"></span>
<h4 class="fl"><a href="#">商家收藏</a></h4>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-3 fl"></span>
<h4 class="fl"><a href="#">圈子收藏</a></h4>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-4 fl"></span>
<h4 class="fl"><a href="#">资讯收藏</a></h4>
<span class="fr rightAll">></span>
</div>

</div>

</div>
</div>
<!-- 列表 -->
<div class="row personList personBottom">
<div class="left10 personBorder">
<h3>我的店铺</h3>
</div>
<ul class="nav-list-box clear">
<li><a href="detail.html">
<span class="ico-index ico-index-1"></span>
<h4>我的商铺</h4>
</a></li>
<li><a href="#">
<span class="ico-index ico-index-2"></span>
<h4>发布产品</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-3"></span>
<h4>后台登录</h4>
</a></li>
</ul>
</div>

</div><!-- container结束 -->


移动端简单的列表页

这是一个简单的移动端的列表页效果

移动端简单的列表页 - qq330168885 - 琉忆光年的博客

CSS

.clear{

*zoom:1;

z-index:100;

}

.conBox .intro_box{
width: 150px;
height: 30px;
padding:5px;
text-align: center;
background: #ED4D4D;
color: #fff;
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
}
.conBox ul{
margin-bottom: 10px;
}
.conBox ul li{
width: 48%;
float: left;
}
.conBox ul li:nth-child(1){
margin-right: 10px;
}

HTML

<div class="conBox clear">
<!-- 一个框开始 -->
<div class="intro_box">
小区服务
</div>
<ul class="clear">
<li><a href="#"><img src="images/l_05.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="images/l_07.jpg" class="img-responsive"></a></li>
</ul>
<!-- 一个框结束 -->
<div class="intro_box">
公寓服务
</div>
<ul class="clear">
<li><a href="#"><img src="images/l_11.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="images/l_13.jpg" class="img-responsive"></a></li>
</ul>
<div class="intro_box">
维修服务
</div>
<ul class="clear">
<li><a href="#"><img src="images/l_16.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="images/l_17.jpg" class="img-responsive"></a></li>
</ul>
</div>

移动端导航样式列表

移动端的导航样式列表,很实用。

移动端导航样式列表 - qq330168885 - 琉忆光年的博客

 

CSS

.bg-white{
background: #fff;
}
.border{
border:1px solid #ccc;
}
.bg-gray{
background: #666666;
}
.bg_eee{
background: #F0F0F0;
}

.nav-list-box{
margin:10px 0;
}
.nav-list-box li{
float: left;
width: 32%;
text-align: center;
margin-bottom: 5px;
background: #fff;
padding:10px;
}
.nav-list-box li:nth-child(1){
margin-right: 5px;
}
.nav-list-box li:nth-child(2){
margin-right: 5px;
}
.nav-list-box li:nth-child(4){
margin-right: 5px;
}
.nav-list-box li:nth-child(5){
margin-right: 5px;
}
.nav-list-box li a{
color:#333;
display: inline-block;
width: 100%;
height: 100%;
font-weight: bold;
font-size: 14px;
}
.nav-list-box li h4{
font-size: 14px;
}
.ico-index{
display: inline-block;
width: 40px;
height: 40px;
}
.ico-index-1{
background: url("../images/i_05.jpg")no-repeat right;
}
.ico-index-2{
background: url("../images/i_07.jpg")no-repeat center;
}
.ico-index-3{
background: url("../images/i_14.jpg")no-repeat center;
}
.ico-index-4{
background: url("../images/i_15.jpg")no-repeat center;
}
.ico-index-5{
background: url("../images/i_16.jpg")no-repeat center;
}

HTML

<div class="row">

<div class="col-xs-12 bg_eee">
<ul class="nav-list-box clear ">
<li><a href="index.html">
<span class="ico-index ico-index-1"></span>
<h4>我们是谁</h4>
</a></li>
<li><a href="liebiao.html">
<span class="ico-index ico-index-2"></span>
<h4>公益项目</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-3"></span>
<h4>资讯中心</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-4"></span>
<h4>爱的影像</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-5"></span>
<h4>我们的捐款</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-5"></span>
<h4>我要参与</h4>
</a></li>
</ul>

</div>

</div>


列表样式2

这个是用bootstrap一起搭建使用的移动端列表。比较常用的布局!其实都是千变万化不离其中的。

列表样式2 - qq330168885 - 琉忆光年的博客

 

CSS

.clear{

z-index:100;

*zoom:1;

overflow:hidden;

}

/*公益项目列表css*/
.searchBox{
width: 220px;
margin:5px;
float: left;
height: 30px;
line-height: 30px;
background: rgba(200,200,200,0.8);
margin-left: 50px;
border-radius: 5px;
}
.searchBox .searchIco{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
margin-left: 3px;
background: url("../images/l_03.png")no-repeat;
}
.searchBox input{
height: 25px;
line-height: 25px;
font-weight: bold;
color:#000;
outline: none;
border:none;
float: left;
width: 165px;
margin-top: 3px;
background: none;
margin-left: 5px;
}
.searchPhone{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
background: url("../images/l_05.png")no-repeat;
margin-left: 3px;
}
.shaixuan{
font-size: 16px;
font-weight: bold;
margin:10px;
}
.shaixuan:hover{
color:#fff;
text-decoration: none;
}
.choiceFood{
width: 100%;
background: rgba(100,100,100,0.8);
}
.choiceFood li {
width:25%;
float: left;
padding-left: 15px;
line-height: 35px;
border-right: 1px solid #fff;
}
.choiceFood li:nth-child(4){
border-right: none;
}
.choiceFood li a{
color:#fff;
font-weight: bold;
font-size: 14px;
}
.ico-nav-d{
background: url("../images/w_18.jpg")no-repeat;
}
.divBox{
width: 100%;
}
.divBox li{
background: #fff;
*zoom:1;
z-index: 100;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.divBox .rightIntro h4{
font-weight: bold;
font-size: 15px;
}
.divBox .rightIntro p{
padding: 0;
font-size: 12px;
margin:7px 0;
}
.divBox .rightIntro p span{
margin-left: -5px;
}
.divBox .rightIntro p a{
text-align: center;
padding: 3px;
padding:3px 5px;
}
.divBox .rightIntro .leftBar{
color: #ccc;
}
.divBox .rightIntro .rightPrice{
color:#FF4806;
}
.divBox .rightIntro .rightTime{
color:#F871A6;
}
.delDingdan{
border-radius: 4px;
background: #999999;
color:#fff;
font-size: 12px;
padding:3px;
}
.grayColor{
color:#888;
font-size: 11px;
}
.introColor{
color:#333;
font-size: 11px;
}
.priceColor{
color:#CC3333;
font-weight: bold;
padding-left: 4px;
}
.expre{
width: 100%;
height: 5px;
background: #ccc;
margin:5px 0;
}
.expre .exLong{
width:20%;
height: 5px;
background: #E7322F;
}
/*兼容iphone5*/
@media screen and (max-width: 320px){
.divBox .leftdiv{
width: 40%;
}
.divBox .rightIntro{
width: 57%;
}
.orderList li{
float: left;
width: 33.33%;
background: #7A3635;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.topChoice{
margin-left: 96px;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px) and (max-width: 400px){
.divBox .leftdiv{
width: 35%;
}
.divBox .rightIntro{
width: 62%;
}
.orderList li{
float: left;
width: 33.33%;
background: #7A3635;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.topChoice{
margin-left: 120px;
}
}

HTML

<div class="container" id="returnTop">
<!-- 头部 -->
<div class="row">
<div class="topBox clear">
<a href="javascript:window.history.back(-1);" class="ico-return"></a>
<h4 class="text-center white" style="line-height: 40px;">公益项目</h4>
<a href="javascript:void(0);" id="showNav" is='0' class="setBox"></a>
</div>
</div>

<!-- 公益项目列表 -->
<div class="row">
<div class="divBox clear">
<ul>
<!-- 一个列表 -->
<li>
<a href="detail.html">
<div class="col-xs-12">
<div class="leftdiv fl">
<img src="images/x_03.jpg" class="img-responsive">
</div>
<div class="rightIntro clear fr">
<h4 class="clear"><span class="fl">春蕾计划一对一</span> <a href="#" class="delDingdan" style="float: right;">进行中</a></h4>
<!-- 经验条 -->
<div class="expre">
<div class="exLong">
</div>
</div>
<p class="grayColor"><span class="priceColor">已有88人捐助</span> 还差9875632元</p>
<p class="introColor">
春蕾计划一对一在全国1700家门店开通了电子捐款箱,携手爱心网友体验支付新公益……
</p>
</div>
</div>
</a>
</li>
<!-- 一个结束 -->
<li>
<a href="detail.html">
<div class="col-xs-12">
<div class="leftdiv fl">
<img src="images/x_03.jpg" class="img-responsive">
</div>
<div class="rightIntro clear fr">
<h4 class="clear"><span class="fl">春蕾计划一对一</span> <a href="#" class="delDingdan" style="float: right;">进行中</a></h4>
<!-- 经验条 -->
<div class="expre">
<div class="exLong">
</div>
</div>
<p class="grayColor"><span class="priceColor">已有88人捐助</span> 还差9875632元</p>
<p class="introColor">
春蕾计划一对一在全国1700家门店开通了电子捐款箱,携手爱心网友体验支付新公益……
</p>
</div>
</div>
</a>
</li>
<li>
<a href="detail.html">
<div class="col-xs-12">
<div class="leftdiv fl">
<img src="images/x_03.jpg" class="img-responsive">
</div>
<div class="rightIntro clear fr">
<h4 class="clear"><span class="fl">春蕾计划一对一</span> <a href="#" class="delDingdan" style="float: right;">进行中</a></h4>
<!-- 经验条 -->
<div class="expre">
<div class="exLong">
</div>
</div>
<p class="grayColor"><span class="priceColor">已有88人捐助</span> 还差9875632元</p>
<p class="introColor">
春蕾计划一对一在全国1700家门店开通了电子捐款箱,携手爱心网友体验支付新公益……
</p>
</div>
</div>
</a>
</li>
</div>
</div><!-- container结束 -->