浏览代码

垂直导航菜单

dongxiuling 2 年之前
父节点
当前提交
69e4de301f
共有 2 个文件被更改,包括 39 次插入1 次删除
  1. 2 1
      css/5_字体文本相关属性.html
  2. 37 0
      css/6_垂直导航菜单.html

+ 2 - 1
css/5_字体文本相关属性.html

@@ -27,7 +27,8 @@
 
             /* 单行文本垂直对齐 行高=高 */
             line-height:50px ;
-
+            /* 文本缩进 */
+            text-indent: 20px;
         }
     </style>
 </head>

+ 37 - 0
css/6_垂直导航菜单.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .list{
+            width: 810px;
+            height:37px;
+            background: #f1f1f1;
+            /* 文本垂直居中 */
+            line-height: 37px;
+            text-indent: 20px;
+        }
+        .active{
+            background: #008CBA;
+            /* 文字颜色 */
+            color:#fff;
+        }
+        .list:hover{
+            background: #555;
+            color: #fff;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="list active">Home</div>
+    <div class="list">News</div>
+    <div class="list">Concat</div>
+    <div class="list">About</div>
+</body>
+
+</html>