浏览代码

垂直导航

dongxiuling 2 年之前
父节点
当前提交
323f7c6cb9
共有 3 个文件被更改,包括 66 次插入1 次删除
  1. 1 1
      css/5_字体相关语法.html
  2. 38 0
      css/6_垂直导航.html
  3. 27 0
      css/7_浮动.html

+ 1 - 1
css/5_字体相关语法.html

@@ -25,7 +25,7 @@
 
             /* 文本相关属性 */
             /* 文本水平对齐 left|center|right*/
-            /* text-align: center; */
+            text-align: center;
             /* 文本垂直居中 通过line-height=height 实现单行文本垂直居中*/
             line-height:50px;
             /* 文本首行缩进 */

+ 38 - 0
css/6_垂直导航.html

@@ -0,0 +1,38 @@
+<!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>
+        div {
+            width: 810px;
+            height: 37px;
+            background: #f1f1f1;
+            line-height: 37px;
+            text-indent: 20px;
+            /* 鼠标划入手状 */
+            cursor:pointer;
+        }
+        .active{
+            background: #008CBA;
+            color:#fff;
+        }
+        .list:hover{
+            background: #555;
+            color: #fff;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="active">Home</div>
+    <div class="list">News</div>
+    <div class="list">Contact</div>
+    <div class="list">About</div>
+
+</body>
+
+</html>

+ 27 - 0
css/7_浮动.html

@@ -0,0 +1,27 @@
+<!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>
+        div{
+            width: 100px;
+            height: 50px;
+            background: #f00;
+            float: left;
+            
+        }
+    </style>
+</head>
+<body>
+
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+
+    
+</body>
+</html>