实习期间移动端做时总结

1 <div class="pic"></div>
2 .pic{
3     background: url(../i/inset.png) 0 0 no-repeat;
4     width: 386.5px;/*no*/设计成了原来图片宽度的一半
5     height:157.5px;/*no*/ 设计成了原来图片高度的一半
6     background-size: cover;
7 }

1 .clearfix{*zoom: 1;}
2 .clearfix:after{display: block;height: 0;clear: both;font-size: 0;content: "";}

<div class="box clearfix">...</div>

 1 <div class="comment">
 2  
 3            <div class="left">
 4              <img src="../i/person2.png" class="person">
 5            </div>
 6  
 7            <div class="right">
 8               <div class="info">
 9                  <p class="username">冰棒汽水</p>
10                  <p class="date" style="padding-left:100px">2016/06/29</p>
11                </div>
12                <div class="critics">中国的厚度很厚，但是尖子不多。缺少像韩国一样的朴、石定海神针之类的人物。
13               <div class="input">
14                   <div class="input-info">
15                    <p class="input-username">冰棒汽水</p>
16                    <p class="input-date">2016/06/29</p>
17                  </div>
18                   <div class="input-critics">中国的厚度很厚，但是尖子不多。缺少像韩国一样的朴、石定海神针之类的人物。
19                </div>
20                 </div>
21             </div>
22         </div>
23        </div>

 1 .person{
 2     width:76px;
 3     height:76px;
 4     border-radius: 50%;
 5     float: left;
 6     margin:30px 0 30px 30px;
 7 }
 8 .right{
 9     float: left;
10 }
11 .info{
12     margin-top: -40px;
13     padding-left: 20px;
14 }
15 .username,.input-username{
16     display: inline;
17     font-size: 26px;
18     font-weight: bold;
19  
20 }
21 .date,.input-date{
22     font-size: 24px;
23     display: inline;
24 }
25 .date{
26     color: #b2b6b7;
27     padding-left: 95px;
28 }
29 .critics{
30     font-size: 24px;
31     width: 475px;
32     padding-left: 20px;
33 }
34  

1 <div class="more-com">
2      <p>更多评论</p>
3      <img src="../i/more_btn.png" class="more-btn">
4  </div>
5  <div class="devide1"></div>
6 <div class="publish">
7          <input type="text" class="speak" placeholder="发表评论...">
8          <div class="send"></div>
9 </div>

 1 /*更多评论*/
 2 .more-com{
 3     font-size: 24px;
 4     /*float: left;*/
 5     width: 160px;
 6     margin:20px 250px;
 7     height:36px;
 8  
 9 }
10 .more-com p{
11     float: left;
12     font-size: 24px;
13 }
14 .more-btn{
15     display: inline;
16     padding-left: 10px;
17 }
18 .publish{
19     width:100%;
20     height: auto;
21     margin: 0 auto;
22     position: fixed;
23     bottom:0;
24     z-index: 0;
25    
26     border-top: 1px solid #DEE6E8;
27     border-bottom: 1px solid #DEE6E8;
28     padding-bottom: 20px;
29 }
30 .speak{
31     width: 480px;
32     height:60px;
33     line-height: 60px;
34     font-size: 24px;
35     border: 1px solid #DEE6E8;/*no*/
36     background-color: #EEEEEE;
37     float: left;
38     margin:20px 0 0 40px;
39  
40 }
41 .send{
42     background: url(../i/send.png) 0 0 no-repeat;
43     width: 46px;
44     height:46px;
45     background-size: cover;
46     float: left;
47     margin:30px 0 0 30px;
48     cursor: pointer;
49 }

1 代码：<div class="devide"></div>
2 css格式：
3 .devide,{
4     height:24px;
5     width: 100%;
6     border:1px solid #DEE6E8;
7 }
8