Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/34: Рейтинг темы: голосов - 34, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 02.11.2012
Сообщений: 43

Вставить 4 картинки в разных местах страницы

28.12.2013, 02:14. Показов 6680. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте ! вы не могли бы мне помочь с заданием:необходимо вставить 4 картинки ( в разных местах).
первая картинка должна быть прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей. При наведении на картинку курсора должна появиться надпись - "моё фото". Вторую фотографию расположить у правого края, обтекание слева, толщина рамки 3 пикселя. Остальные картинки разместить произвольно, применив к ним все атрибуты тега <img>.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
28.12.2013, 02:14
Ответы с готовыми решениями:

Элементы находятся в разных местах в разных браузерах
В Хроме всё отображается как нужно, в Мозилле - надпись &quot;Вертянка&quot; уходит далеко от синей штуки. Как можно подправить, чтоб во всех...

Отображение кода в разных местах на разных разрешениях
Всем доброго времени суток! Возникла задача отображать код в разных местах на разных разрешениях. Прилагаю картинку, там все...

Идентификатора в разных местах
Пробую просто по разному пробовать создавать. Встретил ещё такой стиль: #coolmenu a{ font: bold 13px Verdana; /*Шрифт текста*/ ...

11
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
28.12.2013, 03:18
ну, как вариант:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="float:left;width:400px">
<img src="путь до вашей картинки" width="300" title="мое фото" style="float:left;margin:0 30px 0 0;border:3px solid #c0c0c0">
<p>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
</p>
</div>
<div style="float:right;width:600px">
<img src="путь до вашей картинки" width="400" title="мое фото" style="float:right;margin:0 0 0 30px;border:3px solid #c0c0c0">
<p>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
</p>
</div>
<img src="путь до вашей картинки" alt="picture" width="200" height="100"  align="center"  border="3" hspace="50" vspace="50">
<img src="путь до вашей картинки" title="мое фото" alt="picture" width="300" height="200"  align="left"  border="3" hspace="50" vspace="50">
вот, что получается:

 Комментарий модератора 
Прикрепляйте файлы и изображения к сообщениям.
https://www.cyberforum.ru/abou... 03521.html
2
0 / 0 / 0
Регистрация: 02.11.2012
Сообщений: 43
29.12.2013, 01:09  [ТС]
а картинку надо в ту же папку вставить?
0
1 / 1 / 1
Регистрация: 06.07.2013
Сообщений: 14
29.12.2013, 01:13
как хочешь.. если у тебя картинка в другой папке то укажи в img src="название_папки/название_картинки.жпг" или если картинки в той же папке, что и html документ, то img src="название_картинки.жпг"
1
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
30.12.2013, 02:23
Картинку можно положить в любую папку, просто после этого нужно задать правильный путь. Если html-файл и картинка лежат в одной и той же директории, то путь такой: src="название картинки.расширение". Если же в другой , то есть 2 варианта: картинка в директории уровнем(уровнями) выше или уровнем(уровнями) ниже. В зависимости от этого нужно будет писать путь.
Совет. Если пока что не очень понятно, как писать пути, то лучше положить картинку в ту же директорию, что и html-файл, и воспользоваться первым вариантом.
1
0 / 0 / 0
Регистрация: 02.11.2012
Сообщений: 43
02.01.2014, 21:57  [ТС]
а как сделать документ ,который должен содержать два заголовка первого и второго уровня, в каждом из которых должны быть пронумерованные списки из трёх позиций. Каждая позиция в первом списке должна быть ссылкой на три другие страницы html (page1, page2, page3, которые вы также должны создать), расположенные во вложенных папках LR1, LR2, LR3 соответственно. То есть, при нажатии этих ссылок из главной страницы должны открываться другие ваши страницы в окне браузера. В каждой из этих второстепенных страниц сделайте ссылку на главную страницу. В документе page1 на всё окно браузера должна открываться фотография. В документе page2 разместите две картинки, обтекаемые текстом слева.??
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
03.01.2014, 00:13
<h1></h1>
дальше список
<h2></h2>
дальше список
Цитата Сообщение от Napoleon Посмотреть сообщение
В документе page1 на всё окно браузера должна открываться фотография
это делается любой из jquery библиотек, а
Цитата Сообщение от Napoleon Посмотреть сообщение
В документе page2 разместите две картинки, обтекаемые текстом слева
просто страница с (код использовать дважды)
HTML5
1
2
3
4
5
6
<div style="float:right;width:600px">
<img src="путь до вашей картинки" width="400" title="мое фото" style="float:right;margin:0 0 0 30px;border:3px solid #c0c0c0">
<p>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 
</p>
</div>
1
0 / 0 / 0
Регистрация: 02.11.2012
Сообщений: 43
03.01.2014, 01:11  [ТС]
т. е так?
Code
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
<html>
 
   <head>
     <title> Учебный сайт </title>
     <base href="http://www.my_site.ru/">
     <script type="text/javascript" src="function.js">     </script>
   </head>
<body>
      <h1>Это заголовок первого уровня</h1>
      <h2>Это заголовок второго уровня</h2>
 
 
   <body bgcolor="khaki" leftmargin="100" topmargin="50"
         rightmargin="50" bottommargin="50" text="blue"
         alink="red" vlink="green">
      Как бы просто текст
      <br>
      <a href="index.html">Ссылка на страницу index.html</a>
      <br>
      <a href="map.html">Ссылка на страницу map.html</a>
   </body>
<div style="float:left;width:400px">
<img src="zima-vesna.jpg" width="300" title="мое фото" style="float:left;margin:0 30px 0 0;border:3px solid #c0c0c0">
<p>
Пусть каждая минута жизни будет яркой, 
насыщенной, необыкновенной,
полной незабываемых впечатлений
и приятных сюрпризов!
 
</p>
</div>
<div style="float:right;width:600px">
<img src="zima-vesna.jpg" width="400" title="мое фото" style="float:right;margin:0 0 0 30px;border:3px solid #c0c0c0">
<p>
Пусть дует лишь попутный ветер
И путь по волнам будет светел,
Пусть море счастья будет бурным,
А берег – тёплым и лазурным!
</p>
</div>
<img src="zima-vesna.jpg" alt="picture" width="200" height="100"  align="center"  border="3" hspace="50" vspace="50">
<img src="zima-vesna.jpg" title="мое фото" alt="picture" width="300" height="200"  align="left"  border="3" hspace="50" vspace="50">
</body>
</html>
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
03.01.2014, 02:22
да, только после h1
HTML5
1
2
3
4
5
6
7
8
<ul>
  <li>пункт 1
  </li>
  <li>пункт 2
  </li>
  <li>пункт 3
  </li>
   </ul>
1
0 / 0 / 0
Регистрация: 02.11.2012
Сообщений: 43
03.01.2014, 02:34  [ТС]
получается так,это верно?
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
03.01.2014, 02:48
да, именно так. это решение задачи?
1
0 / 0 / 0
Регистрация: 02.11.2012
Сообщений: 43
03.01.2014, 03:16  [ТС]
спасибо!!!все понятно уже..разобрались)))текст подкорректировали и все..все получилось!!!!спасибо,благодаря вам
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
03.01.2014, 03:16
Помогаю со студенческими работами здесь

Одна и та же переменная в разных местах
Доброго времени суток. Проблема такая. Есть скрипт который рассчитывает прирос ресурса и итоговый результат отображается на экране. ...

Курсор в разных местах экрана
Подскажите как сделать так чтобы при включении таймера курсор переносился в другое место экрана

Нарисовать в разных местах экрана треугольник
Нарисовать в разных местах экрана треугольник, квадрат, стороны которого параллельны осям координат, эллипс и закрашенный круг.

Почему using namespace std в разных местах?
Почему в одной программе начало такое #include &lt;iostream&gt; using namespace std; int main() { int i; for (i=0; i&gt;5; i++)...

7-ка 32bt зависает наглухо в разных местах!
Доброго времени суток!!) Система может зависнуть при входе в систему. уже когда в системе, при запуске каких нибудь прог. ну вообщем как...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
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(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru