Question

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

using AutoMapper;

namespace Repositories.Repositories
{
    public class DashboardRepository : IRepository<domain.Dashboard>
    {
        private readonly DbContext context;
        private readonly IMapper mapper;

        public DashboardRepository(DbContext context, IMapper mapper)
        {
            this.context = context;
            this.mapper = mapper;
        }

        public async Task<domain.Dashboard> Create(domain.Dashboard dashboard)
        {
            var entityToCreate = mapper.Map<domain.Dashboard, dbModels.Dashboard>(dashboard);

            var createdEntity = context.Add(entityToCreate);
            await context.SaveChangesAsync();

            var createDashboard = mapper.Map<dbModels.Dashboard, domain.Dashboard>(dashboard); 
        }

Answer 1

先修复您的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，您必须学习分配以充分了解其功能它背后但是Bootstrap有很好的文档可以让你前进。

Answer 2

您必须先修复代码（html内容），然后学会使用媒体查询。

使用媒体查询，您可以定位不同的设备并编写仅适用于这些设备的特定CSS。

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

请勿学习框架

您应首先构建您的HTML和CSS知识，并在学习任何框架之前对其进行深入了解。这将确保当您学习任何框架时，您将能够使框架按您希望的方式工作 ..如果您现在开始依赖框架，您将按照到框架

Answer 3

像之前的回答一样

你必须先修复你的代码（html东西）

但是，如果你现在不想花大量时间学习媒体查询或在CSS中编写一些规则，我建议你使用框架并跳过设计部分，同时仍然制作你的页面看起来很简洁，看起来很整洁。

我建议你看一下Tacit CSS框架。它非常适合缺乏CSS和设计技能的人，而且不需要从头开始创建CSS规则，只需要担心HTML代码，并且需要包含Tacit的CSS文件。

Answer 4

使用CSS框架。我会推荐bootstrap CSS框架。它将为您处理所有这些。 UIkit和Foundation也是不错的选择。

Answer 5

为了在css中将图像视为实体对象，它必须具有“display：block;”属性。您可能还需要为文本段落设置相同的样式属性。

尝试以下方法：

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

说明： https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display

Answer 6

看看bootstrap http://getbootstrap.com/它是用于制作响应式网站的html / css框架。看看如何制作网格布局。

您可以自己深入了解媒体查询，但如果您使用框架https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

则不需要这样做

无法让我的页面对移动设备做出响应

6 个答案: