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