学会CSS，打造手机、平板、电脑三合一网站，从入门到精通

随着移动互联网的快速发展，越来越多的企业和个人开始重视网站的多设备适配问题。一个能够适配手机、平板、电脑等多终端的网站，不仅能够提升用户体验，还能扩大网站的访问群体。本文将带你从CSS入门到精通，学会打造一个三合一网站。

一、CSS基础知识

1. CSS是什么？

CSS（层叠样式表）是一种用来描述HTML或XML文档样式的样式表语言。通过CSS，你可以控制网页的布局、字体、颜色、动画等样式。

2. CSS的基本语法

选择器 {
  属性: 值;
}

选择器用于指定要应用样式的元素，属性表示要修改的样式，值则是具体的样式值。

3. 常用选择器

元素选择器：如div、p等。
类选择器：如.class。
ID选择器：如#id。
伪类选择器：如:hover、:active等。

二、响应式布局

1. 响应式布局的概念

响应式布局是指网页能够根据不同的设备屏幕尺寸，自动调整布局和内容，以适应不同的终端设备。

2. 常用的响应式布局技术

流式布局：利用百分比、em、rem等长度单位，使布局宽度自适应。
Flexbox布局：使用flex容器和flex项目，实现灵活的布局。
Grid布局：使用grid容器和grid项目，实现复杂的多列布局。

三、媒体查询

媒体查询是CSS3提供的一种技术，可以针对不同的设备特性，应用不同的样式。

@media (max-width: 768px) {
  /* 平板设备样式 */
}

@media (min-width: 769px) and (max-width: 992px) {
  /* 电脑设备样式 */
}

@media (min-width: 993px) {
  /* 手机设备样式 */
}

四、实战案例

1. 手机网站

首先，定义一个基本的结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机网站</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">新闻动态</a></li>
      <li><a href="#">联系方式</a></li>
    </ul>
  </nav>
  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
  </main>
  <footer>
    <p>版权所有 &copy; 2021</p>
  </footer>
</body>
</html>

然后，编写CSS样式：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

main article {
  margin: 20px;
  padding: 10px;
  background-color: #f0f0f0;
}

footer {
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
}

2. 平板和电脑网站

对于平板和电脑网站，可以使用Flexbox布局实现更复杂的布局效果。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平板和电脑网站</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>网站标题</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">新闻动态</a></li>
      <li><a href="#">联系方式</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>栏目一</h2>
      <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
      </article>
      <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
      </article>
    </section>
    <section>
      <h2>栏目二</h2>
      <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
      </article>
      <article>
        <h3>文章标题</h3>
        <p>文章内容...</p>
      </article>
    </section>
  </main>
  <footer>
    <p>版权所有 &copy; 2021</p>
  </footer>
</body>
</html>

CSS样式：

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

main {
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
}

section {
  flex: 1 1 300px;
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}

footer {
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
}

通过以上示例，我们可以看到，通过CSS和响应式布局技术，我们可以轻松地打造一个适应手机、平板、电脑等多终端的网站。

五、总结

学会CSS，打造一个三合一网站并不复杂。只需要掌握CSS基础知识、响应式布局和媒体查询等技术，就可以实现多终端的网站适配。希望本文能够帮助你入门到精通，打造出属于自己的优秀网站！