Web大學(xué)生網(wǎng)頁作業(yè)成品：個人博客主頁 (純HTML+CSS代碼)

這篇具有很好參考價值的文章主要介紹了Web大學(xué)生網(wǎng)頁作業(yè)成品：個人博客主頁 (純HTML+CSS代碼)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

??精彩專欄推薦 ??文末獲取聯(lián)系
?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
?? 作者主頁: 【主頁——??獲取更多優(yōu)質(zhì)源碼】
?? web前端期末大作業(yè)：【??畢設(shè)項目精品實(shí)戰(zhàn)案例 (1000套) 】
?? 程序員有趣的告白方式：【??HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
??超炫酷的Echarts大屏可視化源碼：【?? echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
?? 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南：【??web前端零基礎(chǔ)到高級學(xué)習(xí)視頻教程 120G干貨分享】
?? 關(guān)于作者: ??歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。然而，對于技術(shù)的探索和追求從未停歇。 ??堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！

一、?????網(wǎng)站題目

個人網(wǎng)頁制作大學(xué)生個人網(wǎng)頁設(shè)計個人網(wǎng)站模板簡單靜態(tài)HTML個人網(wǎng)頁作品

二、??網(wǎng)站描述

??? 大學(xué)生靜態(tài)HTML網(wǎng)頁設(shè)計作品，采用DIV CSS布局制作，頁面主體內(nèi)容區(qū)域?qū)挾葹?200PX。網(wǎng)頁整體使用CSS設(shè)置了網(wǎng)頁背景圖片。頁面精美包含多個排版布局，學(xué)生網(wǎng)頁作業(yè)水平制作。

?? 一套優(yōu)質(zhì)的??網(wǎng)頁設(shè)計應(yīng)該包含 (具體可根據(jù)個人要求而定)

頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。
所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成。
頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)。
菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)。
要有JS特效，如定時切換和手動切換圖片輪播。
頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。
頁面清爽、美觀、大方，不雷同。。
不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

三、??網(wǎng)站介紹

??網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。

??網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時看到網(wǎng)站的效果。

??網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。

??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；

??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：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代碼）。

四、??網(wǎng)站演示

web前端個人主頁代碼,網(wǎng)頁設(shè)計與制作,前端,html,css,旅游,課程設(shè)計

五、?? 網(wǎng)站代碼

??HTML結(jié)構(gòu)代碼

<!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 charset="UTF-8">
    <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" />
    <title>我的主頁</title>
</head>

<body>
    <div class="nb_body">
        <div class="nb_main">
            <div class="header">
                <div class="homeName">
                    <div class="myFamilyName"><i>孫楊的大學(xué)主頁</i></div>
                    <div class="myFamilyInfo">
                        <marquee behavior="scroll" direction="left" width="100%" scrollamount="2">
                            歡迎您來到我的小家，隨便看看吧！
                        </marquee>
                    </div>
                </div>
            </div>
            <div class="nb_are nb_nav">
                <div class="nav2">
                    <ul>
                        <li class="small selected"><a href="index2.html">首頁</a></li>
                        <li><a href="mylog.html">我的日志</a></li>
                        <li><a href="aboutMe.html">我的簡歷</a></li>
                        <li><a href="myPhoto.html">我的相冊</a></li>
                        <li><a href="myVideo.html">我的視頻</a></li>
                    </ul>
                </div>
            </div>
            <div class="nb_are nb_smt"></div>
            <div class="nb_are nb_cnt">
                <div class="mainLeft">
                    <div class="mainLeftTop"></div>
                    <div class="mainLeftCenter">
                        <div class="left-title"><b>個人簡介</b></div>
                        <div class="left-photo"><img src="images/wo.jpg" /></div>
                        <div class="left-name"><b>孫楊</b></div>
                        <div class="left-info">
                            <ul>
                                <li>姓名：孫楊</li>
                                <li>性別：男</li>
                                <li>生日：1991年12月1日</li>
                                <li>郵箱:<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="f0c1c2c3c4c5c6c7c8c9b08181de939f9d">[email&#160;protected]</a>
                                    <script data-yjshash='f9e31' type="text/javascript">
                                        /* <![CDATA[ */ ! function(t, e, r, n, c, a, p) {
                                            try {
                                                t = document.currentScript || function() {
                                                    for (t = document.getElementsByTagName('script'), e = t.length; e--;)
                                                        if (t[e].getAttribute('data-yjshash')) return t[e]
                                                }();
                                                if (t && (c = t.previousSibling)) {
                                                    p = t.parentNode;
                                                    if (a = c.getAttribute('data-yjsemail')) {
                                                        for (e = '', r = '0x' + a.substr(0, 2) | 0, n = 2; a.length - n; n += 2) e += '%' + ('0' + ('0x' + a.substr(n, 2) ^ r).toString(16)).slice(-2);
                                                        p.replaceChild(document.createTextNode(decodeURIComponent(e)), c)
                                                    }
                                                    p.removeChild(t)
                                                }
                                            } catch (u) {}
                                        }() /* ]]> */
                                    </script>
                                </li>
                                <li>血型：o型</li>
                                <li>愛好：游泳 釣魚 健身</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mainRight">
                    <div class="mainRightTop"></div>
                    <div class="mainRightCenter">
                        <div class="Rtitle"><b>我的大學(xué)</b></div>
                        <div class="Rrain">
                            <p>我的愛好廣泛，喜歡旅行、聽音樂、下棋、各種體育運(yùn)動。是一個做事踏實(shí)、學(xué)習(xí)刻苦、有上進(jìn)心的學(xué)生。</p>
                            <p>高中時聽說大學(xué)學(xué)生會是人才的搖籃，在這里可以在同學(xué)長，同學(xué)的交流中發(fā)現(xiàn)自己的不足，并加以改正，好讓自己能更好的為班級，為同學(xué)服務(wù)。我想學(xué)生會對我來說也是一個鍛煉自己的機(jī)會也是一個展示自己才華的舞臺。</p>
                            <p>剛踏進(jìn)大學(xué)，我就嚴(yán)格要求自己，立志要在大學(xué)生涯中有所成就，從全方面發(fā)展自己。</p>
                            <p>我也是一個追求完美的人，我知道世上沒有十全十美的人存在，但我們可以去追求，去不斷的向它靠攏，每一個人或多或少都有缺點(diǎn)，我把這些缺點(diǎn)比作一個無形的洞，我們都知道洞是可以填補(bǔ)的，就好比缺點(diǎn)也是可以改正的，這也就要我們怎樣把這個洞一點(diǎn)一點(diǎn)填上，就是怎樣一點(diǎn)一點(diǎn)完善自己。洞是無形的，就如人不會是十全十美，我們或許永遠(yuǎn)填不滿這洞，就好像人不會十全十美，也就正如學(xué)習(xí)，學(xué)習(xí)是無止境的。因此我要不斷的填洞，不斷的學(xué)習(xí)，不斷的完善自己。所以，我選擇了我所追求的，追求了我所選擇的&mdash;&mdash;入學(xué)生會。</p>
                            <p>如果我有幸能得到你們的認(rèn)可，我將盡力辦好上級分派給我的任務(wù)，不辜負(fù)學(xué)長們對我期望，以此為新的起點(diǎn)，為文藝部出自己的一分力量。</p>
                            <p>雖說命運(yùn)掌握在自己手中,但有時付出了不一定有回報,如果我沒有入選，也不會就此灰心，我會下去總結(jié)經(jīng)驗教訓(xùn)，彌補(bǔ)不足。</p>
                            </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="nb_are nb_fot">
                <div class="copyRight">
                    體育系 游泳專業(yè) &nbsp;&nbsp;孫楊&nbsp;&nbsp; 版權(quán)所有&copy; 2014
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

??CSS樣式代碼

@charset "gb2312";
/* CSS Document */

body {
    background: #deceb0;
    padding: 0px;
    margin: 0px;
    font-size: 12px
}

ul,
li,
img {
    margin: 0px;
    padding: 0px;
    border: 0px;
    list-style: none
}

.clearfix {
    clear: both
}

.nb_body {
    background: url(../images/topbg_1.jpg) #deceb0 repeat-x left -24px;
    height: 270px
}

.nb_main {
    width: 1004px;
    height: auto;
    margin: 0px auto;
    position: relative;
}

.header {
    width: 1004px;
    height: 212px;
    position: relative
}

.homeName {
    margin: 0px auto;
    color: #8a703e;
    height: 212px;
    background-image: url(../images/headbgn.jpg);
    height: 212px;
}

.myFamilyName {
    width: 460px;
    height: 60px;
    line-height: 60px;
    color: #8a703e;
    font-size: 28px;
    position: absolute;
    left: 500px;
    top: 52px;
    font-weight: bold;
}

.myFamilyName i {
    font-style: normal;
}

.myFamilyInfo {
    width: 280px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0px;
    top: 92px;
    font-size: 14px;
}

.nb_nav {
    background: url(../images/nav_bg.jpg) no-repeat center top;
    height: 32px;
}

.nb_nav .nav2 {
    margin-left: 391px;
    height: 32px;
    line-height: 32px;
}

}

.myPhotoS a:hover {
    text-decoration: underline
}

.myPhotoS-list {
    width: 660px;
    margin: 50px auto;
}

.myPhotoS-list ul {
    width: 660px
}

.myPhotoS-list ul li {
    width: 220px;
    text-align: center;
    float: left
}

.myPhotoS-list img {
    width: 200px;
    min-height: 150px;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-clip: border-box
}

.myPhotoS-show {
    width: 660px;
    margin: 20px auto
}

.myPhotoS-show .img {
    width: 660px;
    overflow: hidden;
    text-align: center
}

.img img {
    width: 660px
}

.myPhotoS-show .pages {
    width: 150px;
    margin: 20px auto
}

六、?? 如何讓學(xué)習(xí)不再盲目

很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個時候每天刷自主刷一些題就非常重要（百煉成神），可以去牛客網(wǎng)上的編程初學(xué)者入門訓(xùn)練。該專題為編程入門級別，適合剛學(xué)完語法的小白練習(xí)，題目涉及編程基礎(chǔ)語法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式，可還原考試模式進(jìn)行模擬，也可通過練習(xí)模式進(jìn)行練習(xí) 。

七、??更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “??點(diǎn)贊” “??評論” “??收藏” 一鍵三連哦！

2.??【????????????關(guān)注我| ??獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學(xué)生畢業(yè)HTML模板、期末大作業(yè)模板、等! 「在這里有好多前端開發(fā)者，一起探討前端 Node 知識，互相學(xué)習(xí)」！

3.文章來源地址http://www.zghlxwxcb.cn/news/detail-779739.html

以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)??????????????

web前端個人主頁代碼,網(wǎng)頁設(shè)計與制作,前端,html,css,旅游,課程設(shè)計

到了這里，關(guān)于Web大學(xué)生網(wǎng)頁作業(yè)成品：個人博客主頁 (純HTML+CSS代碼)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！