時(shí)間：2023-10-16 09:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-16 09:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
制作一個(gè)簡(jiǎn)單HTML個(gè)人網(wǎng)頁(yè)網(wǎng)頁(yè)——人物介紹梵高（HTML+CSS）：精彩專欄推薦 ?? 作者簡(jiǎn)介: 一個(gè)熱愛(ài)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁(yè): 【主頁(yè)—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長(zhǎng)，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過(guò)去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開(kāi)來(lái)！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2） css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。<!doctype html><html><head> <meta charset="utf-8"> <title>首頁(yè)</title> <link rel="stylesheet" type="text/css" href="css/style.css" /></head><body> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="107" valign="middle"><img src="images/0.jpg" width="90" height="90"></td> <td width="793" valign="middle"> <h1>原神</h1> </td> </tr> <tr> <td height="30" colspan="2" valign="middle"> <hr> </td> </tr> </table> <div id="container"> <!-- 輪播圖 --> <ul id="img_ul"> <!-- 與之前相比，前后多了兩張圖片 --> <li><img src="images/01.jpg"></li> <li><img src="images/0.jpg"></li> <li><img src="images/02.jpg"></li> <li><img src="images/03.jpg"></li> <li><img src="images/5.png"></li> <li><img src="images/6.jpg"></li> </ul> <!-- 底部按鈕 --> <ul id="litCir_ul"></ul> <!-- 左右切換按鈕 --> <div id="buttons"> <span id="left"><</span> <span id="right">></span> </div> </div> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="15%" height="30"><a href="index.html" id="Moveout" class="Moveout" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">首頁(yè)</a> </td> <td width="16%"><a href="wy2.html" id="Moveout1" class="Moveout" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">星空</a></td> <td width="17%"><a href="wy3.html" id="Moveout2" class="Moveout" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">向日葵</a></td> <td width="20%"><a href="wy4.html" id="Moveout3" class="Moveout" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">松柏樹(shù)</a></td> <td width="16%"><a href="wy5.html" id="Moveout4" class="Moveout" onmouseover="Moveoutsover()" onmouseout="MoveoutSout()">午睡</a></td> <td width="16%"> </td> </tr> <tr> <td width="15%" height="30"><a href="index.html" class="contenter" id="content" style="display: none;">首頁(yè)</a> </td> <td width="16%"><a href="wy2.html" class="contenter" id="content1" style="display: none;">星空</a></td> <td width="17%"><a href="wy3.html" class="contenter" id="content2" style="display: none;">向日葵</a></td> <td width="20%"><a href="wy4.html" class="contenter" id="content3" style="display: none;">松柏樹(shù)</a></td> <td width="16%"><a href="wy5.html" class="contenter" id="content4" style="display: none;">午睡</a></td> <td width="16%"> </td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="40" colspan="2"> <hr> </td> </tr> <tr> <td width="627"> <h2 align="center">梵高介紹</h2> <p>文森特·梵高（Vincent van Gogh，1853年3月30日—1890年7月29日），荷蘭后印象派畫(huà)家。代表作有《星月夜》、自畫(huà)像系列、向日葵系列等。</p> <p> 梵高出生于1853年3月30日荷蘭鄉(xiāng)村津德?tīng)柼氐囊粋€(gè)新教牧師家庭，早年的他做過(guò)職員和商行經(jīng)紀(jì)人，還當(dāng)過(guò)礦區(qū)的傳教士最后他投身于繪畫(huà)。他早期畫(huà)風(fēng)寫實(shí)，受到荷蘭傳統(tǒng)繪畫(huà)及法國(guó)寫實(shí)主義畫(huà)派的影響。1886年，他來(lái)到巴黎，結(jié)識(shí)印象派和新印象派畫(huà)家，并接觸到日本浮世繪的作品，視野的擴(kuò)展使其畫(huà)風(fēng)巨變，他的畫(huà)，開(kāi)始由早期的沉悶、昏暗，而變得簡(jiǎn)潔、明亮和色彩強(qiáng)烈。1888年，來(lái)到法國(guó)南部小鎮(zhèn)阿爾，已經(jīng)擺脫印象派及新印象派的影響，走到了與之背道而馳的境地。同年與高更交往，但由于二人性格的沖突和觀念的分歧，合作很快便告失敗。此后，梵高的瘋病（有人記載是“癲癇病”）時(shí)常發(fā)作，但神志清醒時(shí)他仍然堅(jiān)持作畫(huà)，1890年7月，他在精神錯(cuò)亂中開(kāi)槍自殺，年僅37歲。 </p> </td> <td width="273"> <div> <p> <span>用戶名:</span><input type="text" placeholder="請(qǐng)輸入用戶名"> </p> <p> <span>密 碼:</span><input type="text" placeholder="請(qǐng)輸入密碼"> </p> <p> <button>登錄</button> </p> </div> </td> </tr> </table> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="40"> </td> </tr> </table></body><script> var img_ul = document.getElementById("img_ul"); // 輪播圖 var litCir_ul = document.getElementById("litCir_ul"); // 圓點(diǎn)按鈕 ul var buttons = document.getElementById("buttons"); // 左右切換按鈕 var cLis = litCir_ul.children; // 圓點(diǎn)按鈕 var len = img_ul.children.length - 2; // 真實(shí)圖片數(shù)，圖片列表有6張，真實(shí)圖片數(shù)只有4張 var width = 500; //每張圖片的寬度 var picN = 1; //當(dāng)前顯示的圖片下標(biāo)為1，展示第一張圖片 // 根據(jù)圖片數(shù)添加小圓點(diǎn) for (let i = 0; i < len; ++i) { var a_li = document.createElement("li"); a_li.className = 'quiet'; litCir_ul.appendChild(a_li); } // 默認(rèn)把第一個(gè)圓點(diǎn)按鈕設(shè)置 active litCir_ul.children[0].className = 'active'; // 觸碰小圓點(diǎn)切換圖片 for (var i = 0; i < len; i++) { // 給每個(gè)小圓點(diǎn)綁定 mouseover 事件 cLis[i].onmouseover = function () { // 停止輪播 clearInterval(img_ul.timer); for (var j = 0; j < len; j++) { cLis[j].className = "quiet"; } this.className = "active"; picN = i + 1; // 切換的圖片下標(biāo) img_ul.style.left = (picN * width * -1) + 'px'; // 切換圖片 } // 開(kāi)啟輪播 cLis[i].onmouseout = function () { Roll(); } } function setActiveSpot() { for (var j = 0; j < len; j++) { cLis[j].className = "quiet"; } // 這里是 picN - 1 是因?yàn)橄聵?biāo)picN的圖片對(duì)應(yīng)著下標(biāo)為picN - 1的圓點(diǎn) cLis[picN - 1].classList = "active"; } function Roll() { clearInterval(img_ul.timer); img_ul.timer = setInterval(() => { ++picN; img_ul.style.transition = "all .5s"; img_ul.style.left = (picN * width * -1) + 'px'; if (picN === len + 1) { picN = 1; setActiveSpot(); setTimeout(() => { img_ul.style.transitionProperty = "none"; // 取消動(dòng)畫(huà) img_ul.style.left = -width + 'px'; // 改變 left 值 }, 500) } else { setActiveSpot(); } }, 2000) } Roll(); // 停止輪播 buttons.children[0].onmouseover = function () { clearInterval(img_ul.timer); } buttons.children[1].onmouseover = function () { clearInterval(img_ul.timer); } // 開(kāi)啟輪播 buttons.children[0].onmouseout = function () { Roll(); } buttons.children[1].onmouseout = function () { Roll(); } // 節(jié)流函數(shù) function throttle(fn, time) { let canRun = true; // 閉包 return function () { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, time); } } // 上一張按鈕 buttons.children[0].onclick = throttle(function () { --picN; img_ul.style.transition = "all .5s"; img_ul.style.left = (picN * width * -1) + 'px'; if (picN === 0) { picN = len; setActiveSpot(); setTimeout(() => { img_ul.style.transitionProperty = "none"; img_ul.style.left = (picN * width * -1) + 'px'; }, 500); } else { setActiveSpot(); } }, 500) // 下一站按鈕 buttons.children[1].onclick = throttle(function () { ++picN; img_ul.style.transition = "all .5s"; img_ul.style.left = (picN * width * -1) + 'px'; if (picN === len + 1) { picN = 1; setActiveSpot(); setTimeout(() => { img_ul.style.transitionProperty = "none"; img_ul.style.left = 0; }, 500); } else { setActiveSpot(); } }, 500) var Moveout = document.getElementById("Moveout"); var content = document.getElementById("content"); //鼠標(biāo)移入顯示 Moveout.onmouseover = function () { content.style.display = "block"; } function Moveoutsover() { content.style.display = "block"; } //鼠標(biāo)移出隱藏 Moveout.onmouseout = function () { content.style.display = "none"; } function MoveoutSout() { content.style.display = "none"; } var Moveout1 = document.getElementById("Moveout1"); var content1 = document.getElementById("content1"); //鼠標(biāo)移入顯示 Moveout1.onmouseover = function () { content1.style.display = "block"; } function Moveoutsover() { content1.style.display = "block"; } //鼠標(biāo)移出隱藏 Moveout1.onmouseout = function () { content1.style.display = "none"; } function MoveoutSout() { content1.style.display = "none"; } var Moveout2 = document.getElementById("Moveout2"); var content2 = document.getElementById("content2"); //鼠標(biāo)移入顯示 Moveout2.onmouseover = function () { content2.style.display = "block"; } function Moveoutsover() { content2.style.display = "block"; } //鼠標(biāo)移出隱藏 Moveout2.onmouseout = function () { content2.style.display = "none"; } function MoveoutSout() { content2.style.display = "none"; } var Moveout3 = document.getElementById("Moveout3"); var content3 = document.getElementById("content3"); //鼠標(biāo)移入顯示 Moveout3.onmouseover = function () { content3.style.display = "block"; } function Moveoutsover() { content3.style.display = "block"; } //鼠標(biāo)移出隱藏 Moveout3.onmouseout = function () { content3.style.display = "none"; } function MoveoutSout() { content3.style.display = "none"; } var Moveout4 = document.getElementById("Moveout4"); var content4 = document.getElementById("content4"); //鼠標(biāo)移入顯示 Moveout4.onmouseover = function () { content4.style.display = "block"; } function Moveoutsover() { content4.style.display = "block"; } //鼠標(biāo)移出隱藏 Moveout4.onmouseout = function () { content4.style.display = "none"; } function MoveoutSout() { content4.style.display = "none"; }</script><style> /* 包裹輪播圖的容器需要使用 overflow: hidden 來(lái)隱藏超出的圖片 */ #container { position: relative; width: 500px; height: 400px; margin: 0 auto; overflow: hidden; margin-left: 10; padding: 0; } ul { list-style: none; margin: 0; padding: 0; } #img_ul { width: 3000px; /* 輪播圖寬度為 圖片數(shù) * 圖片寬 */ height: 400px; position: absolute; top: 0; left: -500px; /* 圖片列表的默認(rèn) left 值 */ transition: all .5s; } #img_ul li { float: left; margin: 0; padding: 0; width: 500px; height: 400px; } #img_ul li img { width: 500px; height: 400px; } #litCir_ul { position: absolute; margin: 0; padding: 0; right: 10px; bottom: 10px; } #litCir_ul li { margin: 0; padding: 0; float: left; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 50%; margin-left: 10px; cursor: pointer; } /* 圓點(diǎn)按鈕生效樣式 */ li.active { background-color: white; } li.quiet { background-color: #1e90ff; } #buttons { margin: 0; padding: 0; display: none; } /* hover 輪播圖則顯示左右切換按按鈕 */ #container:hover #buttons { display: block; } #buttons span { position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -20px; line-height: 40px; text-align: center; font-weight: bold; font-family: Simsun; font-size: 30px; border: 1px solid #fff; opacity: 0.3; cursor: pointer; color: #fff; background: black; } #left { left: 5px; } #right { left: 100%; margin-left: -45px; }</style></html>@charset "utf-8";/* CSS Document */body{ font-family:"宋體"; font-size:14px;}a{ color:#000; text-decoration:none;}a:hover{color:#F00; text-decoration:underline;}p{ line-height:28px; text-indent:2em; letter-spacing:2px;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：簡(jiǎn)單
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
