Home Explore Help
Sign In
lovecoding
/
VIP24
6
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

水平导航

dongxiuling 2 years ago
parent
323f7c6cb9
commit
4be4b3870c
5 changed files with 123 additions and 0 deletions
Split View Show Diff Stats
  1. 35 0
      css/10_基础语法3.html
  2. 0 0
      css/4_css基础语法1.html
  3. 0 0
      css/5_字体相关语法2.html
  4. 41 0
      css/8_水平导航.html
  5. 47 0
      css/9_行级元素块级元素.html

+ 35 - 0
css/10_基础语法3.html
View File 

@@ -0,0 +1,35 @@
 
+<!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>
 
+        a{  
+            /* 文件修饰 none|underline|line-through*/
 
+            text-decoration: line-through;
 
+        }
 
+        /* 去掉列表的. */
 
+        li{
 
+            list-style: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <!-- a标签 文本 -->
 
+    <a href="#">111</a>
 
+    <a href="#">111</a>
 
+
 
+
 
+
 
+    <!-- 列表 -->
 
+    <ul>
 
+        <li>111</li>
 
+        <li>111</li>
 
+
 
+    </ul>
 
+    
+</body>
 
+</html>

+ 0 - 0
css/4_css基础语法.html → css/4_css基础语法1.html
View File


+ 0 - 0
css/5_字体相关语法.html → css/5_字体相关语法2.html
View File


+ 41 - 0
css/8_水平导航.html
View File 

@@ -0,0 +1,41 @@
 
+<!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>
 
+        a{
 
+            width:94px;
 
+            height:33px;
 
+            background: #bebebe;
 
+            float: left;
 
+            text-align: center;
 
+            line-height: 33px;
 
+            color:#fff;
 
+
 
+            font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体;
 
+            font-size: 14px;
 
+            font-weight: bold;
 
+
 
+            /* 文本修饰  */
 
+            text-decoration: none;
 
+        }
 
+        a:hover{
 
+            background: #cc0000;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+        <a href="#">HOME</a>
 
+        <a href="#">NEWS</a>
 
+        <a href="#">ARTICLES</a>
 
+        <a href="#">FORUM</a>
 
+        <a href="#">CONTACT</a>
 
+        <a href="#">ABOUT</a>
 
+    </div>
 
+
 
+</body>
 
+</html>

+ 47 - 0
css/9_行级元素块级元素.html
View File 

@@ -0,0 +1,47 @@
 
+<!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>
 
+        p{
 
+            background: #f00;
 
+            width: 200px;
 
+            height: 200px;
 
+        }
 
+        a{
 
+            background: #0f0;
 
+            width: 200px;
 
+            height: 200px;
 
+        }
 
+        h1{
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <p>哈哈哈</p>
 
+    <a href="#">hehehehehehehhehe</a>
 
+    <a href="#">hehehehehehehhehe</a>
 
+    <h1>ahahahah</h1>
 
+    
+    <!-- 
+        块级元素  1、自己占一行 2、可以设置宽高
 
+            h1-h6 p div ul li 
+        display:block;
 
+
 
+        行级元素  1、多个占一行 3、不能设置宽高
 
+            a span i b 
+        display:inline
 
+
 
+        行级块元素  1、多个占一行  2、可以设置宽高
 
+            input
 
+        display:inline-block;
 
+
 
+        display:none 隐藏
 
+     -->
 
+</body> 
+</html>