Question

我正在从事营销项目，我希望允许客户配置其目标网页，该目标网页将包含图像作为广告，页面布局将是这样的

--------------------------------------------------------------------------
|                Horizontal ADS AS IMAGE                                   |                       
--------------------------------------------------------------------------
|  V  |                                                              | V   |
|  E  |                                                              | E   |
|  R  |                                                              | R   |
|  T  |                       MAIN                                   | T   |
|  I  |                                                              | I   |
|  C  |                                                              | C   |
|  A  |                                                              | A   |
|  L  |                                                              | L   |

我尝试了很多，但是没有成功。当通过电话打开页面时，设计会非常糟糕，左垂直图像将显示在顶部水平图像之下，然后显示在主要部分之下，然后右垂直图像将显示在主要部分之下，在主要部分中，我不知道如何让设计保持在计算机中，我将添加视频，所以请告诉我该怎么做我尝试使用此代码，但正如我所说的那样，用手机打开页面时，设计会很糟糕

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Layout Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
   <div class="col-sm-6 col-md-8 col-lg-12">
            <img src="728x90.png"/>


	   </div>
   </div>
    <div class="row">
        <div class="col-sm-3 col-md-4 col-lg-2">
           <img src="fdf_9x_en.jpg" />
	   </div>
        <div class="col-sm-6 col-md-4 col-lg-8">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
            <p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
      
        <div class="col-sm-3 col-md-4 col-lg-2">
        <img src="fdf_9x_en.jpg" />
	  </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-12">
            <footer>
                <p>&copy; Copyright 2013 Tutorial Republic</p>
            </footer>
        </div>
    </div>
</div>
</body>
</html>

fdf_9x_en.jpg是垂直图像

Answer 1

您是否正在使用CSS文件？您需要使用media queries，还可以使用CSS Grid，它可以让您指定事物是如何收缩和增长的，以及它们根据视口的百分比占据了多少空间。希望这些链接可以帮助您大致了解所需的方向，因为仅查看HTML并不太有用。

使响应广告页面HTML引导

1 个答案: