- 13, May 2024
- #1
Привет. Я пытаюсь воспроизвести внешний вид веб-сайта моего друга (tuotracara dot com). Я хочу помочь ему, поскольку этот код — настоящая катастрофа, и я думаю, что это хорошее упражнение для практики HTML/CSS.
Однако у меня есть некоторые проблемы с макетом:
Некоторая помощь будет оценена по достоинству.
HTML
- Когда я пытаюсь настроить оболочку высоты для установки фона тела, фон нижнего колонтитула перестает работать должным образом.
- Я не знаю, как разместить видео фиксированной ширины с текстовым контейнером, расположенным слева.
Некоторая помощь будет оценена по достоинству.
HTML
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
@media (max-width:480px) {
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
body {
font:normal 85%/150% "segoe ui",helvetica,sans-serif;
/* background-image:url('images/background.jpg'); */
}
p {
margin-bottom:1em;
}
h2 {
margin-bottom:1em;
}
#top,
#footer,
.widthWrapper {
min-width:48em;
}
.widthWrapper {
overflow:hidden; /* wrap floats */
zoom:1; /* trip haslayout, wrap floats legacy IE */
max-width:60em;
margin:0 auto;
}
#top {
overflow:hidden; /* wrap floats */
width:100%; /* wrap floats legacy IE, report width to .colorBar */
}
h1 {
float:left;
}
.contentWrapper {
width:100%;
float:left;
}
.heightWrapper {
background:#ddd;
}
#content {
position:relative;
zoom:1; /* report width legacy IE */
margin-right:16em; /* must == #extras width */
padding-top:1em;
}
#extras {
float:left;
width:16em;
margin-left:-16em; /* must == negative #extras width */
padding-top:1em;
}
#footer {
background:#000;
color:#fff;
}
#gallery,
#customers {
clear:both;
}
#gallery ul,
#customers ul {
list-style:none;
text-align:center;
padding-bottom:1em;
}
#gallery li,
#customers li {
display:inline;
vertical-align:top;
}
#gallery a,
#customers a {
display:inline-block;
vertical-align:top;
}
#footer a {
color:#fff;
}
#footer .subSection {
float:left;
width:33.33%;
}
#content .subSection {
float:left;
width:49%;
}
#intro .subSection {
float:left;
}
#hola {
width:30em;
}
<!DOCTYPE html><html lang="es"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1,0" > <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv" > <title> TUOTRACARA </title> </head><body> <div class="widthWrapper"><div id="top"> <h1> TUOTRACARA<span><!-- image replacement --></span> <small> Caricaturas en directo para eventos </small> </h1> <!-- #top --></div> <div id="intro"> <div class="subSection" id="hola"> <h2>¡Hola!</h2> <p> Somos un equipo de caricaturistas especializados en caricatura rápida para la animación de eventos.
</p><p> El regalo más original y divertido para que los invitados recuerden tu evento con una sonrisa.
</p><p> Desplazamientos a toda España. </p> <span> Solicite presupuesto.
</span> <!-- .subSection --></div> <div class="subSection" id="video"> <video controls preload="metadata" poster="images/video.jpg" class="fullVideoPlate" > <source src="videos/test1.mpg" type="video/mp4"> <!-- Don't forget your other "required" source formats I'd probably also have a flash fallback here as well as a flash off fallback text.
--> </video> <!-- .subSection --></div> <!-- #intro --></div> <div class="contentWrapper"><div id="content"> <div id="products"> <div class="subSection"> <h2> Caricaturas para bodas y celebraciones <small> ¡Divertidas caricaturas en directo! </small> </h2> <p> Bodas, cumpleaños, comuniones, bautizos, despedidas de soltero y todo tipo de celebraciones ya han contado con nuestros servicios por toda España. </p> <p> Tuotracara te ofrece dar una pincelada de humor a la celebración con divertidas caricaturas en directo para los invitados.
</p> <p> Las caricaturas proporcionan un ambiente distendido y divertido, los invitados disfrutarán y se reirán alrededor de los dibujos, además de llevarse un recuerdo personalizado.
</p> <p> Podrá disfrutar de nuestras caricaturas en el momento que más le interese.
Cada caricaturista dibuja una media de 12-14 caricaturas por hora.
</p> <!-- .subSection --></div> <div class="subSection"> <h2> Caricaturas para eventos corporativos </h2> <p> Caricaturas en directo para eventos corporativos, deportivos, convenciones, ferias, y todo tipo de evento de empresa.
</p><p> ¡La caricatura es una forma promocional original y divertida! Su poder publicitario radica en que atrae a todos los públicos y que perdura en el tiempo.
</p><p> Incluimos en cada papel vuestro logo o slogan impresos para que sea 3 en 1: animación + regalo + PUBLICIDAD.
</p><p> Nuestros caricaturistas son especialistas en caricatura rápida tardando aproximadamente 3-4 minutos en en blanco y negro, y 5-6 minutos en color (por persona). </p><p> También dibujamos caricaturas digitales en tablet.
Sesión de caricaturas en iPad y caricaturas en Samsung Galaxy Note para todo tipo de eventos (con env?o digital / impresora portátil + proyección en pantalla). </p> <!-- .subSection --></div> <!-- #products --></div> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <h2> Caricaturas en directo </h2> <ul> <li> Eventos de Navidad </li><li> Jubilación con Humor </li><li> Comuniones y Bautizos </li><li> Eventos de Promoción </li><li> Aperturas e Inauguraciones </li><li> Ferias </li><li> Congresos y Convenciones </li><li> Deportivos y Culturales </li><li> Viajes e Incentivos </li><li> Fiestas Particulares </li><li> Cócteles </li><li> Talleres Infantiles </li> </ul> <h2> Caricaturas en digital </h2> <p> Divertidas caricaturas en directo sobre tablet y enviadas en el momento en formato digital por e-mail.
Con posibilidad de proyección en pantalla e impresora portátil.
</p> <ul> <li> iPad caricaturas </li><li> Samsung Galaxy Note caricaturas </li><li> Microsoft Surface caricaturas </li><li> Wacom caricaturas </li> </ul> <span> Nos desplazamos a toda España. </span> <!-- #extras --></div> <div id="gallery"> <h2> Nuestros caricaturistas en acción </h2> <ul> <li> # </li><li> # </li><li> # </li><li> # </li><li> # </li><li> # </li> </ul> <!-- #gallery --></div> <div id="customers"> <h2> Hemos trabajado para </h2> <ul> <li> # </li><li> # </li><li> # </li><li> # </li><li> # </li><li> # </li> </ul> <!-- #customers, .widthWrapper --></div></div> <div id="footer"> <div class="widthWrapper"> <div class="subSection"> <span> foonet.com.<br> Tel: 000000000<br> Email [email protected] </span> <span> © Tuotracara 2016 - <a href="#">Aviso legal</a> </span> <!-- .subSection --></div> <div class="subSection"> <h2>Asociaciones de dibujantes</h2> <ul> <li> <a href="#"> ISCA </a> </li><li> <a href="#"> ACE </a> </li> </ul> <!-- .subSection --></div> <div class="subSection"> <h2>Con la colaboración de</h2> <ul> <li> <a href="#"> bodas.net </a> </li> </ul> <!-- .subSection --></div> <!-- .widthWrapper --></div> <!-- #footer --></div> </body></html> 
![Обучение составлению семантического ядра Key Collector (28 поток) [февраль 2017]](/assets/images/icons/forum0.png){kind=icon}
![[Чеузов Кирилл] - Сам себе](/assets/images/icons/forum7.png){kind=icon}