css学习2----css动态菜单

最新推荐文章于 2024-03-05 14:41:29 发布

张自强

最新推荐文章于 2024-03-05 14:41:29 发布

阅读量390

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/zzq19860626/article/details/10220353

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这里是一个没有用table标签的动态效果菜单：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>test4_css.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

css代码：

body{
border-color: #ffdee0;

}
#navigation{
   width:200px;
   font-family: Arial;

}
#navigation ul{
list-style-type: none; /* 去掉项目符号*/
margin: 0px;
padding:0px;
}

#navigation li{
border-bottom: 1px solid #ed9f9f; /* 添加下划线 */

}
#navigation li a{
display: block; /* 区块显示 */
padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
}
#navigation li a:link, #navigation li a:visited:visited { /*正常连接*/
background-color: #c11136;
color: #ffffff;

}
#navigation li a:hover{ /*鼠标经过时*/
background-color: #990020;
color: #ffff00;
}

张自强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习2----css动态菜单

这里是一个没有用table标签的动态效果菜单：代码如下： test4_css.html HOME NEWS SPORTS WEATHER CONTACTS css代码： body{ border-color: #ffdee0; }#navigation{ wi
复制链接

扫一扫

专栏目录