web前端,查询官网:w3school

HTML:负责网页结构(页面元素和内容)

CSS:负责网页的表现(网页元素的外观、位置等页面样式,如颜色,大小)

JAVAScript:负责网页的行为(交互效果)

<a>:超链接

<img>:展示图片

<video>:音频

<h>:标题

jquery之轮播图,写一下学校的网页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-3.7.1.min.js"></script><script src="js/school.js"></script><link rel="stylesheet" href="css/daohang.css"><link rel="stylesheet" href="css/select.css"></head>
<style>
*{padding:0;margin:0;
}
.container{height: 400px;width:1600px;/* 超出容器的部分隐藏掉 */overflow: hidden;/* 父级position: relative与下面子集的positive:absolute搭配,子集元素会随着父级元素的相对位置而调整 */position: relative;}
img{height: 400px;width:1600px;list-style:none;}/* 设置胶卷 */
ul{position: absolute;display: flex;height:400px;width:8000px;
}
li{list-style: none;
}
</style>
<body><div class="menu"><div class="logo"><img src="img/schoollogo.png" alt=""></div><div class="right"><div class="top"><span>网站地图</span><span>办公系统</span><span>English</span></div><div class="bottom"><li><input type="text"></li><li><img src="img/search.png" alt=""></li></div></div></div><div class="select"><li>首页</li><li>学校概况</li><li>机构设置</li><li>学科专业</li><li>师资队伍</li><li>科学研究</li><li>招生就业</li><li>国际交流</li></div><div class="container"><ul><li><img src="img/11.jpg" alt=""></li><li><img src="img/22.jpg" alt=""></li><li><img src="img/33.jpg" alt=""></li><li><img src="img/44.jpg" alt=""></li><li><img src="img/55.jpg" alt=""></li></ul></div>
</body>
</html>
*{padding: 0;margin:0;
}/* 整个菜单 */
.menu{height:115px;width:1600px;color: white;background: rgb(1,22, 75);display: flex;justify-content: space-between;}
/* 左面 */
.menu .logo {margin-left: 160px;margin-top: 20px;width:350px;height:70px;
}
.menu .logo img{width:350px;height:70px;}/* 右面 */
.menu .right{position: relative;
}/* 右上 */
.menu .right .top{margin-top:24px;margin-right: 265px;}
.menu .right .top span{padding: 13px;font-size: 16px;color: rgb(158, 161, 161);
}
/* 右上 */
.menu .right .bottom {display: flex;margin-top: 15px;margin-left: 70px;}
.menu .right .bottom li input{height: 23px;width: 147px;border:none;background:rgb(225, 236, 240) ;background-color: rgb(209, 226, 235);}
.menu .right .bottom li img{height: 25px;width: 25px;position: relative;top:2px;}
*{padding:0;margin:0;
}
.select{display: flex;background: rgb(0, 29, 98);height:40px;justify-content: center;position:relative;left:-60px;width:1600px;
}
.select li{margin-top: 10px;margin-left: 70px;color:white;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/91688.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/91688.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/91688.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql group by

临时表与内存表 内存表是 Memory 引擎表&#xff0c;表的数据行都在内存。 临时表可以使用各种引擎。 临时表是线程私有表&#xff0c;其他线程不可见&#xff0c;不需考虑重名问题。 session 结束时临时表会被自动删除。 如果 Binlog_format row&#xff0c;则临时表语句不进…

Linux(15)——进程间通信

目录 一、进程间通信的介绍 ✍️进程间通信的目的 ✍️进程间通信的本质 进程间通信的分类 ✍️管道 ✍️System V IPC ✍️POSIX IPC 二、管道 &#x1f9e0;什么是管道 ✍️匿名管道 &#x1f4dd;匿名管道的原理 &#x1f4dd;pipe函数 &#x1f4dd;匿名管道…

【Flutter】双路视频播放方案

最近在做双路视频播放&#xff0c;就是在一个页面播放两个视频。我遇到的问题就是音频焦点冲突问题&#xff0c;在下面说明。什么是双路视频播放&#xff08;来自AI&#xff09;双路视频播放&#xff08;Dual-Video Playback&#xff09;&#xff0c;从字面上理解&#xff0c;就…

笔试——Day25

文章目录第一题题目思路代码第二题题目&#xff1a;思路代码第三题题目&#xff1a;思路代码第一题 题目 笨小猴 思路 模拟 统计每个字符出现的次数&#xff0c;用最大减最小&#xff0c;判断是不是质数&#xff1b; 质数的判断使用试除法&#xff1b; 代码 第二题 题目&…

【C#学习Day15笔记】拆箱装箱、 Equals与== 、文件读取IO

前言在C#第15天的学习中&#xff0c;我深入探索了类型转换机制、对象比较原理和文件操作技术三大核心主题。这些知识是构建高效、健壮程序的关键基础。本文完整保留我的课堂实践代码和命名体系&#xff0c;通过结构化梳理帮助大家掌握这些核心概念。所有代码示例均来自我的实际…

发电类电力业务许可证申请条件

基本条件&#xff1a;法人资格&#xff1a;申请人必须是依法注册的企业法人。 财务能力&#xff1a;应具有与所申请从事的电力业务相适应的财务能力。 专业人员要求&#xff1a;生产运行负责人、技术负责人、安全负责人和财务负责人需具备至少3年以上与申请从事的电力业务相关的…

JavaScript 高效入门指南:从基础到实战(VSCode 版)

废话不多说&#xff0c;直接上干货&#x1f600; 一、先搞定工具&#xff1a;VSCode 配置成「JS 开发神器」 工欲善其事&#xff0c;必先利其器。用 VSCode 写 JavaScript&#xff0c;这几个配置能让你效率翻倍&#xff1a; 1. 必装插件&#xff08;直接在 VSCode 插件商店搜…

《人形机器人的觉醒:技术革命与碳基未来》——类人关节设计:柔性驱动革命之液压人工肌肉

目录&#xff1a;一、人工肌肉的种类及人形机器人适用情况二、人形机器人用人工肌肉科研机构及其最新成果进展三、液压人工肌肉种类及工作机制四、液压人工肌肉适用人形机器人的性能要求和局限性五、液压人工肌肉材料技术进展及其限制与突破六、波士顿动力Spot的液压静液传动系…

26数据结构-顺序表

&#x1f4cc;有序顺序表的合并 #define MAX_SIZE 20 struct SeqList {int data[MAX_SIZE];int length; }; void mergeArray(SeqList &L1,SeqList &L2,SeqList &L) {int i0,j 0;while(i<L1.length && j<L2.length){if(L1.data[i]<L2.data[j])L.da…

25电赛e题 控制激光开关电路

e题明确说了禁止使用继电器控制&#xff0c;所以需要自己搭建一个mos管控制电路这里使用mos管来驱动GPIO → 电阻(220Ω) → MOSFET栅极(如IRF520N)MOSFET漏极接激光器正极MOSFET源极接地激光器负极直接接电源连接方式如下这里r36为栅极电阻&#xff0c;需要跟你们使用的mos配合…

ubuntu apt源报错?

报错原因&#xff1a;一、网络连接方面1.网络不通畅&#xff08;常见&#xff09;简单来说就是你的虚拟机连不上网&#xff0c;这时候你应该检查自己的ip 是不是dhcp自动获取的&#xff0c;或者你的网络配置是否有误。2.DNS 解析故障&#xff1a;DNS 服务器配置错误或 DNS 服务…

Scene as Occupancy

OccNet https://github.com/OpenDriveLab/OccNet Scene as Occupancy 提出了一种新的场景表示方法&#xff0c; 利用环视摄像头&#xff0c;采用级联和时序体素编码的方式来重建三维Occ场景。Method 1&#xff09;提出的OCCNet首先重建占据描述符&#xff0c;目标是为支持下游任…

Linux基础复习:字符输入与输出

该文仅针对自身对Linux基础知识不足的地方进行补充扩展&#xff0c;便于巩固。终端的输入和输出由字符设备管理。1、查看当前字符设备# 查看当前bash进程 [rootopenEuler-1 ~]# psPID TTY TIME CMD9662 pts/1 00:00:00 bash9938 pts/1 00:00:00 ps# 该目录存放了…

【初识数据结构】CS61B中的基数排序

本教程介绍 CS61B 中的基数排序&#xff0c;这是一种可以在某些情况下甚至超越归并排序、快速排序的特殊的排序方法&#xff0c;但是牺牲了内存空间计数排序 连续编号情形 我们需要对一个编号从 0 到 11 的表进行排序实际上我们可以拿出另一张同样大小的空白表&#xff0c;在遍…

ReAct模式深度解析:构建具备推理能力的AI智能体架构

本文深入剖析ReAct(Reasoning+Acting)架构设计模式,揭示如何通过推理与行动循环构建具备自主决策能力的AI智能体,并展示其在复杂问题求解中的革命性突破。 引言:从工具调用到自主决策的进化 传统AI系统面临的核心瓶颈: #mermaid-svg-orlnKyviyW86xIJZ {font-family:&quo…

Corrosion2靶机攻略

第一步搭建环境 靶机下载地址&#xff1a;https://download.vulnhub.com/corrosion/Corrosion2.ova 下载完成后直接右击用VM打开&#xff0c;重试一下就可以了 右击虚拟机设置将网络连接改成nat模式 第二步信息收集 查看一下靶机的网段&#xff0c;左上角编辑&#xff0c;虚…

SSL 剥离漏洞

一、SSL/TLS 协议基础​1.1、SSL/TLS 协议的核心功能​SSL/TLS 协议的核心功能主要包括三个方面&#xff1a;加密、认证和完整性校验&#xff0c;这三大功能共同构建了网络通信的安全屏障。​&#xff08;一&#xff09;加密​加密是 SSL/TLS 协议最基本的功能。它通过使用对称…

c++-reverse_iterator

C反向迭代器 反向迭代器是C标准库提供的一种适配器&#xff0c;它允许我们以相反的顺序遍历容器&#xff0c;反向迭代器是正向迭代器的封装。 迭代器可以分为两类&#xff1a;方向性质&#xff1a;单向迭代器&#xff08;Forward Iterator&#xff09;双向迭代器&#xff08;Bi…

linux内核驱动:电流/电压/功率监控模块INA226调试

目录背景一、芯片介绍二、手册三、内核驱动配置3.1 设备树配置3.2 修改内核配置文件3.3 编译四、内核驱动分析1、初始化流程2、属性文件/解释五、调试和计算背景 最近调试了一款德州仪器的带有I2C控制接口的可以实现电压、电流、功率监测&#xff0c;并可以进行报警设置的芯片I…

ACL 2024 大模型方向优秀论文:洞察NLP前沿​关键突破

关注gongzhonghao【计算机sci论文精选】近年来&#xff0c;以Transformer架构为核心的大语言模型重塑了自然语言处理领域的技术范式。当前ACL相关研究呈现多维度深化态势&#xff0c;从开源社区推动轻量化架构与低成本训练技术革新&#xff0c;到学术界探索检索增强等机制突破长…