Flexbox菜单项目实战

最新推荐文章于 2023-10-27 13:48:42 发布

原创最新推荐文章于 2023-10-27 13:48:42 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

HTML5/CSS3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个简单的响应式菜单设计案例，使用HTML和CSS实现不同屏幕尺寸下的布局效果。通过Flexbox布局实现移动优先的设计原则，并在宽度达到480px和768px时调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="begin.css" rel="stylesheet" type="text/css">
</head>

<body>
    <!-- 响应式菜单html架构 -->
    <ul class="menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Sass</a></li>
        <li><a href="#">Ruby</a></li>
        <li><a href="#">Mongo</a></li>
    </ul>
</body>
</html>

begin.css

/**
    移动优先原则，优先实现小屏幕下的布局
*/
.menu{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-flow:row wrap; /* 水平方向 换行 */
}
.menu li{
    height:40px;
    text-align:center;
    line-height:40px;
    /* 扩展比例为1，缩放比例为1，初始大小为100% */
    flex:1 1 100%;
}
.menu li:nth-child(1){
    background-color:#39ADD1;
}
.menu li:nth-child(2){
    background-color:#3079AB;
}
.menu li:nth-child(3){
    background-color:#982551;
}
.menu li:nth-child(4){
    background-color:#E15258;
}
.menu li:nth-child(5){
    background-color:#CC6699;
}
.menu li:nth-child(6){
    background-color:#52AC43;
}
.menu li a{
    color:#fff;
    text-decoration:none;
}
@media (min-width:480px){
    .menu li{
        flex:1 1 50%;
    }
}
@media (min-width:768px){
    .menu{
        flex-flow:row nowrap;   /* 水平方向 不换行 */
    }
}