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;
}