Сделать отзывчивую рекламную страницу html начальной загрузки - PullRequest
Новая
       5

Сделать отзывчивую рекламную страницу html начальной загрузки

0 голосов
/ 07 декабря 2018

Я работаю над маркетинговым проектом и хочу разрешить клиентам настраивать свою целевую страницу, которая будет содержать изображения в качестве рекламы, макет страницы будет выглядеть примерно так 

--------------------------------------------------------------------------
|                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 - вертикальное изображение

1 Ответ

0 голосов
/ 07 декабря 2018

Вы используете файл CSS?Вам нужно использовать медиа-запросы , а также вы можете использовать CSS Grid , который позволит вам указать, как вещи уменьшаются и растут, и сколько места они занимают, основываясь на проценте отокно просмотра.Надеемся, что эти ссылки помогут вам получить общее представление о том, в каком направлении вам нужно двигаться, потому что простой просмотр HTML не слишком полезен.

...