元素相对定位,绝对定位.a链接hover用法

Original 2019-05-10 10:57:31 342
abstract:<!DOCTYPE html><html>         <head>                 &nbs

<!DOCTYPE html>

<html>

         <head>

                     <title>相对定位,绝对定位</title>

                     <style type="text/css">

                             a{ text-decoration:none;}

                             a:hover{ font-weight:bold; text-decoration:underline; }

                            .rel_u li{

                                         list-style:none;

                                         border:1px solid #ccc;

                                         float:left;

                                         width:100px;

                                         height:40px;

                                         line-height: 40px;

                                         text-align:center;

                                         position:relative;

                             }

                     .rel_u li:hover  { background:pink;}

                     .rel_u li ul {

                                     display:none;

                                     position:absolute;

                                     left:-41px;

                                      }

                     .rel_u li:hover ul

                                     {

                                     display: block;

                                     }

                     </style>

         </head>

         <body>

         <div class="rel">

                     <ul class="rel_u">

                              <li><a href="">web</a>

                     <ul>

                                 <li>html</li>

                                 <li>css</li>

                                 <li>jqu</li>

                     </ul>

                                  </li>

                                  <li>php</li>

                                  <li>js</li>

                     </ul>

                 </div>

                 </body>

        </html>


Correcting teacher:查无此人Correction time:2019-05-10 13:48:07
Teacher's summary:完成的不错。定位后,每次跟预想的结果不一样,因为定位比较难理解。要多尝试。继续加油。

Release Notes

Popular Entries