基于css和html帮我写一个比较复杂响应式志愿项目网页，每个项目包括项目区域，服务类别，项目状态，报名范围，项目人数
时间: 2024-05-06 17:18:12 浏览: 12
好的，以下是一个比较复杂的响应式志愿项目网页的示例代码：
HTML代码：
```
<!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>志愿项目</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">项目列表</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section class="project">
<h2>项目1</h2>
<div class="project-info">
<div class="project-area">
<h3>项目区域</h3>
<p>北京市</p>
</div>
<div class="project-category">
<h3>服务类别</h3>
<p>教育</p>
</div>
<div class="project-status">
<h3>项目状态</h3>
<p>招募中</p>
</div>
<div class="project-apply">
<h3>报名范围</h3>
<p>大学生</p>
</div>
<div class="project-num">
<h3>项目人数</h3>
<p>10人</p>
</div>
</div>
</section>
<section class="project">
<h2>项目2</h2>
<div class="project-info">
<div class="project-area">
<h3>项目区域</h3>
<p>上海市</p>
</div>
<div class="project-category">
<h3>服务类别</h3>
<p>医疗</p>
</div>
<div class="project-status">
<h3>项目状态</h3>
<p>进行中</p>
</div>
<div class="project-apply">
<h3>报名范围</h3>
<p>专业相关人士</p>
</div>
<div class="project-num">
<h3>项目人数</h3>
<p>5人</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2021 志愿项目</p>
</footer>
</body>
</html>
```
CSS代码：
```
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
.project {
margin-bottom: 30px;
border: 1px solid #ccc;
padding: 20px;
}
.project h2 {
margin-top: 0;
}
.project-info {
display: flex;
flex-wrap: wrap;
}
.project-info div {
width: 20%;
padding: 10px;
}
.project-info h3 {
margin-top: 0;
}
.project-info p {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.project-info div {
width: 50%;
}
}
```
这个示例代码包括了一个顶部导航栏、两个志愿项目的信息，每个项目包括项目区域、服务类别、项目状态、报名范围和项目人数，还有一个页脚。在屏幕宽度小于768px时，每个项目的信息以两列方式显示。
相关推荐
最新推荐
HTML 无序列表项目符号使用图片的CSS写法
有这样的一个需求，内容为一个无序列表，想让列表的项目符号必须采用缩略图，本文使用CSS方法进行布局实现，大家可以参考下
css3与html5实现响应式导航菜单(导航栏)效果分享
使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单
CSS控制让每行显示4个图片的样式
想让每行显示4个图片的布局该怎么写，相信有很多朋友都不会吧，其实很简单通过简单的浮动便可实现，感兴趣的朋友可以了解下本
css3实现一个div设置多张背景图片及background-image属性实例演示
主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
vue项目打包后上传至GitHub并实现github-pages的预览
vue项目打包后上传至GitHub，并实现github-pages的预览 1. 打包vue 项目 vue项目： 命令行输入打包命令npm run build，生成了dist文件夹： 打包完成。 打包常见问题1——项目资源无法加载 打开刚刚打包好的dist...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB结构体与对象编程：构建面向对象的应用程序，提升代码可维护性和可扩展性
# 1. MATLAB结构体基础**
MATLAB结构体是一种数据结构，用于存储和组织相关数据。它由一系列域组成，每个域都有一个名称和一个值。结构体提供了对数据的灵活访问和管理，使其成为组织和处理复杂数据集的理想选择。
MATLAB中创建结构体非常简单，使用struct函数即可。例如：
```matlab
myStruct
详细描述一下STM32F103C8T6怎么与DHT11连接
STM32F103C8T6可以通过单总线协议与DHT11连接。连接步骤如下：
1. 将DHT11的VCC引脚连接到STM32F103C8T6的5V电源引脚；
2. 将DHT11的GND引脚连接到STM32F103C8T6的GND引脚；
3. 将DHT11的DATA引脚连接到STM32F103C8T6的GPIO引脚，可以选择任一GPIO引脚，需要在程序中配置；
4. 在程序中初始化GPIO引脚，将其设为输出模式，并输出高电平，持续至少18ms，以激活DHT11；
5. 将GPIO引脚设为输入模式，等待DHT11响应，DHT11会先输出一个80us的低电平，然后输出一个80us的高电平，
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。