1. 认识CSS的 盒子模型。
2. CSS选择器的灵活使用。
3. 图片文字用div等元素布局形成HTML文件。
4. 新建相应CSS文件，并link到html文件中。
5. CSS文件中定义样式
   1. div.img：border,margin,width,float
   2. div.img img：width，height
   3. div.desc：text-align,padding
   4. div.img:hover：border
   5. div.clearfloat：clear

html代码如下：

    
             
     
用户导航
     
     
    
      
        
                           
       
            
        学校荣誉        
       
    
      
    
      
        
                           
       
            
        师生获奖        
       
    
      
    
      
        
                           
       
            
        领导关怀        
       
    
      
    
      
        
                           
       
            
        数字广商        
       
    
      
    
      
        
                           
       
            
        画说校园        
       
    
      
    
      
        
                           
       
            
        视频广商        
       
    
      
    
      
        
                           
       
            
        全景校园        
       
    
      
    
      
        
                           
       
            
        校友风采        
       
    
      
     
     
    
      
        
                       
      
    
      
        
                       
      
    
      
        
                       
      
    
      
        
                       
      
    
      
        
                       
      
    
      
        
                       
      
    
      
        
                       
      
    
      
        
                       
      
     

 

css代码如下：

.daohang{
       align-content: center;    padding: 20px;}img {
       width: 400px;}div.img {
       border: 1px solid #cccccc;    float: left;    margin: 30px;    width: 260px;}div.img img {
       width: 100%;    height: auto;}div.desc {
       background-color:cadetblue;    text-align: center;    padding: 5px;}div.img:hover {
       border: 1px solid #000000;}div.desc:hover {
       border: 1px solid #000000;}div.clearfolat {
       clear: both;}