CSS 基础学习-184 设置导航链接背景和单击区域

hrs 提交于 2022/02/28 - 13:15 , 周一

设置导航链接背景和单击区域

实例代码:

1 <!doctype html>
  2 <html>
  3   <head>
  4     <meta charset="utf-8">
  5     <style>
  6     ul{
  7       list-style-type:none;
  8       margin:0;
  9       padding:0;
 10       }
 11     li a {
 12       display:block;   /*所有区域都可以单击。*/
 13       background-color:#dddddd;
 14       width:60px;
 15 
 16     }
 17     </style>
 18   </head>
 19   <body>
 20 
 21     <ul>
 22       <li><a href="https://www.dwoke.com">首页</a></li>
 23       <li><a href="https://www.dwoke.com">文章</a></li>
 24       <li><a href="https://www.dwoke.com">下载</a></li>
 25       <li><a href="https://www.dwoke.com">文档</a></li>
 26       <li><a href="https://www.dwoke.com">关于</a></li>
 27 
 28     <p>背景色被添加到链接以显示链接区域。 </p>
 29     <p>请注意,整个链接区域都是可以单击的,而不仅仅是文本。 </p>
 30     </ul>
 31 
 32   </body>
 33 
 34 </html>

运行效果:

css-184.png

标签