Я разработал небольшой сайт с песочницей для сайта по продаже подержанных автомобилей, это тестовые данные:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div.cardetail1 {
display: table-cell;
width: 800px;
}
div.img {
height: 140px;
}
div.info-1 {
display: table;
padding: 5px;
}
</style>
<title>Used Cars | Auto Trader Localhost test</title>
</head>
<body>
<h3>Used Cars</h3>
<div>
<div class="cardetail1"><h3>FORD MONDEO 1.8i LX</h3></div><div class="cardetail1"><h3>£6,995</h3></div>
<div class="info-1"><img src="placeholder.jpg"></div><div class="info-1">1996, N reg, 5 door hatchback, flame red, 40,000 miles</div>
<div class="info-1">Tel: 0121 xxxxxx</div><div class="info-1">Birmingham</div>
</body>
</html>
Я пытаюсь эмулировать печатные носители (в отдельном файле. html) для версии той же страницы.
Это как это изображение здесь и такого рода рекламы, выравнивая поля, как на этом изображении здесь.
Я знаю, что размеры рекламы - это то, что я мы читаем:
Standard-size advert
width 32.5mm
height 31.5mm
Image 3.2cm wide x 1.5cm heigh
Double-size advert
width 66mm
height 32.5mm
Image 3.6cm wide x 2.1cm high
King-size advert
width 66mm
height 67mm
Image 6.2cm wide x 3cm high
Emperor-size advert
Three imges from standard, same size and same height as standard with space between
width 100.5mm
height 67mm
Я пытаюсь добиться того, чтобы смешать рекламу стандартного размера с изображением и рекламу двойного размера с изображением, как на этой отсканированной фотографии, которую кто-то загрузил .
Кроме того, в CSS я читал, что вы можете сделать изображения черно-белыми, , как это изображение я нашел из журнала сканирования, представляющего собой смесь , используя Отфильтруйте оттенки серого как:
img {
filter: grayscale(100%);
}
Я только экспериментирую с Firefox 56 и 57, поэтому совместимость с разными браузерами пока не важна.
Мои основы c цель - эмулируйте печатный журнал с CSS. Пока я не использую никаких веб-шрифтов и т. Д. c. или CSS правил, это заставляет его выглядеть так, как будто печать является целью.
Я был бы признателен за любую помощь, пытаясь найти способ эмулировать печать для реальной HTML страницы, которая должна выглядеть как Журнал в макете.