用CSS轻松构建企业级网站-学成在线案例

2023-05-03 08:02:16

创建企业级网站：HTML、CSS 和 Sass 教程

如何快速启动并运行你的企业网站？

建立一个具有专业外观和功能的企业级网站至关重要。在本教程中，我们将引导你完成创建企业级网站的步骤，包括 HTML、CSS 和 Sass。

HTML 结构

一个基本的 HTML 结构如下所示：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>企业名称</h1>
<nav>
<a href="home.html">首页</a>
<a href="about.html">关于我们</a>
<a href="services.html">服务</a>
<a href="contact.html">联系我们</a>
</nav>
</header>
<main>
<h1>欢迎来到我们的网站！</h1>
<p>我们是企业名称，我们致力于提供优质的产品和服务。</p>
</main>
<footer>
<p>Copyright © 2023 企业名称</p>
</footer>
</body>
</html>

CSS 样式

使用 CSS，你可以轻松地为你的网站添加样式，例如字体、颜色和布局。以下是一些基本的 CSS 样式：

/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 头部 */
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}
h1 {
margin: 0;
font-size: 24px;
}
nav {
float: right;
}
nav a {
display: inline-block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #444;
}
/* 主体 */
main {
padding: 20px;
}
h1 {
margin-top: 0;
font-size: 32px;
}
p {
font-size: 16px;
}
/* 底部 */
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}

使用 Sass

Sass 是一种 CSS 扩展语言，可以让你更轻松地管理复杂的样式表。下面是使用 Sass 的一个示例：

/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 头部 */
header {
background-color: #333;
color: #fff;
padding: 20px 0;
}
h1 {
margin: 0;
font-size: 24px;
}
nav {
float: right;
}
nav a {
display: inline-block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #444;
}
/* 主体 */
main {
padding: 20px;
}
h1 {
margin-top: 0;
font-size: 32px;
}
p {
font-size: 16px;
}
/* 底部 */
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}