CSS练习实例

1.练习一 实现如下效果

<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menu {
 width:80px;
 border: 1px solid lightgray;
 margin-top:15px;
 position: absolute;
  left: 80px;
  top: 20px;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
 
div.menu a:hover
 {
background-color: #f1f1f1;
}
 
</style>
 
<a href="#nowhere"> 武器 </a>
<a href="#nowhere"> 护甲 </a>
<a href="#nowhere"> 英雄 </a>
 
<div class="menu">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
 
<div style="height:200px"></div>

2.斑马线的实现 具体如下：

<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
  tr.head{
    border-bottom-width: 2px;
  }
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
 
td{
width:25%;
text-align:center;
}
 
</style>
<table>
   <tr class="head">
       <td>id</td>
       <td>名称</td>
       <td>血量</td>
       <td>伤害</td>
    </tr>
   <tr class="odd">
       <td>1</td>
       <td>gareen</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr class="even">
       <td>2</td>
       <td>teemo</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr class="odd">
       <td>3</td>
       <td>annie</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr class="even">
       <td>4</td>
       <td>deadbrother</td>
       <td>400</td>
       <td>90</td>
    </tr>
</table>

3.实现美人尖

<style>
div{
   width:0px;
   height:0px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 10px;
   border-left-style:solid;
   border-left-color:white;
   border-left-width: 10px;  
   border-bottom-style:solid;
   border-bottom-color:white;
   border-bottom-width: 10px;
   border-right-style:solid;
   border-right-color:white;
   border-right-width: 10px;     
  }
</style>
   
<div >
 
</div>

4.实现断线下划线

<style>
  table{
    width:100%;
  }
  table td{
    text-align:center;
  }
  table tr.rowborder td{
    background-color: #b2d1ff;
    border-right: 2px solid #fff;
    height: 3px;
}
</style>
  
<table>
  <tr>
    <td>商品</td>
    <td>数量</td>
    <td>价格</td>
    <td>小记</td>
  </tr>
  <tr class="rowborder">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr> 
</table>