CSS创建导航条

2024-04-27 15:11:05

字体：大中小

来源：转载

供稿：网友

1. 垂直导航条

web效果

这里写图片描述

代码

<html><head><title>创建导航条</title><style>ul { list-style-type:none;}li { margin-bottom:11px; border:1px solid #B8B8B8; width:120px;}a:link, a:visited{ display: block; font-weight:bold; background-color:#D9D9D9; color:black; padding:5px; text-align:center; text-decoration:none;}a:hover, a:active{ background-color:#F17022;}</style></head><body><ul> <li><a href="#">主页</a></li> <li><a href="#">博客</a></li> <li><a href="#">音乐</a></li> <li><a href="#">电影</a></li> <li><a href="#">关于</a></li></ul></body></html>

2. 水平导航条

web效果

这里写图片描述

代码

<html><head><title>创建导航条</title><style>ul { list-style-type:none;}/*设置li元素的float属性为 left ，使得所有项目浮动*/li { float:left; margin-bottom:11px; border:1px solid #B8B8B8; width:120px;}a:link, a:visited{ display: block; font-weight:bold; background-color:#D9D9D9; color:black; padding:5px; text-align:center; text-decoration:none;}a:hover, a:active{ background-color:#F17022;}</style></head><body><ul> <li><a href="#">主页</a></li> <li><a href="#">博客</a></li> <li><a href="#">音乐</a></li> <li><a href="#">电影</a></li> <li><a href="#">关于</a></li></ul></body></html>

上一篇：css trasition-duration transition-property属性

下一篇：正则表达是解析HTML元素的代码记录