css菜单代码

最新推荐文章于 2024-05-23 17:56:03 发布

moskidogu

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量375

点赞数 1

分类专栏： web design 文章标签： css stylesheet float border menu html

web design 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<head>
<title>Menus</title>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box">
<h4>已知宽度</h4>
<ul id="menu1">
   <li><a href="#">Item1</a> </li>
   <li><a href="#">Item2</a> </li>
   <li><a href="#">Item3</a> </li>
   <li><a href="#">Item4</a> </li>
</ul>
<h4 style="CLEAR: both">未知宽度</h4>

<ul id="menu2">
   <li><a href="#">Item1</a> </li>
   <li><a href="#">Item2</a> </li>
   <li><a href="#">Item3</a> </li>
   <li><a href="#">Item4</a> </li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
#menu1 {
    width:408px;
    padding:0;
    margin:0 auto;
    list-style-type:none;
    }
#menu1 li {
    float:left;
    width:100px;
    border:1px solid #fff;
    }
#menu1 a {
    display:block;
    width:100px;
    color:#000;
    background:#d4d4d4;
    text-align:center;
    padding:4px 0;
    text-decoration:none;
    float:left;
    }
#menu1 a:hover {
    color:#fff;
    background:#08c;
    }
#menu2 {
    display:table;
    padding:0;
    margin:0 auto;
    list-style-type:none;
    white-space:nowrap;
    }
#menu2 li {
    display:table-cell;
    }
* html #menu2 li {
    float:left;
    }
#menu2 a {
    width:auto;
    display:block;
    padding:4px 16px;
    color:#fff;
    background:#08c;
    border:1px solid #fff;
    text-decoration:none;
    }
* html #menu2 a {
    float:left;
    }
#menu2 a:hover {
    color:#000;
    background:#d4d4d4;
    }
.container {display:inline-block;text-decoration: none;}
h4,p{margin: 0;padding: 1em;}
#box{width: 100%;}

moskidogu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css菜单代码

Menus已知宽度 Item1 Item2 Item3 Item4 未知宽度 Item1 Item2 Item3 Item4 @charset "utf-8";/* CSS Document */#menu1 { width:408px; padding:0; margin:
复制链接

扫一扫