李洪强和你一起学习前端之(7)复习

复习: 

1.1行高

行高可以继承

1.2行高单位

给单独的盒子设置:

Px　　跟文字大小没有关系

 em　　行高和字体大小相乘

 %

 不带单位

给父盒子设置:

px　　先计算再继承

2em　　先计算再继承

%　　

影响盒子大小: Padding  边框

1.3.2 Padding

取值: 上右下左

1.3.3 Margin

塌陷

给父盒子设置border

给父盒子设置overflow

案例一: 

实现效果: 

代码: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   /*css初始化*/
   *{
    margin: 0;
    padding: 0;
   }
   ul{
    list-style: none;
   }
   .box{
    width: 260px;
    height: 327px;
    border: 1px solid #009900;
    margin: 20px auto;
    background:url(img/bg.gif);
   }
   .title{
    height: 23px;
    border-left: 4px solid #c9E143;
    margin: 10px 0 0 10px;
    /*没有设置宽度可以用padding*/
    padding-left: 11px;
    /*让文字垂直居中显示*/
    line-height: 23px;
    color: white;
    /*设置不是粗体显示*/
 
   }
   h4{
    /*设置不是粗体显示*/
    font-weight: normal;
   }
   .list{
    width: 222px;
    height: 279px;
    background: white;
    margin-left: 10px;
    margin-top: 5px;
    padding-left: 9px;
    padding-right: 9px;
   }
   .list li{
    height: 30px;
    border-bottom: 1px dashed #666666;
    line-height: 30px;
    background: url(img/tb.gif) no-repeat left 8px;
    padding-left: 16px;
   }
 
  </style>
 </head>
 <body>
 
  <div class="box">
   <div class="title">
 
    <h4>爱宠知识</h4>
   </div>
   <ul class="list">
    <li>
     <a href="">养猫比养狗健康</a>
    </li>
    <li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li><li>
     <a href="">养猫比养狗健康</a>
    </li>
   </ul>
  </div>
 
 </body>
</html> 

案例2: 

实现效果: 

代码: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
 
   }
   .box{
    width: 208px;
    height: 383px;
    border: 1px solid #CECECE;
    /*居中显示*/
    margin: 20px auto;
   }
   .title{
    height: 25px;
    background-color: #ECEDEE;
    /*设置居中*/
    line-height: 25px;
   }
   h4{
    padding-left: 9px;
   }
 
   .photo{
    width: 180px;
    height: 180px;
    border: 1px solid #ECEDEE;
    margin: 5px auto;
   }
   .weibo{
    /*//让内容居中
    margin: 0 auto 是让盒子居中*/
    text-align: center;
    border-bottom: 1px dashed #D1D1D1;
    padding-bottom: 10px;
   }
   .weibo input{
    height: 24px;
    width: 70px;
    background: url(img/vb.jpg) no-repeat;
    margin-bottom: 5px;
   }
   .friend input{
    width: 69px;
    height: 23px;
 
       }
 
       .friend{
        text-align: center;
       }
  </style>
 </head>
 <body>
  <div class="box">
   <div class="title">
    <h4>个人资料</h4>
 
   </div>
   <div class="photo">
    <img src="img/1.jpg"/>
   </div>
   <div class="weibo">
    <span id="">
     V闪闪
    </span>
    <img src="img/v.jpg"/>
    <br />
    <input type="button" name="" id="" value="微博" />
   </div>
   <div class="friend">
    <input type="button" name="" id="" value="加好友" />
    <input type="button" name="" id="" value="发纸条" />
    <input type="button" name="" id="" value="写留言" />
    <input type="button" name="" id="" value="加关注" />
   </div>
  </div>
 </body>
</html>
posted @ 2017-07-16 20:30  李洪强  阅读(277)  评论(0)  编辑  收藏  举报