模仿w3c school的示例导航栏

最新推荐文章于 2022-07-16 18:29:48 发布

weixin_30470857

最新推荐文章于 2022-07-16 18:29:48 发布

阅读量515

点赞数

原文链接：http://www.cnblogs.com/sbzy/p/9000316.html

版权

近日学习HTML，恰巧学习过程中看见w3cschool的示例导航栏看上去很不错，适合新手练习，于是模仿着做了一个。

示例导航栏如下图所示

导航栏自然使用li标签来做，a标签控制背景颜色和鼠标放入的特效

做成后效果如下：

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <style>
 7         li {
 8             /* 去掉标签点，左浮动 */
 9             list-style: none;
10             float: left;
11         }
12 
13         a {
14             /* 将a标签变为块级元素，设置文字大小和背景颜色 */
15             display: block;
16             width: 150px;
17             font-size: 32px;
18             color: white;
19             background-color: gainsboro;
20             text-decoration: none;
21             text-align: center;
22             text-transform: uppercase;
23             border-bottom: 2px solid brown;
24         }
25 
26         a:hover {
27             /* 鼠标移入后特效 */
28             font-size: 34px;
29             font-weight: bold;
30             background-color: brown;
31             border-color: lightcoral;
32             transform: scale(1.1);
33             transition: all 0.1s;
34             box-shadow: 0 4px 4px gray;
35         }
36     </style>
37 </head>
38 
39 <body>
40     <nav>
41         <ul>
42                 <!-- 使用li标签做导航栏 -->
43             <li>
44                 <a href="#">home</a>
45             </li>
46             <li>
47                 <a href="#">news</a>
48             </li>
49             <li>
50                 <a href="#">about</a>
51             </li>
52         </ul>
53     </nav>
54 </body>
55 
56 </html>

运用这几天的所学知识模仿做了一个，不知道以后学会了以后，标签还是不是这么做的

这个老爷机surface pro3风扇声音是真的大，坐到床上不得不带上耳机，好久不用了又觉得键盘键程真的是短的可怕，可惜没钱，不然换个

转载于:https://www.cnblogs.com/sbzy/p/9000316.html

weixin_30470857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿w3c school的示例导航栏

近日学习HTML，恰巧学习过程中看见w3cschool的示例导航栏看上去很不错，适合新手练习，于是模仿着做了一个。示例导航栏如下图所示导航栏自然使用li标签来做，a标签控制背景颜色和鼠标放入的特效做成后效果如下：代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <he...
复制链接

扫一扫