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