Создание универсального HTML элемента/виджета

@Antiplayer · Регистрация: 27.09.2012

Студворк — интернет-сервис помощи студентам

Вопрос такой. Хочу сверстать виджет(или не знаю как назвать), который бы мог вставляться на любой сайт в сети. Хотелось бы, чтобы он был фиксированного размера, например 64х64px и этот размер бы не менялся никогда. А внутри него три дива, которые должны располгаться подобным образом, как во вложении. Заранее спасибо.

@Omion · 20.07.2018, 09:50

Сообщение от Antiplayer

который бы мог вставляться на любой сайт в сети.

Вставляться как он будет? Каким методом ты его интегрируешь на сайт любой?

@master114 · 20.07.2018, 09:54

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
    <style>
        
        .wrap {
            width: 64px;
            height: 64px;
            background: red;
        }
 
        .right-col {
            float: right;
            width: 50%;
            height: 100%;
            background: green;
        }
        
        .top-col {
            height: 50%;
            background: orange;
        }
        
        .bottom-col {
            height: 50%;
            background: purple;
        }
        
        .clearfix {
            content: "";
            display: table;
            clear: both;
        }
    </style>
    
</head>    
<body>
<div class="wrap clearfix">
    <div class="right-col">
    </div>
    <div class="top-col">
    </div>
    <div class="bottom-col">
    </div>
</div>
</body>
</html>

навскидку
размеры можете подставить свои
всякие обнуления стилей не делал
фоновый цвет оставил для наглядности

Добавлено через 1 минуту
хотя виджеты для вставки наверное лучше на JS делать

@Antiplayer · 20.07.2018, 10:14 **[ТС]**

Omion, master114, создаваться он будет JS кодом, но за верстку отвечать css файл, который также будет инжектироваться на сайт. То есть, если очень грубо:

JavaScript
1
2
3
4
5
6
7
8
9
    let newDiv = document.createElement("div");  //как основной контейнер для остальных дивов
    let firstDiv = document.createElement("div");
    let secondDiv = document.createElement("div");
    let thirdDiv = document.createElement("div");
        
    newDiv.className = "newDiv";
    newDiv.append(firstDiv, secondDiv, thirdDiv);
    
    document.body.append("newDiv");

Речь идет про расширение Chrome, и мне надо на некоторые сайты свои кнопочки вставить. Точнее, я все уже вставил и все работает, вот с версткой проблемы

@Omion · 20.07.2018, 10:19

master114, я тебя не осуждаю конечно, но есть flexbox

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Antiplayer 129 / 112 / 39 Регистрация: 27.09.2012 Сообщений: 305

	Создание универсального HTML элемента/виджета 20.07.2018, 09:25. Показов 649. Ответов 4 Метки нет (Все метки) Вопрос такой. Хочу сверстать виджет(или не знаю как назвать), который бы мог вставляться на любой сайт в сети. Хотелось бы, чтобы он был фиксированного размера, например 64х64px и этот размер бы не менялся никогда. А внутри него три дива, которые должны располгаться подобным образом, как во вложении. Заранее спасибо. Изображения 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	20.07.2018, 10:19
	master114, я тебя не осуждаю конечно, но есть flexbox 1