前端的一些小功能

浮动菜单

使用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: 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;
22             margin-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>

View Code

使用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

前端的一些小功能

浮动菜单

猜你喜欢