前端的一些小功能
阿新 • • 發佈：2019-01-04
-
浮動選單
- 使用ul li，首選這種
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用ul li來實現浮動選單</title> 6 <style type="text/css"> 7 .menu { 8 width: 694px; 9 height
View Code: 50px; 10 list-style: none; 11 margin: 50px auto 0; 12 padding: 0; 13 font-size: 0; 14 } 15 16 17 .menu li a { 18 display: block; 19 width: 98px; 20 height: 48px; 21 border: 1px solid gold; 22margin-left: -1px; 23 color: pink; 24 font-family: "Microsoft Yahei"; 25 font-size: 16px; 26 line-height: 48px; 27 text-align: center; 28 text-decoration: none; 29 float: left; 30 } 31 32 .menu li a:hover{ 33 background-color: gold; 34 color: #fff; 35 } 36 </style> 37 </head> 38 <body> 39 <ul class="menu"> 40 <li><a href="#">首頁</a></li> 41 <li><a href="#">公司簡介</a></li> 42 <li><a href="#">解決方案</a></li> 43 <li><a href="#">公司新聞</a></li> 44 <li><a href="#">行業動態</a></li> 45 <li><a href="#">招賢納士</a></li> 46 <li><a href="#">聯絡我們</a></li> 47 </ul> 48 </body> 49 </html> - 使用div
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box { 8 width: 694px; 9 height: 50px; 10 margin: 50px auto 0; 11 font-size: 0; 12 } 13 14 .box a { 15 display: inline-block; 16 width: 98px; 17 height: 48px; 18 border: 1px solid gold; 19 font-size: 16px; 20 font-family: 'Microsoft Yahei'; 21 color: pink; 22 text-align: center; 23 text-decoration: none; 24 margin-left: -1px; 25 line-height: 48px; 26 } 27 28 .box a:hover { 29 background-color: gold; 30 text-decoration: none; 31 color: #fff; 32 } 33 34 .con { 35 width: 200px; 36 } 37 .con .box1 { 38 width: 200px; 39 height: 200px; 40 background-color: gold; 41 display: none; 42 } 43 .con:hover .box1 { 44 display: block; 45 } 46 /* .con h3:hover + .box1 { 47 display: block; 48 } 49 */ 50 51 </style> 52 </head> 53 <body> 54 <div class="box"> 55 <a href="#">首頁</a> 56 <a href="#">公司簡介</a> 57 <a href="#">解決方案</a> 58 <a href="#">公司新聞</a> 59 <a href="#">行業動態</a> 60 <a href="#">招賢納財</a> 61 <a href="#">聯絡我們</a> 62 </div> 63 64 <div class="con"> 65 <h3>標題</h3> 66 <div class="box1"> 67 hahhahah 68 </div> 69 </div> 70 </body> 71 </html>
View Code
- 使用ul li，首選這種
