📌  相关文章
📜  设计有吸引力的网站时应该知道的 6 个最佳 CSS 框架(1)

📅  最后修改于: 2023-12-03 14:57:40.024000             🧑  作者: Mango

设计有吸引力的网站时应该知道的 6 个最佳 CSS 框架

当今的 web 设计越来越被重视，设计师们擅长使用各种 CSS 框架，以快速构建出具有吸引力的网站。下面是我们总结的 6 个最佳的 CSS 框架，无论是初学者还是专业设计师，都能够轻松地创建出设计有吸引力，且高度定制化的网站。

1. Bootstrap

Bootstrap 是目前应该是最流行的 CSS 框架之一，它非常适合初学者使用，因为它有大量的文档和社区资源可供使用。它的样式库非常丰富，包含了许多底层样式（比如表格、表单、导航等），可以用来构建各种类型的网站。Bootstrap 还包含了许多可定制化的选项，可以在保持高度可控的前提下，快速搭建出具有吸引力的网站。

示例代码：

# 网站标题
<h1>My Website</h1>

# 导航栏
<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#home" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
      <a href="#about" class="nav-link">About</a>
    </li>
    <li class="nav-item">
      <a href="#contact" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>

# 主要内容区域
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mollis orci, non dictum justo sagittis eu. Curabitur auctor blandit posuere. Sed semper feugiat velit, nec convallis tortor dictum id. </p>
    </div>
    <div class="col-md-6">
      <h2>Contact Us</h2>
      <p>1234 Main St<br>Anytown, USA 12345<br>555-555-5555<br>email@example.com</p>
    </div>
  </div>
</div>
2. Foundation

Foundation 与 Bootstrap 类似，也是一个模块化的 CSS 框架，包含了许多底层的样式库，可以用来构建出各种类型的网站。与 Bootstrap 不同的是，Foundation 更注重网站的响应式设计，因此可以很好地适应移动设备的不同屏幕大小。

示例代码：

# 网站标题
<h1>My Website</h1>

# 导航栏
<nav>
  <ul class="menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

# 主要内容区域
<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell medium-6">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mollis orci, non dictum justo sagittis eu. Curabitur auctor blandit posuere. Sed semper feugiat velit, nec convallis tortor dictum id. </p>
    </div>
    <div class="cell medium-6">
      <h2>Contact Us</h2>
      <p>1234 Main St<br>Anytown, USA 12345<br>555-555-5555<br>email@example.com</p>
    </div>
  </div>
</div>
3. Bulma

Bulma 是一个相对较新的 CSS 框架，在吸收了 Bootstrap 和 Foundation 等成熟框架的优点后，设计了一套独有的响应式样式库。它的文档非常简洁易懂，容易学习和使用。Bulma 的设计理念非常注重美感，因此也适合用来构建设计性感、精美的网站。

示例代码：

# 网站标题
<h1 class="title">My Website</h1>

# 导航栏
<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#home">
      <img src="logo.png" alt="Logo">
    </a>
    <a role="button" class="navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a href="#home" class="navbar-item">Home</a>
      <a href="#about" class="navbar-item">About</a>
      <a href="#contact" class="navbar-item">Contact</a>
    </div>
  </div>
</nav>

# 主要内容区域
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-half">
        <h2 class="subtitle">About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mollis orci, non dictum justo sagittis eu. Curabitur auctor blandit posuere. Sed semper feugiat velit, nec convallis tortor dictum id. </p>
      </div>
      <div class="column is-half">
        <h2 class="subtitle">Contact Us</h2>
        <p>1234 Main St<br>Anytown, USA 12345<br>555-555-5555<br>email@example.com</p>
      </div>
    </div>
  </div>
</section>
4. Semantic UI

Semantic UI 是一款语义化的 CSS 框架，它的设计理念重视语义化、易读性和易用性。Semantic UI 的样式、组件和 JavaScript 代码都是以自然语言的方式定义的，可以帮助设计师更加容易地理解并使用这些代码，从而创建出具有吸引力的网站。

示例代码：

# 网站标题
<h1 class="ui header">My Website</h1>

# 导航栏
<div class="ui pointing menu">
  <a href="#home" class="active item">Home</a>
  <a href="#about" class="item">About</a>
  <a href="#contact" class="item">Contact</a>
  <div class="right menu">
    <div class="item">
      <div class="ui input">
        <input type="text" placeholder="Search...">
      </div>
    </div>
  </div>
</div>

# 主要内容区域
<div class="ui container">
  <div class="ui stackable two column grid">
    <div class="column">
      <h2 class="ui header">About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mollis orci, non dictum justo sagittis eu. Curabitur auctor blandit posuere. Sed semper feugiat velit, nec convallis tortor dictum id. </p>
    </div>
    <div class="column">
      <h2 class="ui header">Contact Us</h2>
      <p>1234 Main St<br>Anytown, USA 12345<br>555-555-5555<br>email@example.com</p>
    </div>
  </div>
</div>
5. Tailwind CSS

Tailwind CSS 是一个全新的 CSS 框架，最大的特点是它的无样式策略，也就是说，这个框架没有自带的样式，所有的样式都必须手动定义。这种无样式的设计理念让这个框架非常灵活，可以轻松地适应任何设计风格。Tailwind CSS 还提供了许多可以与其他框架一起使用的组件和实用工具，可以大大提高网站的开发效率。

示例代码：

# 网站标题
<h1 class="text-3xl font-bold">My Website</h1>

# 导航栏
<nav class="flex items-center justify-between bg-gray-100 p-6">
  <div>
    <img src="logo.png" alt="Logo">
  </div>
  <div>
    <ul class="flex items-center">
      <li><a href="#home" class="mr-6">Home</a></li>
      <li><a href="#about" class="mr-6">About</a></li>
      <li><a href="#contact">Contact</a></li>
      <li class="ml-6">
        <input type="text" placeholder="Search..." class="border rounded-lg px-4 py-2">
      </li>
    </ul>
  </div>
</nav>

# 主要内容区域
<div class="max-w-screen-lg mx-auto mt-8">
  <div class="grid grid-cols-2 gap-8">
    <div>
      <h2 class="text-xl font-bold mb-4">About Us</h2>
      <p class="mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mollis orci, non dictum justo sagittis eu. Curabitur auctor blandit posuere. Sed semper feugiat velit, nec convallis tortor dictum id. </p>
    </div>
    <div>
      <h2 class="text-xl font-bold mb-4">Contact Us</h2>
      <p class="mb-8">1234 Main St<br>Anytown, USA 12345<br>555-555-5555<br>email@example.com</p>
    </div>
  </div>
</div>
6. Materialize

Materialize 是一个基于 Google Material Design 的 CSS 框架，包含了丰富的底层样式以及许多可定制化的组件和 JavaScript 插件，可以轻松地创建出具有吸引力、现代感和创新感的网站。Materialize 的文档简单易懂，适合不同水平的设计师使用。

示例代码：

# 网站标题
<h1 class="flow-text">My Website</h1>

# 导航栏
<nav>
  <div class="nav-wrapper">
    <a href="#home" class="brand-logo">Logo</a>
    <a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
      <li>
        <form>
          <div class="input-field">
            <input type="search" placeholder="Search...">
            <label class="label-icon" style="top: -18px;"><i class="material-icons">search</i></label>
            <i class="material-icons">close</i>
          </div>
        </form>
      </li>
    </ul>
  </div>
</nav>

# 主要内容区域
<div class="container">
  <div class="row">
    <div class="col m6">
      <h2 class="flow-text"><b>About Us</b></h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mollis orci, non dictum justo sagittis eu. Curabitur auctor blandit posuere. Sed semper feugiat velit, nec convallis tortor dictum id. </p>
    </div>
    <div class="col m6">
      <h2 class="flow-text"><b>Contact Us</b></h2>
      <p class="flow-text">1234 Main St<br>Anytown, USA 12345<br>555-555-5555<br>email@example.com</p>
    </div>
  </div>
</div>

以上就是我们总结的 6 个最佳的 CSS 框架，各具特色，设计师可以根据自己的需求和偏好选择合适的框架来构建出具有吸引力，且高度定制化的网站。