个人中心
gpt4 book ai didi

html - 如何使用CSS调整菜单大小

转载 作者：行者123 更新时间：2023-11-27 23:08:00 24 4
gpt4 key购买 nike

我希望我的右对齐水平菜单在调整浏览器大小时缩小到一定程度。但是在一定大小之后，它应该保持绝对或不变，如 in this site.我是 CSS 的新手，所以找不到正确的解决方案。我不知道我是否应该使用js。可以用 css 做到这一点吗？

Here is jsfiddle:

这是我做的:

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

.header1 {
  background-image: url("header_bg.jpg");
  height: 580px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 55% 45%;
}

.header2 {
  height: 580px;
  background-color: white;
}

.header3 {
  height: 580px;
  background-color: #E4EBF5;
  background-image: url("pc.jpg");
}

.header4 {
  height: 200px;
}

.header5 {
  height: 400px;
  background-image: url("köprü.jpeg");
  background-attachment: fixed;
  background-size: 100% 100%;
  opacity: 0.95;
}

.header6 {
  height: 600px;
}

.navbar1 {
  height: 88px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.imglogo {
  position: absolute;
  left: 175px;
  top: 32px;
}

a.ad {
  position: absolute;
  left: 215px;
  top: 22px;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  color: white;
  transform: perspective(0.1px) scale(1.0);
  /****** çok iyiiiiiiiiiiiiiii. smooth text effect!!! ******/
}

.çizgi {
  box-shadow: inset 0px 6px 0px #F2595B;
}

ul.menu {
  padding-left: 980px;
  height: 88px;
}

ul.menu>li {
  float: left;
  margin-left: 17px;
  position: relative;
}

ul.menu>li>a {
  display: block;
  font-size: 12.4px;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  color: white;
  line-height: 88px;
}

ul.menu ul {
  width: 180px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.2);
  padding-top: 15px;
  position: absolute;
  top: 88px;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 300ms ease-out;
  -moz-transition: opacity 300ms ease-out;
  -o-transition: opacity 300ms ease-out;
  transition: opacity 300ms ease-out;
  visibility: hidden;
}

ul.menu ul li a {
  display: block;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: bold;
  padding: 6px 20px;
}

ul.menu>li ul ul {
  top: 30px;
  width: 180px;
  height: 70px;
  left: 180px;
}

ul.menu>li:hover>ul {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 300ms ease-out 300ms;
  -moz-transition: opacity 300ms ease-out 300ms;
  -o-transition: opacity 300ms ease-out 300ms;
  transition: opacity 300ms ease-out 300ms;
}

ul.menu>li:hover {
  display: block;
  box-shadow: inset 0px 6px 0px #F2595B;
}

ul.menu ul li:hover>ul {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 300ms ease-out 300ms;
  -moz-transition: opacity 300ms ease-out 300ms;
  -o-transition: opacity 300ms ease-out 300ms;
  transition: opacity 300ms ease-out 300ms;
}

.yazzı {
  position: absolute;
  font-size: 47px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  text-align: center;
  top: 190px;
}

.yazzı2 {
  position: relative;
  font-size: 30px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  top: 160px;
  text-align: center;
}

button {
  position: absolute;
  top: 500px;
  left: 500px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="oylesine.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">

</head>

<body>

  <div class="header1">
    <div class="navbar1">

      <ul class="menu">
        <li class="çizgi"><a href="">About us</a></li>
        <li><a href="">Our services</a>

          <ul>
            <li><a href="">News</a></li>
            <li><a href="">Events</a>

              <ul>
                <li><a href="">Set up</a></li>
                <li><a href="">Marketing</a></li>

              </ul>
            </li>

            <li><a href="">Prices</a></li>

          </ul>
        </li>

        <li><a href="">Clients</a></li>
        <li><a href="">Careers</a></li>
        <li><a href="">Contacts</a></li>
      </ul>


      <img src="logo.png" class="imglogo" alt=""> <a href="" class="ad">MailJet</a>
    </div>




    <div class="yazzı">
      <p> Meet The Mail Jet</p>
    </div>
    <div class="yazzı2">
      <p> The Best Mail Service On The Web!</p>
    </div>

    <div class="btn">
      <button type="button">Sign Up</button>
    </div>

  </div>


  <div class="header2"></div>
  <div class="header3"></div>
  <div class="header4"></div>
  <div class="header5"></div>
  <div class="header6"></div>

</body>

</html>

我能做什么？

最佳答案

在您的菜单 CSS 上，您可以尝试同时使用 width 和 max-width。

例如

.menu{
width: 400px;
max-width :85%;
}

这意味着您的宽度将为 400 像素，但如果您的屏幕宽度足够窄，最大宽度将生效，您的菜单将只占用 85%。

您还可以利用最小宽度等。

关于html - 如何使用CSS调整菜单大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58658425/

24 4 0
文章推荐： html - CSS三 Angular 形背景
文章推荐： c++ - 插入排序问题？
文章推荐： c++ - OpenGL GLut 在 Windows 8 64 位上与 Visual Studio 2013 的链接问题
文章推荐： c++ - (C++) 如何验证 char 变量的用户输入？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com