時(shí)間:2023-10-14 18:48:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-10-14 18:48:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)
HTML做一個(gè)個(gè)人博客頁(yè)面(純html代碼):精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡(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 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"> <title>個(gè)人介紹</title> <link rel="stylesheet" href="css/style.css"></head><body> <div id="bigbox"> <div id="banner"> <img src="picture/banner.png" alt=""> </div> <nav> <a class="dangqian" href="">首頁(yè)</a> <a href="duanwen.html">短文</a> <a href="rizhi.html">日志</a> <a href="liuyan.html">留言板</a> </nav> <div id="main"> <div id="main_left"> <h2>關(guān)于我</h2> <img src="picture/me.png" alt=""> <p> <span>姓名</span>:*****<br> <span>性別</span>:男<br> <span>愛(ài)好</span>:聽(tīng)歌 踢足球 打游戲<br> <span>性格</span> :開(kāi)朗<br> <span>家鄉(xiāng)</span>:浙江烏恰縣<br> <span>專業(yè)</span>:計(jì)算機(jī)網(wǎng)絡(luò)技術(shù) </p> </div> <div id="main_right"> <h2>熱愛(ài)生活</h2> <p> 一、歲月從來(lái)不曾靜好,只是有人在替你背負(fù)枷鎖,含淚前行。也許是父母,也許是朋友,也許是陌生人……無(wú)論是誰(shuí),請(qǐng)記得常懷感恩之心。 </p> <p> 二、這個(gè)世界并不完美,甚至有點(diǎn)殘酷。你無(wú)法決定下一段旅途遇見(jiàn)的是好事還是壞事,可你能決定面對(duì)它們的態(tài)度。你看這個(gè)世界的角度,決定了這個(gè)世界給你的溫度。 </p> <p> 三、總會(huì)有一件事讓你瞬間長(zhǎng)大,也總會(huì)有一個(gè)人讓你淚如雨下。愿你早日領(lǐng)教這個(gè)世界的深深惡意,讓自己活得開(kāi)心得意。 </p> <p> 四、想要與眾不同,卻總隨遇而安,想要做很多未做的事,卻在現(xiàn)實(shí)棘手的吃喝拉撒前低下了頭,我們間歇性熱血滿腔,長(zhǎng)時(shí)間迷茫犯懶,別等了,再努力試試看! </p> <img src="picture/life.png" alt=""> </div> </div> <div id="luxing"> <h2>旅行生活</h2> <div> <div id="picture"> <img src="picture/11.png" alt=""> <p>在日月潭</p> </div> <div id="picture"> <img src="picture/22.png" alt=""> <p> 在毛里求斯 </p> </div> <div id="picture"> <img src="picture/33.png" alt=""> <p> 在馬爾代夫 </p> </div> <div id="picture"> <img src="picture/44.png" alt=""> <p> 在玉龍雪山 </p> </div> </div> </div> <footer> <p> 版權(quán)所有?***** </p> </footer> </div></body></html>
* { margin: 0px; padding: 0px; list-style: none;}body { background-color: #4B7C99;}#bigbox { width: 1000px; margin: 0 auto;}#banner { width: 1000px; font-size: 0px;}#banner img { width: 1000px;}nav { background-color: #CCD0D9; width: 1000px; height: 60px;}nav a { text-decoration: none; line-height: 60px; margin-left: 50px; margin-right: 50px; color: #020C16; font-weight: bold;}nav a:hover { color: #1a9be6;}.dangqian { color: #1a9be6;}#main { height: 490px; width: 1000px; margin: 0 auto; background-color: #86aacb;}#main_left { width: 300px; display: inline-block; background-color: #86aacb; float: left;}h2 { box-sizing: border-box; padding-left: 10px; font-size: 20px; line-height: 30px; background-color: #03151F; color: #CCD0D9;}#main_left img { width: 300px;}#main_left p { margin-left: 10px; line-height: 40px;}#main_left span { font-weight: bold;}#main_right { position: relative; width: 680px; margin-left: 20px; display: inline-block; height: 200px;}#main_right img { position: absolute; width: 260px; right: 0px; top: 30px;}#main_right p { width: 400px; display: inline-block; margin-left: 10px; text-indent: 32px; line-height: 30px; margin-top: 10px;}#luxing { background-color: #86aacb; width: 1000px;}#luxing div { font-size: 0px;}#picture { font-size: 0px; display: inline-block; margin-left: 25px; margin-right: 25px; margin-top: 25px;}#picture img { width: 200px;}#picture p { font-size: 16px; text-align: center; line-height: 60px;}footer { line-height: 60px; font-size: 14px; text-align: center; background-color: #CCD0D9;}#main_right ul li { width: 660px; margin-left: 10px; font-size: 12px; margin-top: 10px; border-bottom: 1px dotted #ccc; padding-bottom: 10px;}#main_right ul li span { font-size: 14px; font-weight: bold;}#liuyan { width: 660px; margin-left: 10px; margin: 20px;}#liuyan span { display: inline-block; width: 80px; line-height: 40px;}button { width: 100px; height: 30px; margin-left: 80px;}
請(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)鍵詞:
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。