【无标题】HTML简易小程序

最新推荐文章于 2024-05-11 13:01:28 发布

旧城之王411

最新推荐文章于 2024-05-11 13:01:28 发布

阅读量162

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_64572515/article/details/123074285

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>选择器的使用</title>
   </head>
   <style type="text/css">

      /*设置导航栏样式*/
      nav {
          width: 300px;
      }

      /*设置导航栏中的每一项的样式*/
      li {
          background-color: rgba(0,0,0,0.4);
          height: 35px;
          line-height: 35px;
          overflow: hidden;
      }

      /*设置偶数行背景颜色透明度为0.9*/
      li:nth-of-type(2n){
          background-color: rgba(0,0,0,0.5);
      }

      /*鼠标悬停时背景颜色为#0099E5*/
      li:hover{
          background: #0099E5;
      }

      /*设置超链接的样式 */
      a {
          text-decoration: none;
          display:block;
          color:#fff;
          height:35px;
          padding: 0 38px;
      }

   </style>
   <body>
       <nav>
           <ul>
               <li><a href="#">Java EE教程</a></li>
               <li><a href="#">Android 教程</a></li>
               <li><a href="#">PHP 教程</a></li>
               <li><a href="#">UI 设计教程</a></li>
               <li><a href="#">IOS 教程</a></li>
               <li><a href="#">web 前端教程</a></li>
               <li><a href="#">c/c++教程</a></li>
           </ul>
       </nav>
   </body>
</html>

旧城之王411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】HTML简易小程序

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选择器的使用</title> </head> <style type="text/css"> /*设置导航栏样式*/ nav { width: 300px;...
复制链接

扫一扫