<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>师资队伍 - 计算机信息工程系</title> <link rel="stylesheet" href="css/3.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>  <header role="banner"> <div class="logo">计算机信息工程系</div> <nav role="navigation" aria-label="主菜单"> <ul> <li><a href="师资头.html">首页</a></li> <li><a href="专业介绍.html">专业介绍</a></li> <li><a href="师资队伍.html">师资队伍</a></li> </ul> </nav> </header>  <main role="main"> <section class="page-title"> <h2>师资队伍</h2> <p>我们拥有一支高素质、经验丰富、科研能力强的教师团队。</p> </section>  <section class="teachers"> <div class="teacher-card"> <h3>张伟</h3> <p>职称：教授</p> <p>研究方向：人工智能与大数据</p> </div> <div class="teacher-card"> <h3>李娜</h3> <p>职称：副教授</p> <p>研究方向：网络与信息安全</p> </div> <div class="teacher-card"> <h3>王强</h3> <p>职称：讲师</p> <p>研究方向：嵌入式系统开发</p> </div> </section>   </main>  <footer role="contentinfo"> <p>© 2025 计算机信息工程系 | 技术支持：<a href="#">IT中心</a></p> </footer> </body> </html>加个图片

时间: 2025-07-01 19:00:20 浏览: 28

代码概述这是一份用于展示“师资队伍”页面的 HTML 页面结构，当前页面已经包含了头部导航、标题区以及教师信息卡片区域。现在的需求是为该页面添加图片，通常用于展示教师照片或团队合影。代码解析 1. **添加教师个人照片**：在每个 `.teacher-card` 中加入 `<img>` 标签，用于显示教师头像或照片。 2. **图片路径设置**：假设图片资源存放在 `img/teachers/` 文件夹中，每位教师的照片分别为 `zhangwei.jpg`、`lina.jpg`、`wangqiang.jpg`。 3. **样式优化建议**：为了美观，可以使用 CSS 设置图片大小、圆角边框等样式（如使用类 `.teacher-photo`）。修改后的代码如下： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>师资队伍 - 计算机信息工程系</title> <link rel="stylesheet" href="css/3.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .teacher-card { border: 1px solid #ddd; padding: 1em; margin: 1em; width: 250px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .teacher-photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin-bottom: 10px; } </style> </head> <body>  <header role="banner"> <div class="logo">计算机信息工程系</div> <nav role="navigation" aria-label="主菜单"> <ul> <li><a href="师资头.html">首页</a></li> <li><a href="专业介绍.html">专业介绍</a></li> <li><a href="师资队伍.html">师资队伍</a></li> </ul> </nav> </header>  <main role="main"> <section class="page-title"> <h2>师资队伍</h2> <p>我们拥有一支高素质、经验丰富、科研能力强的教师团队。</p> </section>  <section class="teachers" style="display: flex; justify-content: center; flex-wrap: wrap;"> <div class="teacher-card"> <img src="img/teachers/zhangwei.jpg" alt="张伟教授" class="teacher-photo"> <h3>张伟</h3> <p>职称：教授</p> <p>研究方向：人工智能与大数据</p> </div> <div class="teacher-card"> <img src="img/teachers/lina.jpg" alt="李娜副教授" class="teacher-photo"> <h3>李娜</h3> <p>职称：副教授</p> <p>研究方向：网络与信息安全</p> </div> <div class="teacher-card"> <img src="img/teachers/wangqiang.jpg" alt="王强讲师" class="teacher-photo"> <h3>王强</h3> <p>职称：讲师</p> <p>研究方向：嵌入式系统开发</p> </div> </section> </main>  <footer role="contentinfo"> <p>© 2025 计算机信息工程系 | 技术支持：<a href="#">IT中心</a></p> </footer> </body> </html> ``` 知识点 - **HTML 图片插入方法**：使用 `<img>` 标签并指定 `src` 属性来引入图片资源。 - **图片样式控制**：通过 `class="teacher-photo"` 配合 CSS 控制图片大小、形状（如圆形头像）、适应方式（如 `object-fit: cover`）。 - **Flex 布局应用**：使用 `display: flex` 和 `justify-content: center` 实现教师卡片水平居中排列，提升响应式布局效果。

阅读全文

师资队伍

张伟

李娜

王强

相关推荐

-doctype-html-html-lang-en-dir-ltr-head-meta-name:

HTML中的<meta>标签的使用详解

html5使用canvas实现跟随光标跳动的火焰效果

［简答题］利用html 重工官网首页，图片跳转到首页，与官网一致的导航条。 利用a、img、列表标签完成。 2 垂度工招等院 CHONGQING INSTITUTE OF ENGINEERING 首页学校概况 机构设置 教育教育 师资队伍

学校介绍html代码

html学校页面现成代码

bootstrap新东方泡泡英语html代码

编写一个html校园介绍的网页

如何使用html编写荆楚理工学院的官网

写一个HTML的大学学校官网的首页

江西陶瓷工艺美术职业技术学校官网代码html

请用HTML5写一个学院荣誉官网

按照武汉船舶职业技术学院官网首页HTML写出代码

帮我用HtMl,css,js设计一个学校主页

帮我用html和css写一份关于兰州大学的静态界面首页网页

请用html和css做一个成品学校官网网站，要求有四个页面

只使用html来制作一个金陵科技学院学校官网页面设计，需要有滚动的背景

用html为“生物医药数据科学”专业制作1个网站首页、1个新闻详情页、1个公告详情页

freude弗莱德FP-12A电脑DSP调音软件下载

网络设备技术指标.docx

大家在看

Android开发环境配置

TL431稳压器的中文资料

echarts-doc-5-nginx.zip

LUST伺服应用手册

STM32F4xx-WS2812B-TIM_DMA-lib-master.zip

最新推荐

freude弗莱德FP-12A电脑DSP调音软件下载

网络设备技术指标.docx

软件规范知识培训(1).ppt

VC图像编程全面资料及程序汇总

Pokemmo响应速度翻倍：多线程处理的高级技巧

人名列表滚动抽奖

一站式JSF开发环境：即解压即用JAR包

Pokemmo内存优化揭秘：专家教你如何降低50%资源消耗

直接访问子路由是吧

C++函数库查询辞典使用指南与功能介绍

［简答题］利用html 重工官网首页，图片跳转到首页，与官网一致的导航条。利用a、img、列表标签完成。 2 垂度工招等院 CHONGQING INSTITUTE OF ENGINEERING 首页学校概况机构设置教育教育师资队伍