صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
lovecoding
/
W250511
10
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

admin

fengchuanyu 2 هفته پیش
والد
ba4e3cca0e
کامیت
32abaa19f6
2فایلهای تغییر یافته به همراه121 افزوده شده و 0 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 62 0
      2-CSS/综合练习题4.html
  2. 59 0
      2-CSS/综合练习题5.html

+ 62 - 0
2-CSS/综合练习题4.html
مشاهده فایل 

@@ -0,0 +1,62 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        *{
 
+            margin: 0;
 
+        }
 
+
 
+        .nav{
 
+            background-color: #333;
 
+            height: 80px;
 
+        }
 
+        .nav-left{
 
+            float: left;
 
+        }
 
+        .nav-left .nav-item{
 
+            float: left;
 
+        }
 
+        .nav-item{
 
+            width: 100px;
 
+            height: 80px;
 
+            line-height: 80px;
 
+            color: #fff;
 
+            font-size: 16px;
 
+            text-align: center;
 
+        }
 
+
 
+        .nav-right{
 
+            float: right;
 
+        }
 
+        .nav-left .nav-item:first-child{
 
+            background-color: #4caf51;
 
+        }
 
+        .nav-item:hover{
 
+            background-color: #000;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="nav">
 
+        <div class="nav-left">
 
+            <div class="nav-item">
 
+                首页
 
+            </div>
 
+            <div class="nav-item">
 
+                新闻
 
+            </div>
 
+            <div class="nav-item">
 
+                联系
 
+            </div>
 
+        </div>
 
+        <div class="nav-right">
 
+            <div class="nav-item">
 
+                关于
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 59 - 0
2-CSS/综合练习题5.html
مشاهده فایل 

@@ -0,0 +1,59 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .drow-content{
 
+            width: 300px;
 
+        }
 
+        button{
 
+            width: 200px;
 
+            height: 100px;
 
+            background-color: #4caf51;
 
+            border:0;
 
+            font-size: 20px;
 
+            color: #fff;
 
+            font-weight: bold;
 
+        }
 
+        .drow-menu{
 
+            width: 300px;
 
+            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
 
+            display: none;
 
+        }
 
+        .drow-item{
 
+            height: 50px;
 
+            padding: 10px;
 
+            line-height: 50px;
 
+            background-color: #fff;
 
+        }
 
+        .drow-item:hover{
 
+            cursor: pointer;
 
+            background-color: #ddd;
 
+        }
 
+        .drow-content:hover .drow-menu{
 
+            display: block;
 
+        }
 
+        .drow-content:hover button{
 
+            background-color: #3e8e41;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="drow-content">
 
+        <button>下拉菜单</button>
 
+        <div class="drow-menu">
 
+            <div class="drow-item">
 
+                下拉菜单1
 
+            </div>
 
+            <div class="drow-item">
 
+                下拉菜单2
 
+            </div>
 
+            <div class="drow-item">
 
+                下拉菜单3
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>