Heim > Artikel > Web-Frontend > Beherrschen Sie einfach das CSS-Framework und erstellen Sie schnell schöne Webseiten

Beherrschen Sie einfach das CSS-Framework und erstellen Sie schnell schöne Webseiten

WBOYOriginal: 2024-01-05 16:37:291046Durchsuche

Einfacher Einstieg in das CSS-Framework und einfache Erstellung schöner Webseiten sind erforderlich.

Mit der kontinuierlichen Entwicklung des Internets ist Webdesign zu einem wichtigen Bereich geworden. Das Aufkommen des CSS-Frameworks (Cascading Style Sheets) hat den Prozess des Webdesigns erheblich vereinfacht und ermöglicht es normalen Benutzern, auf einfache Weise schöne Webseiten zu erstellen. In diesem Artikel stellen wir einige häufig verwendete CSS-Frameworks vor und stellen spezifische Codebeispiele bereit, um den Lesern den schnellen Einstieg zu erleichtern.

1. Bootstrap-Framework
Bootstrap ist derzeit eines der beliebtesten CSS-Frameworks. Es verfügt über umfangreiche Stile und Komponenten, ein ansprechendes Design sowie umfangreiche Unterstützung und Dokumentation. Unten finden Sie ein Codebeispiel einer einfachen Webseite, die mit dem Bootstrap-Framework erstellt wurde.

<!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>

Im obigen Code haben wir die CSS- und JavaScript-Dateien des Bootstrap-Frameworks eingeführt, indem wir auf den CDN-Link verwiesen haben. Verwenden Sie dann die von Bootstrap bereitgestellten Klassen, um Stile und Layouts zu definieren. Beispielsweise verwenden wir die Klasse container, um einen Container zu erstellen, und verwenden mt-5, um den oberen und unteren Rand festzulegen. Gleichzeitig verwenden wir auch die Klassen bg-primary und text-white, um die Hintergrundfarbe und Textfarbe des Kopfes festzulegen. 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. Semantic UI Framework

Semantic UI ist ein weiteres beliebtes CSS-Framework, das sich auf semantisches Design konzentriert und umfangreiche Themen und Anpassungsoptionen bietet. Unten finden Sie ein Codebeispiel einer einfachen Webseite, die mit dem Semantic UI-Framework erstellt wurde.
rrreee

Im obigen Code haben wir die CSS- und JavaScript-Dateien des Semantic UI-Frameworks eingeführt, indem wir auf den CDN-Link verwiesen haben. Verwenden Sie dann die von Semantic UI bereitgestellten Klassen, um Stile und Layouts zu definieren. Beispielsweise verwenden wir Klassen wie inverted, vertical und centeraligned, um Kopfstile zu implementieren. 🎜🎜3. Bulma Framework🎜Bulma ist ein leichtes CSS-Framework, das eine einfache und flexible Webdesign-Lösung bietet. Unten finden Sie ein Codebeispiel einer einfachen Webseite, die mit dem Bulma-Framework erstellt wurde. 🎜rrreee🎜Im obigen Code haben wir die CSS- und JavaScript-Dateien des Bulma-Frameworks eingeführt, indem wir auf den CDN-Link verwiesen haben. Verwenden Sie dann die von Bulma bereitgestellten Klassen, um Stile und Layouts zu definieren. Beispielsweise verwenden wir Klassen wie hero, is-primary und is-bold, um Kopfstile zu implementieren. 🎜🎜Zusammenfassung🎜Das Obige ist eine kurze Einführung in drei häufig verwendete CSS-Frameworks und bietet spezifische Codebeispiele. Mithilfe dieser Frameworks können Sie schnell und einfach schöne Webseiten erstellen. Allerdings sollte man sich als Anfänger zu Beginn nicht zu sehr auf das Framework verlassen, sondern nach und nach CSS-native Syntax- und Layoutfähigkeiten erlernen, um die Essenz des Webdesigns besser zu verstehen und zu beherrschen. Ich hoffe, dieser Artikel hilft Ihnen beim Lernen und wünsche Ihnen viel Erfolg auf Ihrem Weg zum Webdesign! 🎜

Das obige ist der detaillierte Inhalt vonBeherrschen Sie einfach das CSS-Framework und erstellen Sie schnell schöne Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 架构 css bootstrap 样式表 ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einfache Anleitung: Erstellen Sie in nur fünf Schritten ein personalisiertes CSS-FrameworkNächster Artikel：Einfache Anleitung: Erstellen Sie in nur fünf Schritten ein personalisiertes CSS-Framework

In Verbindung stehende Artikel

Mehr sehen