Primer Diseño CSS El objeto multimedia

Primer CSS es un marco CSS gratuito y de código abierto que se crea utilizando el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Ayuda a crear la base de los elementos de estilo básicos, como el espaciado, los componentes, la tipografía, el color, etc.

En este artículo, veremos sobre el objeto multimedia en el diseño básico de CSS. Un objeto de medios es un tipo de contenedor que consta de imágenes y textos y está compuesto por las principales utilidades de CSS.

Clases de objetos de medios de Primer CSS Layout: para crear un objeto de medios en Primer CSS, Primer CSS no proporciona una clase específica. Necesita compilar diferentes clases de acuerdo a su necesidad.

Sintaxis:

<div class="clearfix p-3 border">
    <div class="float-left p-3 mr-3 color-bg-subtle">
        ...
    </div>
    <div class="overflow-hidden">
        <p>...</p>
    </div>
</div>

Ejemplo 1: El siguiente ejemplo muestra un contenedor de objetos multimedia.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Primer CSS</title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          rel="stylesheet" />
</head>
  
<body>
    <div class="m-4">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>Primer CSS Layout Media Object</h2>
    </div>
  
    <div class="clearfix p-3 border m-4">
        <div class="float-left mr-3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" 
                 width="80" alt="">
        </div>
        <div class="overflow-hidden">
              
<p>Welcome to GeeksforGeeks! It is a place 
              for all coders and geeks who want to learn
              computer science skills.</p>
  
        </div>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente ejemplo muestra un contenedor de objetos multimedia de doble cara con un centro flexible.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Primer CSS</title>
    <link href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          rel="stylesheet" />
</head>
  
<body>
    <div class="m-4">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>Primer CSS Layout Media Object</h2>
    </div>
  
    <div class="clearfix p-3 border m-4">
        <div class="float-left mr-3">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" 
                 width="80" alt="">
        </div>
        <div class="float-right ml-3 p-5 color-bg-success">
            GFG Premium
        </div>
        <div class="overflow-hidden">
              
<p>Are you a Geek! Then where are you,
                come and explore GeeksforGeeks premium portal
                and get premium job access to all the jobs.</p>
  
        </div>
    </div>
</body>
  
</html>

Producción:

Referencia: https://primer.style/css/utilities/layout#the-media-object

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta