当前位置: 首页 > news >正文

利用HTML和css技术编写学校官网页面

目录

一,图例展示

二,代码说明

1,html部分:

【第一张图片】

【第二张图片】

【第三张图片】

2,css部分:

【第一张图片】

【第二张图片】

【第三张图片】

三,程序代码


一,图例展示


二,代码说明

1,html部分:

【第一张图片】
  • 创建了一个基本的页面结构,包含header(顶部导航栏)和main(主横幅区域)。
  • header中,设置了学校 logo、学校名称、主导航菜单以及用户相关选项(学生、教工等)。
  • main区域放置了新春快乐的横幅图片。
【第二张图片】
  • 构建了一个包含 “工大要闻” 和 “综合新闻” 两个新闻板块的页面结构。
  • “工大要闻” 板块使用图片和标题展示新闻,“综合新闻” 板块则以列表形式呈现新闻标题和日期。
【第三张图片】
  • 创建了一个additional - sections容器,用于包裹 “学术 & 交流” 和 “媒体 & 关注” 两个板块。
  • 每个板块都有一个标题(h2)、一个 “更多” 链接和一个无序列表(ul),列表中每个列表项(li)展示一条具体的信息,包括信息标题和日期。

2,css部分:

【第一张图片】
  • 设置了盒模型和字体等基本属性。
  • header及其内部元素(如 logo 区域、导航菜单、用户选项)进行了样式设置,包括背景颜色、文本颜色、布局等。
  • main - bannerbanner - img进行了样式设置,确保横幅图片能正确显示在页面中。
【第二张图片】
  • 将两个新闻板块并排展示,设置了各自的样式,如标题样式、新闻项样式、列表样式等。
  • 对图片、文本等元素的样式进行了设置,以实现与给定页面类似的视觉效果。
【第三张图片】
  • additional - sections容器进行了宽度、外边距和弹性布局设置,使其在页面中水平居中且两个板块并排显示。
  • 分别设置了 “学术 & 交流” 和 “媒体 & 关注” 板块的宽度。
  • 定义了列表的顶部外边距,以及列表项的底部外边距、边框和内边距样式,同时设置了列表项中链接的字体颜色和大小。


三,程序代码

HTML部分:

<!DOCTYPE html>
<html lang="zh - CN">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>西北工业大学官网页面</title>
</head>

<body>
  <header class="header">
    <div class="header - container">
      <div class="logo - area">
        <img src="nwpulogo.png" alt="西北工业大学logo" class="logo">
        <span class="school - name">西北工业大学</span>
        <span class="english - name">NORTHWESTERN POLYTECHNICAL UNIVERSITY</span>
      </div>
      <nav class="main - nav">
        <ul class="nav - list">
          <li><a href="#">学校概况</a></li>
          <li><a href="#">组织机构</a></li>
          <li><a href="#">人才培养</a></li>
          <li><a href="#">师资队伍</a></li>
          <li><a href="#">科学研究</a></li>
          <li><a href="#">合作交流</a></li>
          <li><a href="#">招生就业</a></li>
          <li><a href="#">人才招聘</a></li>
        </ul>
      </nav>
      <div class="user - options">
        <a href="#">学生</a>
        <a href="#">教工</a>
        <a href="#">校友</a>
        <a href="#">访客</a>
        <a href="#">常用链接</a>
        <a href="#"><img src="mailicon.png" alt="邮件图标" class="mail - icon">书记|校长</a>
        <a href="#" class="lang - switch">ENG</a>
        <a href="#" class="search - icon"><img src="searchicon.png" alt="搜索图标"></a>
      </div>
    </div>
  </header>
  
  <main class="main - banner">
    <img src="bannerimage.png" alt="新春快乐横幅" class="banner - img">
  </main> 
    <div class="news - container">
      
      <div class="news - section">
        <h2 class="section - title">工大要闻</h2>
        <a href="#" class="more - link">更多>></a>
        <div class="news - items">
          <div class="news - item">
            <img src="news1.jpg" alt="中共西北工业大学第十四届委员会第二次全体会议">
            <p class="news - title">中国共产党西北工业大学第十四届委员会第二次全体会议举行</p>
          </div>
          <div class="news - item">
            <img src="news2.jpg" alt="我校召开2024年人才工作总结暨表彰会">
            <p class="news - title">我校召开2024年人才工作总结暨表彰会</p>
          </div>
          <div class="news - item">
            <img src="news3.jpg" alt="学校召开2024年度人才培养工作总结大会">
            <p class="news - title">学校召开2024年度人才培养工作总结大会</p>
          </div>
          <div class="news - item">
            <img src="news4.jpg" alt="学校召开2024年科技工作总结暨表彰会">
            <p class="news - title">学校召开2024年科技工作总结暨表彰会</p>
          </div>
        </div>
      </div>
      
      
      <div class="news - section">
        <h2 class="section - title">综合新闻</h2>
        <a href="#" class="more - link">更多>></a>
        <a href="#" class="news - website - link">新闻网</a>
        <ul class="news - list">
          <li class="news - list - item">
            <a href="#">中共中央、国务院印发《教育强国建设规划纲要(2024—2035年)》</a>
            <span class="news - date">01 - 19</span>
          </li>
          <li class="news - list - item">
            <a href="#">我校帕维尔教授受邀参加李强总理出席的新春座谈交流会</a>
            <span class="news - date">01 - 30</span>
          </li>
          <li class="news - list - item">
            <a href="#">新春前夕学校领导走访慰问老领导、老党员、老同志、专家学者、...</a>
            <span class="news - date">01 - 20</span>
          </li>
          <li class="news - list - item">
            <a href="#">学校召开2024年度二级单位考核暨基层党委书记抓党建述职评议会</a>
            <span class="news - date">01 - 05</span>
          </li>
          <li class="news - list - item">
            <a href="#">我校召开第三届学术委员会第二次全体会议</a>
            <span class="news - date">01 - 17</span>
          </li>
          <li class="news - list - item">
            <a href="#">2025年初雪中的大美校园</a>
            <span class="news - date">01 - 27</span>
          </li>
          <li class="news - list - item">
            <a href="#">我校37名学子入选首届青年人才托举工程博士生专项计划</a>
            <span class="news - date">01 - 27</span>
          </li>
          <li class="news - list - item">
            <a href="#">电子信息学院李立教授入选2024科学中国人·年度科技人物“影响力...</a>
            <span class="news - date">01 - 20</span>
          </li>
          <li class="news - list - item">
            <a href="#">央视《我的大学》聚焦西工大“为国铸剑”</a>
            <span class="news - date">01 - 04</span>
          </li>
          <li class="news - list - item">
            <a href="#">我校15项教学案例入选陕西省专业学位研究生教学案例库</a>
            <span class="news - date">01 - 26</span>
          </li>
        </ul>
      </div>
    </div>
    
    <div class="additional - sections">

      <div class="academic - section">
        <h2 class="section - title">学术&交流</h2>
        <a href="#" class="more - link">更多>></a>
        <ul class="academic - list">
          <li class="academic - item">
            <a href="#">【学术报告】研究生出国(境)交流项目系列报告——牛立志...</a>
            <span class="news - date">01 - 16</span>
          </li>
          <li class="academic - item">
            <a href="#">【学术报告】研究生出国(境)交流项目系列报告——周易:...</a>
            <span class="news - date">01 - 09</span>
          </li>
          <li class="academic - item">
            <a href="#">【学术报告】研究生出国(境)交流项目系列报告 ——祝怀...</a>
            <span class="news - date">01 - 07</span>
          </li>
          <li class="academic - item">
            <a href="#">【学术报告】研究生出国(境)交流项目系列报告——周鹤:...</a>
            <span class="news - date">01 - 07</span>
          </li>
          <li class="academic - item">
            <a href="#">【学术报告】研究生出国(境)交流项目系列报告——习萌洁...</a>
            <span class="news - date">01 - 07</span>
          </li>
          <li class="academic - item">
            <a href="#">【学术报告】研究生出国(境)交流项目系列报告 ——张利...</a>
            <span class="news - date">01 - 07</span>
          </li>
        </ul>
      </div>
      
      
      <div class="media - section">
        <h2 class="section - title">媒体&关注</h2>
        <a href="#" class="more - link">更多>></a>
        <ul class="media - list">
          <li class="media - item">
            <a href="#">[科技日报]力求优化创新资源配置</a>
            <span class="news - date">01 - 21</span>
          </li>
          <li class="media - item">
            <a href="#">[央视]《焦点访谈》千年古都 网红城市......真实的西安还拿下...</a>
            <span class="news - date">01 - 19</span>
          </li>
          <li class="media - item">
            <a href="#">[央视]《军事科技》梦想成真——探秘走出银幕的尖端装备</a>
            <span class="news - date">01 - 18</span>
          </li>
          <li class="media - item">
            <a href="#">[中国科技网]陕西省第十四届人民代表大会第三次会议开幕</a>
            <span class="news - date">01 - 17</span>
          </li>
          <li class="media - item">
            <a href="#">[光明日报]“宝藏”选修课,“宝”在哪里?</a>
            <span class="news - date">01 - 14</span>
          </li>
          <li class="media - item">
            <a href="#">[中国科学报]西工大张艳宁教授荣获“CCF夏培肃奖”</a>
            <span class="news - date">01 - 12</span>
          </li>
        </ul>
      </div>
    </div>
  </body>
  
  </html>

CSS部分:

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box - sizing: border - box;
}

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

/* 顶部导航栏样式 */
.header {
  background - color: #0066cc;
  color: white;
  padding: 10px 0;
}

.header - container {
  display: flex;
  justify - content: space - between;
  align - items: center;
  max - width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo - area {
  display: flex;
  align - items: center;
}

.logo {
  width: 80px;
  height: 80px;
}

.school - name {
  font - size: 24px;
  margin - left: 10px;
}

.english - name {
  font - size: 14px;
  margin - left: 10px;
}

.main - nav {
  display: flex;
}

.nav - list {
  list - style: none;
  display: flex;
}

.nav - list li {
  margin - right: 20px;
}

.nav - list a {
  color: white;
  text - decoration: none;
}

.user - options {
  display: flex;
  align - items: center;
}

.user - options a {
  color: white;
  text - decoration: none;
  margin - left: 15px;
}

.mail - icon {
  width: 20px;
  height: 20px;
  vertical - align: middle;
  margin - right: 5px;
}

.lang - switch {
  text - transform: uppercase;
  font - size: 14px;
}

.search - icon img {
  width: 20px;
  height: 20px;
}

/* 主横幅样式 */
.main - banner {
  width: 100%;
  margin - top: 20px;
}

.banner - img {
  width: 100%;
  display: block;
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box - sizing: border - box;
  list - style: none;
  text - decoration: none;
}

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

.news - container {
  max - width: 1200px;
  margin: 20px auto;
  display: flex;
  justify - content: space - between;
}

.news - section {
  width: 48%;
}

.section - title {
  font - size: 20px;
  margin - bottom: 10px;
}

.more - link {
  float: right;
  color: #0066cc;
  font - size: 14px;
}

.news - website - link {
  float: right;
  color: #0066cc;
  font - size: 14px;
}

.news - items {
  display: flex;
  flex - wrap: wrap;
  justify - content: space - between;
}

.news - item {
  width: 48%;
  margin - bottom: 20px;
}

.news - item img {
  width: 100%;
  display: block;
  margin - bottom: 10px;
}

.news - title {
  font - size: 16px;
  line - height: 1.4;
}

.news - list {
  margin - top: 10px;
}

.news - list - item {
  margin - bottom: 10px;
  border - bottom: 1px solid #ccc;
  padding - bottom: 5px;
}

.news - list - item a {
  color: #333;
  font - size: 14px;
}

.news - date {
  float: right;
  color: #666;
  font - size: 12px;
}

.additional - sections {
  max - width: 1200px;
  margin: 20px auto;
  display: flex;
  justify - content: space - between;
}

.academic - section,
.media - section {
  width: 48%;
}

.academic - list,
.media - list {
  margin - top: 10px;
}

.academic - item,
.media - item {
  margin - bottom: 10px;
  border - bottom: 1px solid #ccc;
  padding - bottom: 5px;
}

.academic - item a,
.media - item a {
  color: #333;
  font - size: 14px;
}

相关文章:

利用HTML和css技术编写学校官网页面

目录 一&#xff0c;图例展示 二&#xff0c;代码说明 1&#xff0c;html部分&#xff1a; 【第一张图片】 【第二张图片】 【第三张图片】 2&#xff0c;css部分&#xff1a; 【第一张图片】 【第二张图片】 【第三张图片】 三&#xff0c;程序代码 一&#xff0c;…...

SpringSecurity密码编码器:使用BCrypt算法加密、自定义密码编码器

1、Spring Security 密码编码器 Spring Security 作为一个功能完备的安全性框架,一方面提供用于完成加密操作的 PasswordEncoder 组件,另一方面提供一个可以在应用程序中独立使用的密码模块。 1.1 PasswordEncoder 抽象接口 在 Spring Security 中,PasswordEncoder 接口代…...

笔记:新能源汽车零部件功率级测试怎么进行?

摘要:本文旨在梳理主机厂对新能源汽车核心零部件功率级测试需求,通过试验室的主流设备仪器集成,快速实现试验方案搭建,并体现测试测量方案的时效性、便捷性优势。目标是通过提升实现设备的有效集成能力、实现多设备测试过程的有效协同、流程化测试,可快速采集、分析当前数…...

ES6中的map和原生的对象有什么区别?

在 ES6 中&#xff0c;Map 和原生的对象&#xff08;Object&#xff09;都是用来存储键值对数据的集合&#xff0c;但它们有显著的区别。以下是它们之间的主要区别&#xff1a; 1. 键的类型 Object: 只允许使用字符串或符号作为键。其他类型的键&#xff08;如数字或对象&…...

2502vim,vim文本对象中文文档

介绍 文本块用户(textobj-user)是一个可帮助你毫不费力地创建自己的文本对象的Vim插件. 因为有许多陷阱需要处理,很难创建文本对象.此插件隐藏了此类细节,并提供了声明式定义文本对象的方法. 你可用正则式来定义简单的文本对象,或使用函数来定义复杂的文本对象.如… 文本对…...

spring security与gateway结合进行网关鉴权和授权

在Spring Cloud Gateway中集成Spring Security 6以实现鉴权和认证工作&#xff0c;可以在网关代理层完成权限校验和认证。这种架构通常被称为“边缘安全”或“API网关安全”&#xff0c;它允许你在请求到达后端服务之前进行集中式的安全控制。 以下是如何配置Spring Cloud Gat…...

LabVIEW在电机自动化生产线中的实时数据采集与生产过程监控

在电机自动化生产线中&#xff0c;实时数据采集与生产过程监控是确保生产效率和产品质量的重要环节。LabVIEW作为一种强大的图形化编程平台&#xff0c;可以有效实现数据采集、实时监控和自动化控制。详细探讨如何利用LabVIEW实现这一目标&#xff0c;包括硬件选择、软件架构设…...

log4j2日志配置文件

log4j2配置文件每个项目都会用到,记录一个比较好用的配置文件,方便以后使用时调取,日志输出级别为debug,也可以修改 <?xml version"1.0" encoding"UTF-8"?> <Configuration monitorInterval"180" packages""><prope…...

用Deepseek做EXCLE文件对比

背景是我想对比两个PO系统里的一个消息映射&#xff0c;EDI接口的mapping有多复杂懂的都懂&#xff0c;它还不支持跨系统版本对比&#xff0c;所以我费半天劲装NWDS&#xff0c;导出MM到excle&#xff0c;然后问题来了&#xff0c;我需要对比两个excel文件里的内容&#xff0c;…...

Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录

本文博客链接 https://ysx.cosine.ren/tailwind-update-v4-migrate 自用小记。 Tailwind CSS v4.0 - Tailwind CSS 新的高性能引擎 - 完整构建的速度速度快 5 倍&#xff0c;增量构建的速度快于 100 倍以上 —— 以微秒为单位进行测量。为现代 Web 设计 - 建立在前沿的 CSS 特…...

TongSearch3.0.4.0安装和使用指引(by lqw)

文章目录 安装准备手册说明支持的数据类型安装控制台安装单节点(如需集群请跳过这一节)解压和启动开启X-Pack Security和生成p12证书&#xff08;之后配置内置密码和ssl要用到&#xff09;配置内置用户密码配置ssl&#xff08;先配置内置用户密码再配ssl&#xff09;配置控制台…...

低代码产品表单渲染架构

在React和Vue没有流行起来的时候&#xff0c;低代码产品的表单渲染设计通常会使用操作Dom的方式实现。 下面是一个表单的例子&#xff1a; 产品层 用户通过打开表单&#xff0c;使用不同业务场景业务下的表单页面&#xff0c;中间的Render层就是技术实现。 每一个不同业务的表单…...

windows 剪切板的写入、读取,包括图片,文本内容

介绍 在windows开发过程中&#xff0c;我们可能会需要对系统剪切板进行操作&#xff0c;其中包括读取剪切板数据和将数据写入到剪切板中 设置剪切板内容 /*** brief 设置剪切板内容* param[in] pszData 指向缓冲区的指针* param[in] nDataLen 缓冲区长度* return 成功返回TRU…...

Matplotlib 高级图表绘制与交互式可视化(mpld3)

我们先重新回忆一下它的主要作用: 一、Matplotlib 简介 Matplotlib 是 Python 中一个非常强大的可视化库,广泛用于数据可视化、科学计算和工程领域。它提供了丰富的绘图功能,可以生成各种静态、动态和交互式的图表。以下是 Matplotlib 的主要功能及其详细讲解。 二、基本…...

(9)gdb 笔记(2):查看断点 info b,删除断点 delete 3,回溯 bt,

&#xff08;11&#xff09; 查看断点 info b&#xff1a; # info b举例&#xff1a; &#xff08;12&#xff09;删除断点 delete 2 或者删除所有断点&#xff1a; # 1. 删除指定的断点 delete 3 # 2. 删除所有断点 delete 回车&#xff0c;之后输入 y 确认删除所有断点 举…...

专业学习|通过案例了解蒙特卡罗模拟实操步骤与含义

一、蒙特卡罗模拟介绍 蒙特卡罗模拟&#xff08;Monte Carlo Simulation&#xff09;是一种基于随机采样的数值计算方法&#xff0c;用于解决具有不确定性或复杂概率分布的问题。其核心思想是通过多次随机抽样来逼近系统的行为或目标函数的真实值&#xff0c;进而对系统进行评估…...

云端智慧:创业公司如何以全球视野选择最佳平台,实现业务新高度

​2016年8月&#xff0c;一个名叫Bryce Adams的人辞去了自己原本很稳定的工作&#xff0c;开始追逐梦想&#xff1a;为使用WooCommerce&#xff08;一种开源的WordPress数字商务插件&#xff09;的公司开发一种能提供各类报表解决方案的应用。为此他成立了Metorik公司&#xff…...

【工具变量】中国省级八批自由贸易试验区设立及自贸区设立数据(2024-2009年)

一、测算方式&#xff1a;参考C刊《中国软科学》任晓怡老师&#xff08;2022&#xff09;的做法&#xff0c;使用自由贸易试验区(Treat Post) 表征&#xff0c;Treat为个体不随时间变化的虚拟变量&#xff0c;如果该城市设立自由贸易试验区则赋值为1&#xff0c;反之赋值为0&am…...

猫眼Java开发面试题及参考答案(上)

详细介绍项目,像项目中如何用 Redis,用到 Redis 哪些数据类型,项目中遇到哪些问题,怎么解决的 在我参与的一个电商项目中,Redis 发挥了至关重要的作用。这个电商项目主要是为用户提供商品浏览、购物车管理、订单处理等一系列功能。 在项目中使用 Redis 主要是为了提升系统…...

WSL2中安装的ubuntu开启与关闭探讨

1. PC开机后&#xff0c;查询wsl状态 在cmd或者powersell中输入 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 22. 从windows访问WSL2 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 23. 在ubuntu中打开一个工作区后…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...