html css网页制作模板

模板一：简约博客页面

 <!DOCTYPE html>
<html lang="en">
 
<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>My Blog</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>First Post</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </article>
    <article>
      <h2>Second Post</h2>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </article>
  </main>
  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
</body>
 
</html>复制

对应的 CSS（style.css）：

 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #333;
  color: white;
  padding: 20px;
}
 
header h1 {
  margin: 0;
}
 
nav {
  margin-top: 10px;
}
 
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}
 
main {
  padding: 20px;
}
 
article {
  margin-bottom: 30px;
}
 
article h2 {
  margin-top: 0;
}
 
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}复制

模板二：产品展示页面

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Showcase</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
  <header>
    <h1>Our Products</h1>
  </header>
  <main>
    <div class="product">
      <img src="product1.jpg" alt="Product 1">
      <h3>Product 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="product">
      <img src="product2.jpg" alt="Product 2">
      <h3>Product 2</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </div>
    <div class="product">
      <img src="product3.jpg" alt="Product 3">
      <h3>Product 3</h3>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </main>
  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
</body>
 
</html>复制

对应的 CSS（style.css）：

 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #f0f0f0;
  padding: 20px;
}
 
header h1 {
  margin: 0;
}
 
main {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.product {
  width: 30%;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
 
.product img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
 
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}复制

模板三：个人简历页面

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resume</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
  <header>
    <h1>Your Name</h1>
    <p>Your Profession</p>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
    <section>
      <h2>Skills</h2>
      <ul>
        <li>Skill 1</li>
        <li>Skill 2</li>
        <li>Skill 3</li>
      </ul>
    </section>
    <section>
      <h2>Experience</h2>
      <h3>Company Name</h3>
      <p>Position</p>
      <p>Duration</p>
      <p>Description of work.</p>
    </section>
    <section>
      <h2>Education</h2>
      <h3>University Name</h3>
      <p>Degree</p>
      <p>Graduation Year</p>
    </section>
  </main>
  <footer>
    <p>Contact Information</p>
  </footer>
</body>
 
</html>复制

对应的 CSS（style.css）：

 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #333;
  color: white;
  padding: 20px;
}
 
header h1 {
  margin: 0;
}
 
main {
  padding: 20px;
}
 
section {
  margin-bottom: 30px;
}
 
section h2 {
  margin-top: 0;
}
 
footer {
  background-color: #f0f0f0;
  padding: 10px;
}复制

模板四：美食博客页面

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Food Blog</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
  <header>
    <h1>Delicious Dishes</h1>
  </header>
  <main>
    <article>
      <img src="dish1.jpg" alt="Dish 1">
      <h2>Dish 1 Name</h2>
      <p>Description of dish 1.</p>
    </article>
    <article>
      <img src="dish2.jpg" alt="Dish 2">
      <h2>Dish 2 Name</h2>
      <p>Description of dish 2.</p>
    </article>
    <article>
      <img src="dish3.jpg" alt="Dish 3">
      <h2>Dish 3 Name</h2>
      <p>Description of dish 3.</p>
    </article>
  </main>
  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
</body>
 
</html>复制

对应的 CSS（style.css）：

 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #f90;
  color: white;
  padding: 20px;
}
 
header h1 {
  margin: 0;
}
 
main {
  padding: 20px;
}
 
article {
  margin-bottom: 30px;
}
 
article img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
 
article h2 {
  margin-top: 0;
}
 
footer {
  background-color: #f90;
  color: white;
  text-align: center;
  padding: 10px;
}复制

模板五：旅游网站页面

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Travel Site</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>
  <header>
    <h1>Explore the World</h1>
    <nav>
      <a href="#">Destinations</a>
      <a href="#">Travel Tips</a>
      <a href="#">About Us</a>
    </nav>
  </header>
  <main>
    <section>
      <img src="destination1.jpg" alt="Destination 1">
      <h2>Destination 1</h2>
      <p>Description of destination 1.</p>
    </section>
    <section>
      <img src="destination2.jpg" alt="Destination 2">
      <h2>Destination 2</h2>
      <p>Description of destination 2.</p>
    </section>
    <section>
      <img src="destination3.jpg" alt="Destination 3">
      <h2>Destination 3</h2>
      <p>Description of destination 3.</p>
    </section>
  </main>
  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
</body>
 
</html>复制

对应的 CSS（style.css）：

 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #007bff;
  color: white;
  padding: 20px;
}
 
header h1 {
  margin: 0;
}
 
nav {
  margin-top: 10px;
}
 
nav a {
  color: white;
  text-decoration: none;
  margin-right: 15px;
}
 
main {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
section {
  width: 30%;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
 
section img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
 
footer {
  background-color: #007bff;
  color: white;
  text-align: center;
  padding: 10px;
}复制

html css网页制作模板

计算机毕业设计—43454 基于HTML5的智慧养老服务平台的设计与实现（源码免费领）

前端攻城狮HTML5自查手册

巧用 HTML 列表：＜ul＞、＜ol＞、＜dl＞的实用指南

超详细Python教程——用Python解析HTML页面

图文混排的Word内容能否直接复制到HTML富文本编辑器TinyMCE中？

HTML应用指南：利用GET请求获取猫眼电影日票房信息——以哪吒2为例

【JavaWeb】快速入门——HTML&CSS

拓展之HTML和CSS实现盒子水平垂直居中的多种方法

带你深入了解前端【HTML JavaScript】

HTML静态网页作业——基于html css javascript jquery bootstarp响应式成都家乡介绍网页

前端哥

【Linux笔记】基础IO(上)

Windows11离线安装wsl2(适用于 Linux 的 Windows 子系统)和Ubuntu

Linux 服务器运维常用命令大全

深入了解 Ubuntu 中的 build-essential：开发者的必备工具

RagFlow Docker Desktop Ollama DeepSeek-R1本地部署自己的本地AI大模型工具

Linux 学习必杀技：从菜鸟到高手的蜕变密码

Trae AI 全新功能 SSHremote助力开发者个人产品打造，高效构建全栈应用

Python Selenium全栈指南：从自动化入门到企业级实战

Spring Cloud之负载均衡之LoadBalance

【一篇搞定配置】一篇带你从配置到使用（PyCharm远程）完成服务器运行项目（配置、使用一条龙）【全网最详细版】

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000

3
在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000

4
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

5
CSS常用属性（文本属性）

2024-11-04 09:11:111000

6
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

7
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

8
vue使用datav echarts

2024-09-06 00:09:381000

9
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

10
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

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

	<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>My Blog</h1>
	<nav>
	<a href="#">Home</a>
	<a href="#">About</a>
	<a href="#">Posts</a>
	<a href="#">Contact</a>
	</nav>
	</header>
	<main>
	<article>
	<h2>First Post</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	</article>
	<article>
	<h2>Second Post</h2>
	<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</article>
	</main>
	<footer>
	<p>Copyright © 2024</p>
	</footer>
	</body>

	</html>

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

	header {
	background-color: #333;
	color: white;
	padding: 20px;
	}

	header h1 {
	margin: 0;
	}

	nav {
	margin-top: 10px;
	}

	nav a {
	color: white;
	text-decoration: none;
	margin-right: 15px;
	}

	main {
	padding: 20px;
	}

	article {
	margin-bottom: 30px;
	}

	article h2 {
	margin-top: 0;
	}

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

html css网页制作模板

微信扫一扫：分享