Maison >interface Web >tutoriel CSS >Maîtrisez simplement le framework CSS et créez rapidement de belles pages Web

Maîtrisez simplement le framework CSS et créez rapidement de belles pages Web

WBOYoriginal: 2024-01-05 16:37:291059parcourir

Démarrez facilement avec le framework CSS et créez facilement de belles pages Web. Des exemples de code spécifiques sont nécessaires

Avec le développement continu d'Internet, la conception Web est devenue un domaine important. L'émergence du framework CSS (Cascading Style Sheets) a considérablement simplifié le processus de conception Web, permettant aux utilisateurs ordinaires de créer facilement de belles pages Web. Dans cet article, nous présenterons certains frameworks CSS couramment utilisés et fournirons des exemples de code spécifiques pour aider les lecteurs à démarrer rapidement.

1. Framework Bootstrap
Bootstrap est l'un des frameworks CSS les plus populaires actuellement. Il possède des styles et des composants riches, une conception réactive ainsi qu'un support et une documentation étendus. Vous trouverez ci-dessous un exemple de code d'une page Web simple créée à l'aide du framework Bootstrap.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap Website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
</head>

<body>
  <header class="bg-primary text-white text-center py-5">
    <h1>Welcome to My Website</h1>
  </header>

  <div class="container mt-5">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
  </div>

  <div class="container mt-5">
    <h2>Contact Me</h2>
    <form>
      <div class="mb-3">
        <label for="name" class="form-label">Your Name</label>
        <input type="text" class="form-control" id="name">
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Your Email</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="mb-3">
        <label for="subject" class="form-label">Subject</label>
        <input type="text" class="form-control" id="subject">
      </div>
      <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="5"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Dans le code ci-dessus, nous avons introduit les fichiers CSS et JavaScript du framework Bootstrap en référençant le lien CDN. Utilisez ensuite les classes fournies par Bootstrap pour définir des styles et des mises en page. Par exemple, nous utilisons la classe container pour créer un conteneur et utilisons mt-5 pour définir les marges supérieure et inférieure. En même temps, nous utilisons également les classes bg-primary et text-white pour définir la couleur d'arrière-plan et la couleur du texte de l'en-tête. container类来创建一个容器，并使用mt-5来设置上下边距。同时，我们还使用了bg-primary和text-white类来设置头部的背景色和文字颜色。

二、Semantic UI框架
Semantic UI是另一个流行的CSS框架，它注重语义化的设计，并提供了丰富的主题和自定义选项。下面是一个使用Semantic UI框架构建的简单网页的代码示例。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Semantic UI Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>

<body>
  <header class="ui inverted vertical center aligned segment">
    <h1>Welcome to My Website</h1>
  </header>

  <div class="ui container segment">
    <h2>About Me</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
  </div>

  <div class="ui container segment">
    <h2>Contact Me</h2>
    <form class="ui form">
      <div class="field">
        <label for="name">Your Name</label>
        <input type="text" id="name">
      </div>
      <div class="field">
        <label for="email">Your Email</label>
        <input type="email" id="email">
      </div>
      <div class="field">
        <label for="subject">Subject</label>
        <input type="text" id="subject">
      </div>
      <div class="field">
        <label for="message">Message</label>
        <textarea id="message" rows="5"></textarea>
      </div>
      <button class="ui primary button" type="submit">Submit</button>
    </form>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>

</html>

在上述代码中，我们通过引用CDN链接的方式引入了Semantic UI框架的CSS和JavaScript文件。然后使用Semantic UI提供的类来进行样式和布局的定义。例如，我们使用了inverted、vertical、center aligned这些类来实现头部的样式。

三、Bulma框架
Bulma是一个轻量级的CSS框架，它提供了简洁、灵活的网页设计解决方案。下面是一个使用Bulma框架构建的简单网页的代码示例。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bulma Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</head>

<body>
  <header class="hero is-primary is-bold">
    <h1 class="title has-text-centered">Welcome to My Website</h1>
  </header>

  <section class="section">
    <div class="container">
      <h2 class="title">About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil sequi numquam rerum repellat? Fugit, ut?</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="title">Contact Me</h2>
      <form>
        <div class="field">
          <label class="label" for="name">Your Name</label>
          <div class="control">
            <input class="input" type="text" id="name">
          </div>
        </div>
        <div class="field">
          <label class="label" for="email">Your Email</label>
          <div class="control">
            <input class="input" type="email" id="email">
          </div>
        </div>
        <div class="field">
          <label class="label" for="subject">Subject</label>
          <div class="control">
            <input class="input" type="text" id="subject">
          </div>
        </div>
        <div class="field">
          <label class="label" for="message">Message</label>
          <div class="control">
            <textarea class="textarea" id="message" rows="5"></textarea>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/js/bulma.min.js"></script>
</body>

</html>

在上述代码中，我们通过引用CDN链接的方式引入了Bulma框架的CSS和JavaScript文件。然后使用Bulma提供的类来进行样式和布局的定义。例如，我们使用了hero、is-primary、is-bold

2. Framework d'interface utilisateur sémantique

Semantic UI est un autre framework CSS populaire qui se concentre sur la conception sémantique et fournit des thèmes riches et des options de personnalisation. Vous trouverez ci-dessous un exemple de code d'une page Web simple créée à l'aide du framework Semantic UI.
rrreee

Dans le code ci-dessus, nous avons introduit les fichiers CSS et JavaScript du framework Semantic UI en référençant le lien CDN. Utilisez ensuite les classes fournies par Semantic UI pour définir des styles et des mises en page. Par exemple, nous utilisons des classes telles que inverted, vertical et center aligné pour implémenter les styles de tête. 🎜🎜3. Bulma Framework🎜Bulma est un framework CSS léger qui fournit une solution de conception Web simple et flexible. Vous trouverez ci-dessous un exemple de code d'une page Web simple créée à l'aide du framework Bulma. 🎜rrreee🎜Dans le code ci-dessus, nous avons introduit les fichiers CSS et JavaScript du framework Bulma en référençant le lien CDN. Utilisez ensuite les classes fournies par Bulma pour définir des styles et des mises en page. Par exemple, nous utilisons des classes telles que hero, is-primary et is-bold pour implémenter les styles de tête. 🎜🎜Résumé🎜Ce qui précède est une brève introduction à trois frameworks CSS couramment utilisés et fournit des exemples de code spécifiques. En utilisant ces frameworks, vous pouvez créer de belles pages Web rapidement et facilement. Cependant, en tant que débutant, vous ne devez pas trop vous fier au framework au début, mais apprendre progressivement la syntaxe native CSS et les compétences de mise en page afin de mieux comprendre et maîtriser l'essence de la conception Web. J'espère que cet article vous sera utile pour votre apprentissage et je vous souhaite du succès dans votre parcours de conception de sites Web ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript 架构 css bootstrap 样式表 ui

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Guide simple : créez un framework CSS personnalisé en seulement cinq étapesArticle suivant：Guide simple : créez un framework CSS personnalisé en seulement cinq étapes

Articles Liés

Voir plus