راهنمایی در کدنویسی اچ تی ام ال

کد php:

<div id="icons-right-heder">
 
 <div id="icon1" >
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon1.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>رزومه</b></div> 
</a>
 </div><!------End icon1------>
<div id="icon2">
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon2.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>اعضای ویژه</b></div> 
</a>
 </div><!------End icon2------>
<div id="icon3">
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon3.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>محصولات</b></div> 
</a>
 </div><!------End icon3------>
<div id="icon4">
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon4.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>دوره ها</b></div> 
</a>
 </div><!------End icon4------>


  
 </div><!----End icons-right-heder----->

کد php:

height:80px;
width:90px;
float:left;
margin-left:5px;
overflow:hidden;

کد:

.a{

height:60px;

width:60px;

background-image:url(/images/icons/bg-icons.jpg);

}

}

#icon3{

height:80px;

width:90px;

float:left;

margin-left:5px;

overflow:hidden;

}

کد php:

#icon2 a:hover{
background-image:url(/images/icons/bg-icons.jpg);
}

کد php:

#icon2 a:hover{
background-color:#79930c;
}

کد:

#icon1, #icon2, #icon3, #icon4 {

    text-align: center;

    float: right;

    padding: 0 15px;

    margin-left: 5px;

    border: 1px solid transparent;

}

#icon1:hover, #icon2:hover, #icon3:hover, #icon4:hover {

    background: #437C00;

    border: 1px solid #69A226;

}

#icon1 div, #icon2 div, #icon3 div, #icon4 div {

    margin: -5px;

}

#icon1 a, #icon2 a, #icon3 a, #icon4 a {

    text-decoration: none !important;

}

کد php:

color:#99cc00;

کد:

#icon1, #icon2, #icon3, #icon4 {

    border: 1px solid rgba(0, 0, 0, 0);

    float: left;

    margin-left: 5px;

    padding: 0 11px 20px;

    text-align: center;

    -webkit-transition: all 300ms linear;

-moz-transition: all 300ms linear;

-ms-transition: all 300ms linear;

-o-transition: all 300ms linear;

transition: all 300ms linear;

}

کد:

#icon1 a, #icon2 a, #icon3 a, #icon4 a {

    text-decoration: none !important;

    font-size: 11px;

    font-family: tahoma;

}

کد:

#icon1 img, #icon2 img, #icon3 img, #icon4 img {

    width: 45px;

    height: auto;

}

#icon1:hover b, #icon2:hover b, #icon3:hover b, #icon4:hover b {

    color: #99cc00;

}

کد php:

-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
   -ms-transition: all 300ms linear;
   -o-transition: all 300ms linear;
    transition: all 300ms linear;