好的，以下是
一个简单的个人
项目的 CSS 模板：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Personal
Project</title>
<!-- Link to CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Personal
Project</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Welcome to my website!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus ac neque gravida vestibulum. Integer volutpat justo vitae consequat ullamcorper. Fusce vel dolor sit amet nisl pharetra elementum. Sed sed sapien nisl. Praesent non lacus euismod, pulvinar sapien id, fermentum lectus. Donec ornare elit sed mauris convallis, ut blandit massa lobortis. Sed vel mi vel mauris maximus varius. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
<section>
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel lacus ac neque gravida vestibulum. Integer volutpat justo vitae consequat ullamcorper. Fusce vel dolor sit amet nisl pharetra elementum. Sed sed sapien nisl. Praesent non lacus euismod, pulvinar sapien id, fermentum lectus. Donec ornare elit sed mauris convallis, ut blandit massa lobortis. Sed vel mi vel mauris maximus varius. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
<section>
<h2>My Portfolio</h2>
<div class="portfolio-items">
<div class="portfolio-item">
<a href="#"><img src="image1.jpg" alt="Portfolio Item 1"></a>
<h3>
Project 1</h3>
</div>
<div class="portfolio-item">
<a href="#"><img src="image2.jpg" alt="Portfolio Item 2"></a>
<h3>
Project 2</h3>
</div>
<div class="portfolio-item">
<a href="#"><img src="image3.jpg" alt="Portfolio Item 3"></a>
<h3>
Project 3</h3>
</div>
</div>
</section>
<section>
<h2>Contact Me</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer>
<p>© My Personal
Project 2021</p>
</footer>
</body>
</html>
```
接下来，你可以在同
一个目录下创建
一个名为 `style.css` 的文件，使用以下 CSS 代码来样式化你的 HTML：
```css
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f5f5f5;
}
header {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
nav ul {
list-style: none;
display:
flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
transition: all 0.3s ease-in-out;
}
nav a:hover {
color: #f00;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 1.8rem;
margin-bottom: 20px;
}
p {
margin-bottom: 20px;
}
.portfolio-items {
display:
flex;
flex-wrap: wrap;
}
.portfolio-item {
flex-basis: calc(33.33% - 20px);
margin-right: 20px;
margin-bottom: 20px;
}
.portfolio-item img {
max-width: 100%;
height: auto;
}
.portfolio-item h3 {
font-size: 1.2rem;
margin-top: 10px;
}
form {
display:
flex;
flex-direction: column;
max-width: 600px;
margin: 0 auto;
}
label {
font-weight: bold;
margin-bottom: 10px;
}
input,
textarea {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
}
input[type="submit"] {
background-color: #f00;
color: #fff;
font-weight: bold;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #d00;
}
```
这个 CSS 模板包括了
一个基本的页面布局，样式化了页面的标题、导航、主要内容和页脚。它还包括了
一个简单的表单样式和
一个简单的图库样式，你可以在其
中展示你的
项目。
你可以根据需要进行更改和扩展，但这是
一个很好的起点，可以帮助你开始
一个个人
项目的 CSS 设计。
扫一扫
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
