制作一个响应式的下拉菜单的方法
P粉521013123
2023-09-04 15:47:42
<p>汉堡菜单图标应该在右侧,图片应该在左侧。</p>
<p>当我们点击菜单打开时,它应该展开一个下拉菜单,里面应该有logo home <em>About us</em> gallery contact。</p>
<pre class="brush:html;toolbar:false;"><div class="rectangle1">
<ul class="dropdown">
<li class="li1"><a href="home.html"><img class="img" src="YOGI Logo.svg" alt=""> </a></li>
<li class="li2"><a class="a1" href="#home">Home</a></li>
<li class="li3"><a class="a2" href="aboutus.html">关于我们</a></li>
<li class="li4"><a class="a3" href="gallery.html">图库</a></li>
<li class="li5"><a class="a4" href="contact.html">联系我们</a></li>
<a class="Contact_Us" href="contact.html">
<img class="Contact-us-img"src="Vector.svg" alt="">
<span class="Contact-us-text">联系我们</span>
</a>
</ul>
</div>
</pre>
<p>我只需要将其转换为CSS。</p>
<p>我需要它适应 iPhone 14 Pro 的响应式设计,以成为一个汉堡菜单。</p>
我认为这可能对你有帮助:CSS @media Rule。正如你在教程中所看到的,CSS有一种方法可以检查屏幕的宽度。
在这个例子中,当宽度小于600像素时,背景颜色将被设置为浅蓝色。使用这个规则,你可以相应地改变你的CSS。
你应该尝试自己实现它,而不仅仅是从互联网上复制粘贴。去尝试,享受使用CSS的乐趣;这是学习它的唯一方式。
这是修改后的CSS代码,用于实现响应式汉堡菜单:
CSS(styles.css):