简单的css响应式菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
#home {
width: 100%;
height: 100vh;
background-color: #343a40;
position: relative;
background-image: url(../2021-img/街道,房屋.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#home .centent {
width: 90%;
height: 80vh;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#home .centent ul {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
color: #ced4da;
/* border: 1px solid; */
text-align: center;
list-style-type: none;
}
#home .centent ul h2 {
text-align: left;
}
#home .centent ul li {
width: 100%;
height: 100%;
/* counter-increment
这个属性代表递增一个或多个计数器的值;其默认值为none;其属性值有 none ,id number ,inherit三个属性值
none:代表没有计数器递增。
id number:id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
inherit: 继承父类的属性值。 */
counter-increment: li;
cursor: pointer;
font-size: 7vh;
margin-top: 20px;
margin-bottom: 20px;
font-family: YouYuan;
mix-blend-mode: screen;
color: #ced4da;
}
#home .centent ul li::before {
content: counter(li);
color: #e9ecef;
width: 25px;
height: 25px;
margin-right: 20px;
line-height: 25px;
border-radius: 7px;
display: inline-block;
/* box-shadow: 5px 5px 12px rgb(0, 0, .3); */
text-align: center;
transition: all 0.4s ease;
}
#home .centent ul li:hover::before {
transform: translateX(10px);
color: orange;
}
</style>
</head>
<body>
<div id="home">
<div class="centent">
<ul>
<h2>将鼠标移入下方选项:</h2>
<li>选项左侧数字随用户的选项</li>
<li>而发生向右的移动</li>
<li>同时带有颜色的变化</li>
<li>一个简单的响应式菜单</li>
</ul>
</div>
</div>
</body>
</html>
算是…很简单的响应式布局了,
图片附上,感觉自己现在还在过渡,还有好几个比较麻烦的要做
欢迎批评,确实有很多地方没有注意
希望得到指正awsl