首页 > 代码库 > Html5 设置菱形链接菜单

Html5 设置菱形链接菜单

2024-08-25 16:45:22   224人阅读

本例是采用html5+css3.0设置的菜单链接。其中主要用到了以下几个方面：

1. CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。

2. 用到了margin:25px;/*margin表示元素与其他元素之间的空白*/。

3. 超链接标签a中垂直居中的设置：设置height 和line-height属性

4. 鼠标放上去的样式

技术分享

具体代码如下：

技术分享 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>CSS 3.0设置菱形div</title>
 5     <style type="text/css"> 
 6         .menu
 7         {
 8              border-bottom:1px solid black;
 9             
10             }
11     .menu div
12     { 
13         width:100px;
14         height:100px;
15         text-align:center;
16         margin:25px;/*margin表示元素与其他元素之间的空白*/
17         float:left;
18         border:1px solid black;
19         transform:rotate(45deg);/*rotate表示旋转45°*/
20      }
21      .m1
22      {
23          background-color:Red;
24       }
25      .m2
26      {
27          background-color:Blue;
28       }
29       .m3
30      {
31          background-color:Green;
32       }
33       .m4
34      {
35          background-color:Yellow;
36       }
37       .m5
38      {
39          background-color:Gray;
40       }
41       .m6
42      {
43          background-color:Olive;
44       }
45       .m7
46      {
47          background-color:Orange;
48       }
49      .menu a
50      {
51          text-decoration:none;/*不显示下划线*/
52          width:70px;
53          height:70px;
54          margin:15px;
55          display:block;
56          color:Black;
57          text-align:center;
58          line-height:70px;
59          transform:rotate(-45deg);/*因为外层Div进行旋转，所以a标签也会旋转，所以需要逆向旋转回来*/
60       }
61       
62       .menu a:hover
63       {
64           transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/
65       }
66     </style>
67 </head>
68 <body>
69 <header>
70     <h1>这是一个CSS3.0的示例</h1>
71     <div class="menu">
72         <div class="m1"><a href="#">基础语言</a></div>
73         <div class="m2"><a href="#">前端开发</a></div>
74         <div class="m3"><a href="#">移动开发</a></div>
75         <div class="m4"><a href="#">数据处理</a></div>
76         <div class="m5"><a href="#">互联网</a></div>
77         <div class="m6"><a href="#">IT硬件</a></div>
78         <div class="m7"><span><a href="#">其他</a></span></div>
79     </div>
80     
81 </header>
82 <div style="clear:left;border-top:1px solid black;"></div>
83 <div style=" margin-top:2px; border-top:1px solid black;">ada </div>
84 </body>
85 </html>
View Code

 

Html5 设置菱形链接菜单


联系
我们