Создание адаптивного баннера [закрыто]

316

15 декабря 2016, 16:28

Как можно сделать адаптивный баннер? Баннер используется на страницы SharePoint 2010, необходимо решение на CSS, без использования bootstrap и других фреймворков.

Вот его разметка:

<div style="background-image: url(../img/Capture.PNG); background-repeat: no-repeat; height:60px; width: 150px; float:left; padding:1px;"></div><!-- Page banner - Code start -->
<div style="background-color: #FFF; height:60px; width: 2px; float:left; padding:1px;"></div>
<div style="background-color: #82BED3; height:60px; width: 5px; float:left; padding:1px;"></div>
<div style="background-color: #009DD8; height:60px; width: 1px; float:left; padding:1px;"></div>
<div style="background-color: #5FB4DF; height:62px; width: auto; color: #FFF; font-size: 12pt; font-family: Arial, Helvetica, sans-serif; float:left; padding-left: 20px; padding-right: 10px; margin-bottom: 10px;"><h1 style="margin-top: 12px;">Welcome to site</h1></div>
<div style="background-color: #009DD8; height:60px; width: 1px; float:left; padding:1px;"></div>
<div style="background-color: #FFF; height:60px; width: 5px; float:left; padding:1px;"></div>
<div style="background-color: #BFE9F5; height:60px; width: 40px; float:left; padding:1px;"></div>
<div style="background-color: #EBEBEB; height:60px; width: 14px; float:left; padding:1px;"></div>

Answer 1

Для создания "адаптивного баннера" используйте, например, Bootstrap. Почитать можно здесь. Да и вообще в гугле кишит статьями на эту тему.

Простой баннер с ипользованием Bootstrap будет выглядеть как-то так:

<!DOCTYPE html>
<html>
    <head>
    <title>Адаптивный баннер</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-4 text-center" style="background-color:#5FB4DF; color:white;"><h1>Welcome to site</h1></div>
        </div>
    </div>
</body>
</html>