時間：2023-10-16 13:48:01 | 來源：網(wǎng)站運營
時間：2023-10-16 13:48:01 來源：網(wǎng)站運營
大一學(xué)生《Web前端網(wǎng)課作業(yè)》基于HTML+CSS自我介紹網(wǎng)頁設(shè)計與制作：精彩專欄推薦 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 免費且實用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的個人網(wǎng)頁</title><link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><!----網(wǎng)站頭部開始----><div class="logo"><img src="images/logo.jpg"/></div><div id="nav"><ul> <li><a class="hos" href="index.html">首頁</a></li><li><a href="jiben.html">基本資料</a></li><li><a href="xingqu.html">興趣愛好</a></li><li><a href="zuoyouming.html">座右銘</a></li><li><a href="pingjia.html">自我評價</a></li></ul></div><!-----網(wǎng)站頭部結(jié)束--------------><!-----banner-------><div class="box" id="box"> <div class="inner"> <!--輪播圖--> <ul> <li><a href="#"><img src="images/banner1.jpg" alt=""></a></li> <li><a href="#"><img src="images/banner2.jpg" alt=""></a></li> <li><a href="#"><img src="images/banner3.jpg" alt=""></a></li> </ul> <ol class="bar"> </ol> <!--左右焦點--> <div id="arr"> <span id="left"> < </span> <span id="right"> > </span> </div> </div></div><!------banner結(jié)束-----><div class="main"> <div class="box4"> <img src="images/01.jpg"> <div class="right"> <h1>關(guān)于我</h1> <br> <p>我的的青春，有鮮紅色的熱情奔放，也有黑色的壓抑無味。我一直希望有一個自由的青春，做自己想要做的事；有一個快樂的青春，在海中暢所欲言；</p> <br /> <p> 人生是一條漫長的路，充滿荊棘與坎坷，如果說曲線比直線美，在于曲線是有轉(zhuǎn)折的，富有流動的韻味，那么人生也就正是因為荊棘而多彩，因為坎坷而美麗。</p> </div> </div> <div class="box4"> <img src="images/02.jpg"> <div class="right"> <h1>我的愛好</h1> <br> <p>大學(xué)喜歡上攝影，對攝影的喜愛，將近五年了。從數(shù)碼相機到單反，再到現(xiàn)在手機攝影。</p> <br /> <p>我開始明白攝影，它不單單依靠的是器材，我對于攝影的理解是它是我用來看待世界的方式，我攝影不但是為了展現(xiàn)美，我也可以用來創(chuàng)造美，讓更多的人看到這樣的美。</p> </div> </div> <div class="box4"> <img src="images/03.jpg"> <div class="right"> <h1>座右銘</h1> <br> <p>我讀的書愈多，就愈親近世界，愈明了生活的意義，愈覺得生活的重要。</p> <br /> <p>人生并不像火車要通過每個站似的經(jīng)過每一個生活階段。人生總是直向前行走，從不留下什么。</p> <br /> <p>人生最精彩的不是實現(xiàn)夢想的一瞬間,而是堅持夢想的過程。</p> </div> </div></div><div class="foot">?2019 我的個人網(wǎng)站主頁 版權(quán)所有</div><script type="text/javascript" src="js/banner.js"></script> </body></html>body { margin: 0 auto; font-size: 14px; font-family: "微軟雅黑"; line-height: 22px; background: #d8d7d7;}div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd { height: auto; margin: 0; padding: 0; vertical-align: middle;}li { list-style: none;}img { border: 0; margin: 0; padding: 0;}a:link { color: #333; text-decoration: none;}a:hover { color: #629705; text-decoration: none; overflow: hidden;}.logo { width: 1000px; height: 166px; margin: 0 auto;}#nav { width: 1000px; height: 50px; background: #fdc14c; margin: 0 auto;}#nav ul { width: 1000px; height: 50px; line-height: 50px; font-size: 14px; margin: 0 auto;}#nav ul li { width: 200px; height: 50px; line-height: 50px; color: #FFF; float: left; text-align: center;}#nav li a { color: #20201f; font-family: "微軟雅黑"; font-size: 16px; margin-left: 2px; display: block; font-weight: bold;}#nav li a:hover { color: #fff; background: #d58f08;}.hos { color: #fff !important; background: #d58f08;}.box { width: 1000px; height: 335px; margin: 0 auto;}.inner { width: 1000px; height: 335px; position: relative; overflow: hidden;}.inner img { width: 1000px; height: 335px; vertical-align: top}.box ul { width: 1000%; position: absolute; list-style: none; left: 0; top: 0;}.inner li { float: left;}ol { position: absolute; height: 20px; right: 20px; bottom: 12px; text-align: center; padding: 5px;}ol li { display: block; width: 20px; height: 20px; line-height: 20px; background-color: #fff; margin: 5px; cursor: pointer;}ol .current { background-color: red;}#arr { display: block;}#arr span { width: 30px; height: 40px; position: absolute; left: 14px; top: 156px; margin-top: -20px; background: #fff; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff;}#arr #right { right: 18px; left: auto;}.main { width: 1000px; margin: 0 auto; height: auto; overflow: hidden; background: #FFFFFF;} font-size: 12px; text-indent: 2em;}.pingjia-box01 { width: 840px; margin: 0 auto; margin-top: 0px; margin-bottom: 0px; margin-top: 30px; margin-bottom: 20px;}.pingjia-box01 img { width: 300px; height: 160px; float: left; margin-top: 20px; margin-right: 20px;}.pingjia-box01 .bx1 { height: 220px; padding: 20px; border: #333333 1px solid; margin-bottom: 20px;}.pingjia-box01 .bx1 h1 { font-size: 16px; height: 40px; line-height: 40px; padding-left: 10px; background: #75b980;}.pingjia-box01 .bx1 p { color: #787676; font-size: 14px; line-height: 30px; text-indent: 2em;}.zym-box01 { width: 840px; height: auto; margin: 0 auto; margin-top: 10px;}.zym-box02 { margin-top: 10px; line-height: 25px; font-size: 14px; width: 840px; margin: 0 auto; margin-bottom: 20px;}.scroll { height: 90px; width: 100%; overflow: hidden; position: relative; margin-top: 30px;}.scroll ul { width: 100%; position: absolute; left: 0; top: 0;}.scroll span { font-size: 20px; height: 30px;}.scroll li { height: 30px; line-height: 30px;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！關(guān)鍵詞：設(shè)計,學(xué)生,作業(yè)
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
