个人中心
gpt4 book ai didi

html - 无法让我的页面响应移动设备

转载 作者：行者123 更新时间：2023-11-28 04:16:20 25 4
gpt4 key购买 nike

我看过教程并在这个网站上查看过，但无论我做什么 无法让我的页面响应移动设备。我想要顶部的图像 下面一个很好的段落中的文字。我是 html 和 css 的新手，我不知道 任何其他人。我添加的代码是我尝试制作之前的原始代码 react 灵敏。 

   <DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home</title>
   <link rel="stylesheet" type="text/css" href="merchandise.css"
   </head>



    <div class="header">
    <img class="banner-image" src="ccc.png" width="100%" height="150px">




    </div>

    <ul class="nav">



    <li><a href="index.php">Home</a></li>
    <li><a href="aboutus.php">About Us</a></li>   
    <li><a href="menu.php">Menu</a></li> 
    <li><a href="entertowin.php">Enter to Win</a></li> 
    <li><a href="merchandise.php">Merchandise</a></li> 
    <li><a href="events.php">Events</a></li> 
    <li><a href="contactus.php">Contact Us</a></li>

    </ul>  







     <style>

    .float-img {
     float: left;
     margin-right: 10px;
     margin-left: 5px;    
     margin-bottom: 0px;
     margin-top: 10px;
     padding: 2px;
     border: none;
     border-color: #ffb6c1ff;

     }



      </style>



   <body>

    <img src="british-shorthair-3055340_1920.jpg" width:"400" height="400" 

   class="float-img">

    <style>

    p {margin-left: 250px; margin-top: 40px;
     margin-right: 20px;
     line-height: 38px;
    } 

    </style>

   <font size="5" color="#00b8e6" font-align: center > 


   <p>



  Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute 
   cat themed foods and drinks in a relaxing environment. Spend some quality 
  time 
playing with some feline friends. Enjoy watching the cats have fun in an 
environment made just for them. All cats will be adoptable and provided by 
the local shelter. Cat Corner Cafe will also have fun events like cat yoga, 
art with cats and game days. Come by yourself, with your meetup group or 
have your next birthday party here! We look forward to seeing you. To be 
alerted when we open please sign up with your email on our homepage.


   </p>
    </text>
  </body>


   </head>
   </html>


    body {
   margin: 0;
   padding: 0;
  font-family: 'arial', serif;
   }

  .nav {
  background-color:#ffb6c1;
  color:#ffffff
   list-style: none;
   text-align: center;
   padding: 20px 0 20px 0;

 }

  .nav > li {
  display: inline-block;
  padding-right: 50px;
  font-size: 16px;

  }

   .nav> li > a {
   text-decoration: none;
   color: #ffffff
   }

   .nav > li > a:hover {
   color:   #C0C0C0
   }

   .banner {
   width: 100;
   display: block;


   }

   .banner > .bannerimage {
   width: 100;
   height: 100;
   display: block;


   }

  ul.nav{
  margin: 0;
  }

 div.left {
 width: 50%; 
 padding: 0 0 0 5%;
 margin-right: 5px;
 margin-top: 10px;
 float: left}


 div.right {
 width: 50%; 
 padding: 0 5% 0 0;
 float: right}
 p {
 padding-top: 25px;
 text-align: left;
  }

最佳答案

首先修复您的 HTML!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="merchandise.css">    

  <style>

    .float-img {
    float: left;
    margin-right: 10px;
    margin-left: 5px;    
    margin-bottom: 0px;
    margin-top: 10px;
    padding: 2px;
    border: none;
    border-color: #ffb6c1ff;
    }

    p {
    margin-left: 250px; 
    margin-top: 40px;
    margin-right: 20px;
    line-height: 38px;
    } 


    @media (max-width: 1024px) {

    body img {
    max-width: 100px;
    height: 100px;
    }

    body div img {
    max-width: 50px;
    height: 50px;
    }
    
    }


  </style>

</head>  
<body>
    <div class="header">
      <img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
    </div>

    <ul class="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="aboutus.php">About Us</a></li>   
      <li><a href="menu.php">Menu</a></li> 
      <li><a href="entertowin.php">Enter to Win</a></li> 
      <li><a href="merchandise.php">Merchandise</a></li> 
      <li><a href="events.php">Events</a></li> 
      <li><a href="contactus.php">Contact Us</a></li>
    </ul>  

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400"> 

   <div class="float-img">
     <p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute 
cat themed foods and drinks in a relaxing environment. Spend some quality 
time playing with some feline friends. Enjoy watching the cats have fun in an 
environment made just for them. All cats will be adoptable and provided by 
the local shelter. Cat Corner Cafe will also have fun events like cat yoga, 
art with cats and game days. Come by yourself, with your meetup group or 
have your next birthday party here! We look forward to seeing you. To be 
alerted when we open please sign up with your email on our homepage.</p>
   </div>
  </body>
</html>

现在对于没有框架的正确解决方案使用 @media 查询。做好功课here .

现在为您提供获得此响应的简单解决方案是研究使用 HTML 框架，例如著名的 Bootstrap ，你必须学习 allot 才能完全理解它背后的力量，但 Bootstrap 有很好的文档来帮助你。

关于html - 无法让我的页面响应移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49535998/

25 4 0
文章推荐： html - 无法覆盖第 nth-child 中设置的样式
文章推荐： html - 如何减慢悬停时的文本速度？
文章推荐： c++ - 限制数组类型的大小，同时还没有实例
文章推荐： jquery - 使用纯 HTML + CSS 的表格行的最大高度
行者123
个人简介

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

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