利用HTML和css技术编写学校官网页面
目录
一,图例展示
二,代码说明
1,html部分:
【第一张图片】
【第二张图片】
【第三张图片】
2,css部分:
【第一张图片】
【第二张图片】
【第三张图片】
三,程序代码
一,图例展示



二,代码说明
1,html部分:
【第一张图片】
- 创建了一个基本的页面结构,包含
header(顶部导航栏)和main(主横幅区域)。 - 在
header中,设置了学校 logo、学校名称、主导航菜单以及用户相关选项(学生、教工等)。 main区域放置了新春快乐的横幅图片。
【第二张图片】
- 构建了一个包含 “工大要闻” 和 “综合新闻” 两个新闻板块的页面结构。
- “工大要闻” 板块使用图片和标题展示新闻,“综合新闻” 板块则以列表形式呈现新闻标题和日期。
【第三张图片】
- 创建了一个
additional - sections容器,用于包裹 “学术 & 交流” 和 “媒体 & 关注” 两个板块。 - 每个板块都有一个标题(
h2)、一个 “更多” 链接和一个无序列表(ul),列表中每个列表项(li)展示一条具体的信息,包括信息标题和日期。
2,css部分:
【第一张图片】
- 设置了盒模型和字体等基本属性。
- 对
header及其内部元素(如 logo 区域、导航菜单、用户选项)进行了样式设置,包括背景颜色、文本颜色、布局等。 - 对
main - banner和banner - 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技术编写学校官网页面
目录 一,图例展示 二,代码说明 1,html部分: 【第一张图片】 【第二张图片】 【第三张图片】 2,css部分: 【第一张图片】 【第二张图片】 【第三张图片】 三,程序代码 一,…...
PostgreSQL错误: 编码“UTF8“的字符0x0xe9 0x94 0x99在编码“WIN1252“没有相对应值
错误介绍 今天遇到一个错误,记录一下 2025-02-10 17:04:35.264 HKT [28816] 错误: 编码"WIN1252"的字符0x0x81在编码"UTF8"没有相对应值 2025-02-10 17:04:35.264 HKT [28816] 错误: 编码"UTF8"的字符0x0xe9 0x94 0x99在编码&quo…...
Flink KafkaConsumer offset是如何提交的
一、fllink 内部配置 client.id.prefix,指定用于 Kafka Consumer 的客户端 ID 前缀partition.discovery.interval.ms,定义 Kafka Source 检查新分区的时间间隔。 请参阅下面的动态分区检查一节register.consumer.metrics 指定是否在 Flink 中注册 Kafka…...
拯救者Y9000P双系统ubuntu22.04安装4070显卡驱动
拯救者Y9000P双系统ubuntu22.04安装4070显卡驱动 1. 前情: 1TB的硬盘,分了120G作ubuntu22.04。/boot: 300MB, / : 40GB, /home: 75G, 其余作swap area。 2. 一开始按这个教程:对我无效 https://blog.csdn.net/Eric_xkk/article/details/1…...
Web3 的虚实融合之路:从虚拟交互到元宇宙构建
在这个数字技术日新月异的时代,我们正站在 Web3 的门槛上,见证着互联网的又一次革命。Web3 不仅仅是技术的迭代,它代表了一种全新的交互方式和价值创造模式。本文将探讨 Web3 如何推动虚拟交互的发展,并最终实现元宇宙的构建&…...
QT修仙笔记 事件大圆满 闹钟大成
学习笔记 牛客刷题 闹钟 时钟显示 通过 QTimer 每秒更新一次 QLCDNumber 显示的当前时间,格式为 hh:mm:ss,实现实时时钟显示。 闹钟设置 使用 QDateTimeEdit 让用户设置闹钟时间,可通过日历选择日期,设置范围为当前时间到未来 …...
变相提高大模型上下文长度-RAG文档压缩-1.常识
前言 之前遇到一个问题,公司大模型的长度不长,而且业务需要RAG返回不少的相关内容。通常RAG都是取top-10/15,文档由于长度限制不能太多,加上embedding效果不佳,返回的文档不多也不能保证都相关。 我们考虑到返回的文…...
人工智能浪潮下脑力劳动的变革与重塑:挑战、机遇与应对策略
一、引言 1.1 研究背景与意义 近年来,人工智能技术发展迅猛,已成为全球科技领域的焦点。从图像识别、语音识别到自然语言处理,从智能家居、智能交通到智能医疗,人工智能技术的应用几乎涵盖了我们生活的方方面面,给人…...
2025 年 2 月 TIOBE 指数
2025 年 2 月 TIOBE 指数 二月头条:快,更快,最快! 现在,世界需要每秒处理越来越多的数字,而硬件的发展速度却不够快,程序的速度变得越来越重要。话虽如此,快速编程语言在 TIOBE 指数中取得进展也就不足为奇了。编程语言 C++ 最近攀升至第 2 位,Go 已稳居前 10 名,Ru…...
防火墙是什么?详解网络安全的关键守护者
当今信息化时代,企业和个人在享受数字生活带来的便利时,也不可避免地面对各种潜在的风险。防火墙作为网络安全体系中的核心组件,就像一道牢不可破的防线,保护着我们的数据和隐私不受外界威胁的侵害。那么防火墙是什么?…...
【Elasticsearch】cumulative_cardinality
1.定义与用途 cumulative_cardinality是一种父级管道聚合(Parent Pipeline Aggregation),用于在父级直方图(histogram)或日期直方图(date_histogram)聚合中计算累计基数。它主要用于统计在某个…...
【LeetCode 刷题】贪心算法(2)-进阶
此博客为《代码随想录》贪心算法章节的学习笔记,主要内容为贪心算法进阶的相关题目解析。 文章目录 135. 分发糖果406. 根据身高重建队列134. 加油站968. 监控二叉树 135. 分发糖果 题目链接 class Solution:def candy(self, ratings: List[int]) -> int:n l…...
字体文件子集化(Font Subsetting)及实现代码
字体文件子集化(Font Subsetting)是指从一个完整的字体文件中提取出仅包含特定字符集的子集,以减小字体文件的大小。这在网页设计、移动应用开发和嵌入式系统中非常有用,可以显著减少加载时间和资源占用。 1. 字体子集化的基本原…...
第三篇:半导体“红蓝药丸“——IGBT/SiC器件如何重塑电驱系统
副标题:当黑客帝国遇见800V高压架构,第三代半导体开启能源革命 ▶ 开篇:红蓝药丸的终极抉择 黑客帝国隐喻 - 红色药丸(IGBT) :传统硅基器件构建的"真实世界"——成熟稳定但存在性能天花板…...
3.矩阵分解技术在推荐系统中的应用
接下来我们将深入探讨矩阵分解技术在推荐系统中的应用。矩阵分解是一种强大的技术,可以有效地处理数据稀疏性问题,并提高推荐系统的性能。在这一课中,我们将介绍以下内容: 矩阵分解的基本概念奇异值分解(SVDÿ…...
VTK编程指南<十六>:VTK表面重建之Delaunay三角剖分
1、无边界限制 三角剖分是一种应用非常广泛的重建技术。三角剖分将一些散乱的点云数据划分为一系列的三角形网格。最常用的三角剖分技术是Delaunay三角剖分。Delaunay三角剖分具有许多优良的性质,即最大化最小角特性,即所有可能的三角形剖分中࿰…...
2.Excel:滨海市重点中学的物理统考考试情况❗(15)
目录 NO12 1.数据透视表 2. 3.sum函数 4.sumifs客观/主观平均分 5.sumifs得分率 6.数字格式修改 NO3/4/5 sumifs某一组数据相加,某一范围,某一范围的具体点向下拖拉,锁定列;向左右,锁定行F4&#x…...
leetcode day17 二分查找 34+367 移除元素27
34 在排序数组中查找元素的第一个和最后一个位置 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必须设计并实现时间复杂度为…...
ASP.NET Core SignalR的协议协商
SignalR支持多种服务器推送方式:Websocket、Server-Sent Events、长轮询。默认按顺序尝试。F12查看协商过程。websocket和HTTP是不同的协议,为什么能用同一个端口。在【开发人员工具】的【网络】页签中看WebSocket通信过程。 协议协商问题 集群中协议协…...
Hdoop之MapReduce的原理
简单版本 AppMaster: 整个Job任务的核心协调工具 MapTask: 主要用于Map任务的执行 ReduceTask: 主要用于Reduce任务的执行 一个任务提交Job --> AppMaster(项目经理)--> 根据切片的数量统计出需要多少个MapTask任务 --> 向ResourceManager(Yarn平台的老大)索要资源 --…...
JAVA并发编程3--多线程程序
1.创建线程的方法: 案例:计算1-1000的整数和 实现Runnable接口 步骤: 1.创建一个实现了Runnable接口的类 2.实现类去实现Runnable中的抽象方法:run() 3.创建实现类的对象 4.将此对象作为参数传递到Thread类的构造器中&#…...
自主项目面试点总结
1、许苑–OJ判题系统 技术栈:Spring BootSpring Cloud AlibabaRedisMybatisMQDocker 项目地址: https://github.com/xuyuan-upward/xyoj-backend-microservice 1.1、项目介绍: 一个基于微服务的OJ系统,具备能够根据管理员预设的题目用例对用户提交的代…...
idea Ai工具通义灵码,Copilot我的使用方法以及比较
我用过多个idea Ai 编程工具,大约用了1年时间,来体会他们那个好用,以下只是针对我个人的一点分享,不一定对你适用 仅作参考。 介于篇幅原因我觉得能说上好用的 目前只有两个 一个是阿里的通义灵码和Copilot,我用它来干…...
4.python基础语法-下
文章目录 1.顺序语句2.条件语句 - if2.1什么是条件语句2.2语法格式2.2.1if2.2.2if - else2.2.3if - elif - else 2.3缩进和代码块2.4练习2.5空语句 pass 3.循环语句3.1while循环3.2for循环3.3continue3.4break 4.综合案例4.1设置初始属性4.2设置性别4.3设置出生点4.4针对每一岁…...
Java--集合(理论)
目录 一、collection collection常用方法 1.List(可以存在重复元素) 迭代器 迭代器的概念 注意事项 例子 1.ArrayList 特点 2.LinkedLIst 特点 3.Vector 特点 2.Set(无重复元素) 1.HashSet 特点 2.Linkedhashset&…...
3D图形学与可视化大屏: 3D 图形学的定义、应用领域和发展历程
一、3D 图形学的定义 3D 图形学是计算机科学的一个分支,主要研究如何在计算机上生成、处理和显示三维图形。它涉及到数学、物理学、计算机科学等多个学科领域,旨在通过计算机技术模拟真实世界中的三维物体和场景,为用户提供逼真的视觉体验。…...
Python 面向对象(类,对象,方法,属性,魔术方法)
前言:在讲面向对象之前,我们先将面向过程和面向对象进行一个简单的分析比较,这样我们可以更好的理解与区分,然后我们在详细的讲解面向对象的优势。 面向过程(Procedure-Oriented Programming,POP࿰…...
轮子项目--消息队列的实现(3)
上一篇文章中我把一些关键的类以及表示出来,如何对这些类对应的对象进行管理呢?管理分为硬盘和内存上,硬盘又分为数据库(管理交换机,队列和绑定)和文件(管理消息),本文就…...
5.7.1 软件项目管理范围、成本估算、风险分析
文章目录 管理范围成本估算风险分析 管理范围 软件项目管理范围包含4P,即人员、产品、过程、项目。人员管理通过人员能力成熟度模型PCMM进行管理。产品管理需要制定产品目标,识别产品的总体目标,而不涉及细枝末节。产品范围,识别产…...
Android新版高斯模糊(毛玻璃)官方实现,Kotlin
Android新版高斯模糊(毛玻璃)官方实现,Kotlin 从Android 12开始,Android官方API支持高斯模糊(毛玻璃)效果。关键是通过RenderEffect实现。 https://developer.android.com/reference/android/graphics/RenderEffecthttps://developer.android.com/refer…...
