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

示例导航栏如下图所示

模仿w3c school的示例导航栏-LMLPHP

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

做成后效果如下:

模仿w3c school的示例导航栏-LMLPHP

代码如下:

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<style>
li {
/* 去掉标签点,左浮动 */
list-style: none;
float: left;
} a {
/* 将a标签变为块级元素,设置文字大小和背景颜色 */
display: block;
width: 150px;
font-size: 32px;
color: white;
background-color: gainsboro;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-bottom: 2px solid brown;
} a:hover {
/* 鼠标移入后特效 */
font-size: 34px;
font-weight: bold;
background-color: brown;
border-color: lightcoral;
transform: scale(1.1);
transition: all 0.1s;
box-shadow: 0 4px 4px gray;
}
</style>
</head> <body>
<nav>
<ul>
<!-- 使用li标签做导航栏 -->
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">news</a>
</li>
<li>
<a href="#">about</a>
</li>
</ul>
</nav>
</body> </html>

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

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

05-17 23:19