小白手记：Timeline

“纯 CSS，不添加 JavaScript ，适合1个月以下小白吸收”

•                                                                  ----            
  

先看一下成品的效果：长长的一个预览图，这里用了一个叫 Paparazzi! 的截图，求更好用的 ；

当时我的思路是：

• 首先在 HTML 的布局中，先用 ul 和 li ，把图片和文字介绍的单元都构建出来；
• 再把中间的长条用伪类画出来；
• 再对图片着手，定位、造型、边框、背景色···；
• 把文字描述的部分，放到长条的两边；

那看 Code 吧
1. HTML 布局中，貌似写得太长了

<div class="timeline">  
    <div class="title-word">            
            <h1>Aoki Hagane No Arpeggio</h1>           
            <p>The history of Kongō-class battlecruiser</p>        
        </div>      
    <div class="wrap-center">         
        <ul class="left">            
        <li><img src="./img/kongou.png"></li>            
        <li>                
            <div class="panel">                    
            <h3>金刚</h3>                    
            <p>Aoki Hagane Aoki Hagane</p>                    
            <p>Aoki Hagane Aoki Hagane</p>                    
            <p>Aoki Hagane Aoki Hagane</p>                
            </div>            
            </li>        
        </ul>
        <ul class="right">        
        <li><img src="./img/hiei.png"></li>        
        <li>            
            <div class="panel">                
            <h3>比睿</h3>                
            <p>Aoki Hagane Aoki Hagane</p>                
            <p>Aoki Hagane Aoki Hagane</p>                
            <p>Aoki Hagane Aoki Hagane</p>            
            </div>        
        </li>    
        </ul>
    </div>
</div>

效果图就是这样

原谅我是一个动画迷，也比较喜欢海军
2. 中间的哪个长条，我是用伪类写得

.wrap-center:before{    
    content: '';      
    position: absolute;
    float: left;   
    height: 100%;    
    top: 15%;     
    left: 50%;    
    margin-left: -2px;    
    border-left: 4px solid #ccc;
}

3. 图片定位、造型、边框

img{
    text-align: center;
    position: relative;      
    width: 120px;    
    height: 120px;  
    border: 4px solid #ccc;    
    border-radius: 50%;      
    background-color:#00bfff;/*我这里图片是透明的PNG,所以用了背景色*/
}
.left img{    
    float: right;/*图片右浮动，相对应的文字部分右对齐*/    
    margin-right: 50%;    
    position: relative;    
    left: 60px;
}
.right img{    
    float: left;/*图片左浮动，相对应的文字部分左对齐*/        
    margin-left: 50%;   
    position: relative;    
    right: 60px;
}

4. 介绍文字跑到两边去

.left .panel{    
    text-align: right;    
    position: relative;    
    top: 30px;
}
.right .panel{    
    text-align: left;    
    position: relative;    
    top: 30px;
}

最终的效果呢，就是这样

字体，边距，字号，颜色一些特效就没做了

从告别自己的硕导，用沾满试剂的双手开始敲下第一个<div>，已经过去了快一个月了，做得很粗糙，兼容性没上，布局很乱，不会JS，没有响应式，每天做一些微小的工作，每天+1s.哎呀，点击这里，貌似还能看到效果呢