html+css 写一个简易的菜单

Dear 丶 2022-06-04 05:07 183阅读 0赞

**最终效果**

![Image 1][]

**结构**

表现

*{ margin: 0; padding: 0; box-sizing: border-box; } body,html{ background-color: #eee; } ul,li{ list-style: none; /*列表样式：无。*/ list-style-type: none;/*列表无标记*/ } a,a:active,a:focus,a:hover{ text-decoration: none; /* 文本修饰：无 */ color: inherit;/*inherit 关键字指定一个属性应从父元素继承它的值。*/ } input{/*内边距和边距不再会增加它的宽度*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .menu-list{ background-color: white; width: 88%; height: 48px; line-height: 48px; display: flex; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; position: absolute; z-index: 8; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } .menu-list::-webkit-scrollbar{ display: none; } .menu-list>li{ height: 100%; padding: 0 10px; position: relative; font-size: 13px; } .menu-list>li:not(:last-child):before{ content: "|"; position: absolute; top: -1px; right: -2px; color: lightgray; } .more{ width: 12%; float: right; text-align: center; height: 48px; line-height: 44px; background-color: white; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; } .more>.icon{ height: 20px; vertical-align: middle; }

**一、初始结构**

![Image 1][]

**二、**

![Image 1][]

.menu-list{ width: 88%; display: flex; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; position: absolute; z-index: 8; height: 48px; line-height: 48px; background-color: white; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; }

.menu-list::-webkit-scrollbar{ display: none;隐藏滚动条 }

**思路分析：**

1、将 ul 的宽度设为 88%，留出 12% 给加号图片。

2、使用 display:flex 进行默认的 flex 布局。

3、将 菜单的 设为横向裁剪显示滚动条可滚动，overflow-x: scroll;

纵向裁剪不提供滚动机制 overflow-y: hidden;

不换行(没有这个设置， overflow-x: scroll不起作用)  white-space:nowrap;

4、position: absolute; 这里使用绝对定位，是为了脱离文档流，让j图片能够与 ul 同行

**三、**

![Image 1][]

.menu-list>li{ height: 100%; padding: 0 10px; position: relative; font-size: 13px; } .menu-list>li:not(:first-child):before{ content: "|"; position: absolute; top: -1px; left: -2px; color: lightgray; }

**思路分析**

1、给除去第一个 li 标签的 li 设置 before  .menu-list>li:not(:first-child):before 为元素。

**四、**

**![Image 1][]**

.more{
    	width: 12%;
    	float: right;
    	text-align: center;
    	height: 48px;
    	line-height: 44px;
    	background-color: white;
    	border-top: 1px solid #EEEEEE;
    	border-bottom: 1px solid #EEEEEE;
    }
    
    .more>.icon{
    	height: 20px;
    	vertical-align: middle;
    }

**思路分析**

1、将宽度设为 12%，再将其 右浮动，刚好和 ul 同行 100%。

[Image 1]: