width auto fit and fix bugs

NiuFuyu855 · Nov 13, 2022 · ff4ebb0 · ff4ebb0
1 parent 0368a88
commit ff4ebb0
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 15 deletions.
diff --git a/css/nutssss.css b/css/nutssss.css
@@ -24,19 +24,23 @@ body {
 }
 
 .meBox {
+    /* 新增的*/
+    display: table;
+    position: relative;
     float: left;
     width: 20rem;
-    height: 36rem;
+    /* height: 0px; */
     background-color: white;
     margin-top: 100px;
+    top: -10%;
     border-radius: 2%;
     transition: all 0.3s;
     text-align: center;
 }
 
 .meBox:hover {
     width: 21rem;
-    height: 34rem;
+    /* height: 0px; */
     margin: 95px 0 0 -5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
 }
@@ -50,14 +54,15 @@ body {
     position: relative;
     top: -15%;
     left: 50%;
+    margin-top: -4.5rem;
     margin-left: -4rem;
     transition: all 0.3s;
 }
 
 .meBox:hover .headPhoto {
     width: 9rem;
     height: 9rem;
-    margin: -0.5rem 0 0 -4.5rem;
+    margin: -5.5rem 0 0 -4.5rem;
     transform: rotate(360deg);
 }
 
@@ -89,7 +94,7 @@ body {
     white-space: nowrap;
     overflow: hidden;
     animation: typing 2s steps(20, end), blink-caret .3s step-end infinite alternate;
-    margin: -30px 0 0 90px;
+    margin: 18px 0 0 90px;
     transition: all 0.3s;
 }
 
@@ -139,8 +144,15 @@ body {
 
 .meBox-Button {
     width: 100%;
+    /*在这里该宽度*/
+    padding-bottom: 15rem;
+    transition: all 0.5s;
 }
+.meBox:hover .meBox-Button{
+    /*这里改悬浮后缩小到某个宽度*/
+    padding-bottom: 10rem;
 
+}
 .meBox-Button a {
     display: inline-block;
     float: left;
@@ -156,6 +168,7 @@ body {
 .meBox-Button a:hover {
     color: rgb(0, 132, 255);
     font-size: 1.2rem;
+
 }
 
 .meBox:hover .meBox-Button a {
@@ -284,7 +297,9 @@ body {
     margin-bottom: 30px;
     /* background-color: blue; */
 }
-
+#footer p{
+
+}
 #footer a {
     text-decoration: none;
     color: white;
@@ -307,7 +322,7 @@ body {
 
     .meBox:hover {
         width: 21rem;
-        height: 34rem;
+        /* height: 34rem; */
         margin: 95px -5px 0 2.5%;
     }
 
@@ -319,14 +334,14 @@ body {
 @media screen and (max-width: 1120px) {
     .meBox {
         float: none;
-        height: 30rem;
+        /* height: 30rem; */
         margin: 100px auto 100px;
     }
 
     .meBox:hover {
         width: 20rem;
-        height: 25rem;
-        margin: 105px auto 100px;
+        /* height: 25rem; */
+        margin: 100px auto 100px;
     }
 
     .meBox:hover .meBox-Button a {
@@ -342,10 +357,15 @@ body {
     .meBox:hover .headPhoto {
         width: 8rem;
         height: 8rem;
-        margin: -0.5rem 0 0 -4rem;
+        margin: -5.5rem 0 0 -4rem;
         transform: rotate(360deg);
     }
-
+    .meBox-Button{
+        margin-top: 13px;
+    }
+    .meBox:hover .meBox-text {
+        font-size: 1rem;
+    }
     #cmdBox {
         float: none;
         margin: 0 auto 100px;
@@ -355,12 +375,12 @@ body {
 @media screen and (max-width: 768px) {
     .meBox {
         width: 300px;
-        height: 30rem;
+        /* height: 30rem; */
     }
 
     .meBox:hover {
         width: 300px;
-        height: 25rem;
+        /* height: 25rem; */
         margin: 100px auto 100px;
     }
 
@@ -380,7 +400,7 @@ body {
     .meBox:hover .headPhoto {
         width: 8rem;
         height: 8rem;
-        margin: -0.5rem 0 0 -4rem;
+        margin: -5.5rem 0 0 -4rem;
         transform: rotate(360deg);
     }
 

diff --git a/index.html b/index.html
@@ -39,6 +39,12 @@
                 <a href="http://wpa.qq.com/msgrd?v=3&uin=3327223191&site=qq&menu=yes" target="_blank">QQ</a>
                 <a href="https://t.me/NiuFuyu_CN" target="_blank">Telegram</a>
                 <a href="https://twitter.com/NiuFuyu_CN" target="_blank">Twitter</a>
+                <a href="https://twitter.com/NiuFuyu_CN" target="_blank">Twitter</a>
+                <a href="https://twitter.com/NiuFuyu_CN" target="_blank">Twitter</a>
+
+
+
+
             </div>
         </div>
 
@@ -119,7 +125,7 @@
     </div>
 
     <!-- 页脚 -->
-    <div id="footer">
+    <div id="footer"  style="z-index: -1;">
         <p>© 2022 | <a href="https://beian.miit.gov.cn/" target="_blank">正经人都不备案的~</a>
         <!-- 运行时间 -->
         <p><span id="sitetime"></span></p>