時間：2023-09-15 20:18:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-15 20:18:01 來源：網(wǎng)站運(yùn)營
使用HTML制作靜態(tài)網(wǎng)站作業(yè)——我的校園運(yùn)動會(HTML+CSS)：精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 Echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 HTML+CSS+JS實(shí)例代碼： 【 ?HTML+CSS+JS實(shí)例代碼 (炫酷特效網(wǎng)頁代碼) 繼續(xù)更新中...】 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <title>校園運(yùn)動會</title> </head> <body> <!-- 頭部 --> <header class="header"> <!-- 搜索 --> <div class="search"> <div class="search-content"> <!-- logo-左 --> <div class="content-l"> <img src="./pic/logo.png" /> <h3>校園運(yùn)動會</h3> </div> <!-- search-右 --> <div class="content-r"> <input type="text" /> <button>搜索</button> </div> </div> </div> <!-- 導(dǎo)航欄 --> <div class="myNavbar"> <div class="myNavbar-content"> <ul> <li><a class="act" href="./index.html">首頁</a></li> <li><a href="./page1.html">形式</a></li> <li><a href="./page2.html">高燃瞬間</a></li> <li><a href="./page3.html">趣味瞬間</a></li> </ul> </div> </div> </header> <!-- 主體 --> <main class="main"> <div class="main-content"> <!-- banner --> <div class="banner"> <img src="./pic/img (1).jpg"> </div> <!-- 文章 --> <div class="article"> <h1 class="article-title"> <span>校園運(yùn)動會簡介</span> </h1> <hr /> <p> 學(xué)校體育運(yùn)動競賽的一種重要形式，主要指每年春秋兩季的田徑運(yùn)動會，簡稱校運(yùn)會。學(xué)校運(yùn)動會有多方面的教育意義，可以全面檢閱學(xué)校田徑運(yùn)動開展情況，檢查教學(xué)和訓(xùn)練成果，推動學(xué)校群眾性體育活動的開展，促進(jìn)運(yùn)動技術(shù)水平的提高；同時，還可以培養(yǎng)學(xué)生奮發(fā)向上、遵守紀(jì)律、集體主義和榮譽(yù)感等品質(zhì)，并具有振奮師生精神，活躍學(xué)校生活等作用。中國學(xué)校的運(yùn)動會，始于1890年前后杭州圣約翰書院舉辦的以田徑為主的運(yùn)動會。以后逐漸發(fā)展到大城市的中等和高等學(xué)校。中華人民共和國成立后，學(xué)校運(yùn)動會在城市和鄉(xiāng)村各級各類學(xué)校中普遍開展，并日益成為學(xué)校的傳統(tǒng)活動和學(xué)校教育生活中一項(xiàng)重要內(nèi)容。 </p> <h3>精彩瞬間</h3> <div style="width: 100%; display: flex; "> <div class="img" style="width: 100%; height: 600px; flex-shrink: 0;"> <img src="./pic/img-1.jpg" /> </div> </div> <div style="width: 100%; display: flex; justify-content: space-around"> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img-2.jpg" /> </div> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img-3.jpg" /> </div> </div> <h3>目光中凝聚的是堅(jiān)定與自信 動作中蘊(yùn)藏的是斗志與決心</h3> <div style="width: 100%; display: flex; justify-content: space-around"> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img (24).jpg" /> </div> <div class="img" style="width: 48%; height: 450px; margin-left: 1%;flex-shrink: 0;"> <img src="./pic/img-5.jpg" /> </div> </div> <h3>運(yùn)動的積極意義</h3> <p> 體育運(yùn)動具有強(qiáng)身健體、娛樂，另外還有教育、政治、經(jīng)濟(jì)等功能。也可以說所處的歷史階段不同，體育就具有不同的功能，但是自從體育產(chǎn)生以來，強(qiáng)身健體及其娛樂自始至終是體育的主要功能。體育是一種復(fù)雜的社會文化現(xiàn)象，以身體活動為基本手段，增強(qiáng)體質(zhì)、增進(jìn)健康及其培養(yǎng)人的各種心理品質(zhì)為目的。尤其是隨著社會經(jīng)濟(jì)的發(fā)展，人們的生活水平得到了提高，人們對精神方面的需要高于對物質(zhì)方面的需要。人們對于體育的認(rèn)識不只限于強(qiáng)身健體的方面，希望通過體育活動的參與得到更多的精神享受。例如，人們觀看體育比賽，優(yōu)美的體育動作，扣人心弦的競賽等都給人們以美的享受，還有在比賽現(xiàn)場，隨著比賽的進(jìn)行，人們可以大聲的叫喊，可以盡情的發(fā)泄自己的情感，使人們在精神上有一種輕松感。一次成功的射門，一個漂亮的投籃，隨著快節(jié)奏的音樂跳健美操等，不只是健身，更重要的是給人們的一種精神與神經(jīng)方面的釋放感，愉快感、成就感和心情的舒暢感。這些都是體育帶給人們精神方面的價值。生活水平越高，人們越是注重體育精神層面的價值。 </p> </div> </div> </main> <!-- 底部 --> <footer class="footer"> Copyright ? 2022 xxx All rights reserved. </footer> </body></html>/* 清除默認(rèn)樣式 *//* #region */* { margin: 0; padding: 0;}/* 均勻滑動 */html { scroll-behavior: smooth;}body { padding-top: 90px; color: #000000;}li { list-style-type: none;}a { text-decoration: none;}/* #endregion *//* 頭部樣式 *//* #region */.header { width: 100%; position: fixed; top: 0; z-index: 10;}.header .search { background-color: #008ccc; width: 100%; height: 40px;}.header .myNavbar { background-color: #296073; width: 100%; height: 50px;}.search .search-content,.myNavbar .myNavbar-content { width: 1200px; height: 100%; margin: 0 auto;}.myNavbar .myNavbar-content{ position: relative;}.search-content { display: flex; justify-content: space-between;}.content-l { display: flex; align-items: center; height: 100%;}.content-l img { width: 30px; height: 30px; flex-shrink: 0;}.content-l h3 { color: white; margin-left: 10px; font-size: 24px; font-weight: 500; flex-shrink: 0;}.content-r { display: flex; align-items: center; height: 100%;}.content-r input { height: 23px; outline: none;}.content-r button { height: 25px; width: 35px; margin-left: 3px; border: none; color: white; background-color: #9b89b3;}.content-r button:hover { cursor: pointer; background-color: #7b6c8f;}.myNavbar-content > ul { display: flex; height: 100%;}.myNavbar-content a { color: white;}.myNavbar-content a:hover { cursor: pointer; background-color: #2e839e;}.myNavbar-content .act { background-color: #2e839e;}.myNavbar-content > ul > li { line-height: 50px;}.myNavbar-content > ul > li > a,.navbar-drop a { padding: 10px 20px; border-radius: 5px;}.navbar-drop { background-color: #296073; text-align: center; margin-top: -10px; border-radius: 0 0 5px 5px; display: none;}.more:hover + .navbar-drop { display: block;}.navbar-drop:hover { display: block;}/* #endregion *//* 主體樣式 *//* #region */.main { width: 100%;}.main audio { height: 40px; margin-left: 10px; margin-bottom: 10px;}.main-content { width: 1200px; margin: 0 auto; border: 1px solid #b0a8b9; box-sizing: border-box;}.banner>img { width: 100%; height: 450px; object-fit: cover; object-position: center;}/* 輪播 *//* #region */.shell { width: 100%; height: 500px; position: relative; overflow: hidden; margin: 0 auto;}.images { width: 300%; height: 100%; display: flex; position: absolute; left: 0; transition: 0.2s;}.sw-img { width: 100%; height: 100%; background-size: 100%; background-position: center; background-repeat: no-repeat;}.sw-img:nth-child(1) { background-image: url('../images/swiper-1.jpg');}.sw-img:nth-child(2) { background-image: url('../images/swiper-2.jpg');}.sw-img:nth-child(3) { background-image: url('../images/swiper-3.jpg');}.min-images { display: flex; justify-content: space-evenly; position: absolute; bottom: 20px; width: 40%; z-index: 5; right: 10%;}.min { width: 60px; height: 60px; cursor: pointer; border-radius: 50%; background-size: cover; border: solid rgba(255, 255, 255, 0.5) 5px; background-position: -20px 0;}.min:nth-child(1) { background-image: url('../images/swiper-1.jpg');}.min:nth-child(2) { background-image: url('../images/swiper-2.jpg');}.min:nth-child(3) { background-image: url('../images/swiper-3.jpg');}.button { width: 100%; height: 100%; position: absolute; display: flex; justify-content: space-between; user-select: none;}.button-left,.button-right { font-size: 50px; background-color: #d2d2d261; padding: 0 20px; cursor: pointer; line-height: 500px;}/* #endregion *//* 文章 *//* #region */.article { width: 100%; margin-top: 50px; padding: 0 15px; box-sizing: border-box; margin-bottom: 40px;}.article p,.p p { text-indent: 2rem; line-height: 2; margin-bottom: 15px;}.article .str { color: #999; font-size: 18px;}.article h3 { margin-bottom: 5px; position: relative;}.article h3::before { content: ''; position: absolute; width: 5px; height: 20px; border-radius: 5px; background-color: #008ccc; left: -14px; top: 4px;}.article a:hover { text-decoration: underline;}.article hr { margin-bottom: 10px;}.article-title { text-align: center; font-size: 38px; font-weight: 400; line-height: 50px; margin-bottom: 30px; color: #f00102;}.article-title > span { padding: 10px 30px; border: double 5px #ee9c0e;}.img{ overflow: hidden; height: 400px; margin: 10px 0;}.img img{ object-fit: cover; object-position: center; transition: 0.3s; width: 100%; height: 100%;}.img:hover { box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;}.img img:hover { transform: scale(1.1);}/* #endregion *//* #endregion *//* 卡片 *//* #region */.article-content{ display: flex; justify-content: space-around; flex-wrap: wrap;}.article-content .item{ width: 350px; padding: 4px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px;}.article-content .item img{ width: 100%; height: 250px; object-fit: cover; object-position: center;}.article-content .item .caption{ padding: 9px; color: #333;}.caption h4{ margin-top: 5px; margin-bottom: 5px; font-size: 18px;}.caption p{ margin: 0 0 10px; line-height: 1.5; text-indent: 0;}.article-video{ width: 100%; background-color: #b94047; border-radius: 6px; display: flex; justify-content: center; flex-wrap: wrap;}.article-video>video{ width: 1000px; height: 570px; margin-top: 20px;}.article-video .text{ width: 1000px; margin-top: 30px;}.text p{ color: white;;}/* #endregion *//* 底部 *//* #region */.footer { background-color: #008ccc; text-align: center; color: white; border-top: 1px solid rgb(87, 20, 20); height: 40px; line-height: 40px;}/* #endregion */請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：校園,作業(yè),靜態(tài),使用
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
