3d动画制作视频教程/求职seo推荐
目录
一，图例展示
二，代码说明
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部分： 【第一张图片】 【第二张图片】 【第三张图片】 三，程序代码 一，…...
SpringSecurity密码编码器：使用BCrypt算法加密、自定义密码编码器
1、Spring Security 密码编码器 Spring Security 作为一个功能完备的安全性框架，一方面提供用于完成加密操作的 PasswordEncoder 组件，另一方面提供一个可以在应用程序中独立使用的密码模块。 1.1 PasswordEncoder 抽象接口 在 Spring Security 中，PasswordEncoder 接口代…...
笔记：新能源汽车零部件功率级测试怎么进行？
摘要：本文旨在梳理主机厂对新能源汽车核心零部件功率级测试需求，通过试验室的主流设备仪器集成，快速实现试验方案搭建，并体现测试测量方案的时效性、便捷性优势。目标是通过提升实现设备的有效集成能力、实现多设备测试过程的有效协同、流程化测试，可快速采集、分析当前数…...
ES6中的map和原生的对象有什么区别？
在 ES6 中，Map 和原生的对象（Object）都是用来存储键值对数据的集合，但它们有显著的区别。以下是它们之间的主要区别： 1. 键的类型 Object: 只允许使用字符串或符号作为键。其他类型的键（如数字或对象&…...
2502vim,vim文本对象中文文档
介绍 文本块用户(textobj-user)是一个可帮助你毫不费力地创建自己的文本对象的Vim插件. 因为有许多陷阱需要处理,很难创建文本对象.此插件隐藏了此类细节,并提供了声明式定义文本对象的方法. 你可用正则式来定义简单的文本对象,或使用函数来定义复杂的文本对象.如… 文本对…...
spring security与gateway结合进行网关鉴权和授权
在Spring Cloud Gateway中集成Spring Security 6以实现鉴权和认证工作，可以在网关代理层完成权限校验和认证。这种架构通常被称为“边缘安全”或“API网关安全”，它允许你在请求到达后端服务之前进行集中式的安全控制。 以下是如何配置Spring Cloud Gat…...
LabVIEW在电机自动化生产线中的实时数据采集与生产过程监控
在电机自动化生产线中，实时数据采集与生产过程监控是确保生产效率和产品质量的重要环节。LabVIEW作为一种强大的图形化编程平台，可以有效实现数据采集、实时监控和自动化控制。详细探讨如何利用LabVIEW实现这一目标，包括硬件选择、软件架构设…...
log4j2日志配置文件
log4j2配置文件每个项目都会用到,记录一个比较好用的配置文件,方便以后使用时调取,日志输出级别为debug,也可以修改 <?xml version"1.0" encoding"UTF-8"?> <Configuration monitorInterval"180" packages""><prope…...
用Deepseek做EXCLE文件对比
背景是我想对比两个PO系统里的一个消息映射，EDI接口的mapping有多复杂懂的都懂，它还不支持跨系统版本对比，所以我费半天劲装NWDS，导出MM到excle，然后问题来了，我需要对比两个excel文件里的内容，…...
Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录
本文博客链接 https://ysx.cosine.ren/tailwind-update-v4-migrate 自用小记。 Tailwind CSS v4.0 - Tailwind CSS 新的高性能引擎 - 完整构建的速度速度快 5 倍，增量构建的速度快于 100 倍以上 —— 以微秒为单位进行测量。为现代 Web 设计 - 建立在前沿的 CSS 特…...
TongSearch3.0.4.0安装和使用指引（by lqw）
文章目录 安装准备手册说明支持的数据类型安装控制台安装单节点(如需集群请跳过这一节)解压和启动开启X-Pack Security和生成p12证书（之后配置内置密码和ssl要用到）配置内置用户密码配置ssl（先配置内置用户密码再配ssl）配置控制台…...
低代码产品表单渲染架构
在React和Vue没有流行起来的时候，低代码产品的表单渲染设计通常会使用操作Dom的方式实现。 下面是一个表单的例子： 产品层 用户通过打开表单，使用不同业务场景业务下的表单页面，中间的Render层就是技术实现。 每一个不同业务的表单…...
windows 剪切板的写入、读取，包括图片，文本内容
介绍 在windows开发过程中，我们可能会需要对系统剪切板进行操作，其中包括读取剪切板数据和将数据写入到剪切板中 设置剪切板内容 /*** brief 设置剪切板内容* param[in] pszData 指向缓冲区的指针* param[in] nDataLen 缓冲区长度* return 成功返回TRU…...
Matplotlib 高级图表绘制与交互式可视化（mpld3）
我们先重新回忆一下它的主要作用： 一、Matplotlib 简介 Matplotlib 是 Python 中一个非常强大的可视化库，广泛用于数据可视化、科学计算和工程领域。它提供了丰富的绘图功能，可以生成各种静态、动态和交互式的图表。以下是 Matplotlib 的主要功能及其详细讲解。 二、基本…...
（9）gdb 笔记（2）：查看断点 info b，删除断点 delete 3，回溯 bt，
（11） 查看断点 info b： # info b举例： （12）删除断点 delete 2 或者删除所有断点： # 1. 删除指定的断点 delete 3 # 2. 删除所有断点 delete 回车，之后输入 y 确认删除所有断点 举…...
专业学习｜通过案例了解蒙特卡罗模拟实操步骤与含义
一、蒙特卡罗模拟介绍 蒙特卡罗模拟（Monte Carlo Simulation）是一种基于随机采样的数值计算方法，用于解决具有不确定性或复杂概率分布的问题。其核心思想是通过多次随机抽样来逼近系统的行为或目标函数的真实值，进而对系统进行评估…...
云端智慧：创业公司如何以全球视野选择最佳平台，实现业务新高度
2016年8月，一个名叫Bryce Adams的人辞去了自己原本很稳定的工作，开始追逐梦想：为使用WooCommerce（一种开源的WordPress数字商务插件）的公司开发一种能提供各类报表解决方案的应用。为此他成立了Metorik公司ÿ…...
【工具变量】中国省级八批自由贸易试验区设立及自贸区设立数据（2024-2009年）
一、测算方式：参考C刊《中国软科学》任晓怡老师（2022）的做法，使用自由贸易试验区(Treat Post) 表征，Treat为个体不随时间变化的虚拟变量，如果该城市设立自由贸易试验区则赋值为1，反之赋值为0&am…...
猫眼Java开发面试题及参考答案（上）
详细介绍项目，像项目中如何用 Redis，用到 Redis 哪些数据类型，项目中遇到哪些问题，怎么解决的 在我参与的一个电商项目中，Redis 发挥了至关重要的作用。这个电商项目主要是为用户提供商品浏览、购物车管理、订单处理等一系列功能。 在项目中使用 Redis 主要是为了提升系统…...
WSL2中安装的ubuntu开启与关闭探讨
1. PC开机后，查询wsl状态 在cmd或者powersell中输入 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 22. 从windows访问WSL2 wsl -l -vNAME STATE VERSION * Ubuntu Stopped 23. 在ubuntu中打开一个工作区后…...
Linux抢占式内核：技术演进与源码解析
一、引言 Linux内核作为全球广泛使用的开源操作系统核心，其设计和实现一直是计算机科学领域的研究热点。从早期的非抢占式内核到2.6版本引入的抢占式内核，Linux在实时性和响应能力上取得了显著进步。本文将深入探讨Linux抢占式内核的引入背景、技术实现以及与非抢占式内核的…...
【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】2.28 NumPy+Matplotlib：科学可视化的核心引擎
2.28 NumPyMatplotlib：科学可视化的核心引擎 目录 #mermaid-svg-KTB8Uqiv5DLVJx7r {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KTB8Uqiv5DLVJx7r .error-icon{fill:#552222;}#mermaid-svg-KTB8Uqiv5…...
C#面试常考随笔12：游戏开发中常用的设计模式【C#面试题（中级篇）补充】
C#面试题（中级篇），详细讲解，帮助你深刻理解，拒绝背话术！-CSDN博客 简单工厂模式 优点： 根据条件有工厂类直接创建具体的产品 客户端无需知道具体的对象名字，可以通过配置文件创建…...
【深度学习入门_机器学习理论】朴素贝叶斯(NaiveBayes)
本部分主要为机器学习理论入门_熟悉朴素贝叶斯算法，书籍参考 “ 统计学习方法（第二版）”。 学习目标： 熟悉条件概率、先验概率、后验概率、全概率，熟悉朴素贝叶斯算法原理与推判断过程；熟悉参数估计&#…...
docker pull Error response from daemon问题
里面填写 里面解决方案就是挂代理。 以虚拟机为例，将宿主机配置端口设置，https/http端口设为7899 配置虚拟机的http代理： vim /etc/systemd/system/docker.service.d/http-proxy.conf里面填写，wq保存 [Service] Environment…...
javaEE-8.JVM(八股文系列)
目录 一.简介 二.JVM中的内存划分 JVM的内存划分图: 堆区:编辑 栈区:编辑 程序计数器：编辑 元数据区：编辑 经典笔试题： 三,JVM的类加载机制 1.加载: 2.验证: 3.准备: 4.解析: 5.初始化: 双亲委派模型 概念: JVM的类加…...
25.02.04 《CLR via C#》 笔记 13
核心机制 第二十章 异常和状态管理 什么是异常：异常指成员没有完成它的名称所宣称的行动；异常是程序运行过程中用来表示错误并处理的机制，错误可以是更广义的，包括程序中未捕获的问题或逻辑缺陷。异常处理机制（try-c…...
git 项目的更新
更新项目 当自己的本地项目与 远程的github 的仓库已经建立远程连接时， 则直接按照下面的步骤， 将本地的项目代码更新到远程仓库。 # Stage the resolved file git add README.md <file1> <file2># To stage all changes: git add .# Comm…...
【Rust自学】17.3. 实现面向对象的设计模式
喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 17.3.1. 状态模式 状态模式(state pattern) 是一种面向对象设计模式，指的是一个值拥有的内部状态由数个状态对象（…...
51c视觉~CV~合集10
我自己的原文哦~ https://blog.51cto.com/whaosoft/13241694 一、CV创建自定义图像滤镜 热图滤镜 这组滤镜提供了各种不同的艺术和风格化光学图像捕捉方法。例如，热滤镜会将图像转换为“热图”，而卡通滤镜则提供生动的图像，这些图像看起来…...