“导航条”的版本间的差异
（创建页面，内容为“ <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">...”） |
|||
| 第7行： | 第7行： | ||
<li><a href="#">联系我们</a></li> | <li><a href="#">联系我们</a></li> | ||
</ul> | </ul> | ||
| + | ———————————————— | ||
| + | 版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 | ||
| + | 原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229 | ||
| + | *{ margin:0; padding:0; font-size:14px; } //这里做了一个基本的样式清除，并且设置初始的文字大小为14px; | ||
| + | ul{ list-style:none; width:100px; } //list-style:none;是为了清除条目前的那个圆点 | ||
| + | li{ height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;} //padding-left:10px是为了让文字向右移动10个像素，但是li的宽度也会增加10个像素，这里推荐用text-indent:10px;文本缩进10个像素 | ||
| + | a{text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px; | ||
| + | a:hover{ background-color:#f60; color:#0000;} //这个是鼠标经过的样式 | ||
———————————————— | ———————————————— | ||
版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 | 版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 | ||
原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229 | 原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229 | ||
2019年12月3日 (二) 10:21的版本
———————————————— 版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229
- { margin:0; padding:0; font-size:14px; } //这里做了一个基本的样式清除，并且设置初始的文字大小为14px;
ul{ list-style:none; width:100px; } //list-style:none;是为了清除条目前的那个圆点 li{ height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px;} //padding-left:10px是为了让文字向右移动10个像素，但是li的宽度也会增加10个像素，这里推荐用text-indent:10px;文本缩进10个像素 a{text-decoration:none; display:block; height:30px; line-height:30px; width:100px; background-color:#f60; margin-bottom:1px; padding-left:10px; a:hover{ background-color:#f60; color:#0000;} //这个是鼠标经过的样式 ———————————————— 版权声明：本文为CSDN博主「小秋虫」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_36759976/article/details/79515229