制作一個簡單HTML靜態(tài)網(wǎng)頁（HTML+CSS）

這篇具有很好參考價值的文章主要介紹了制作一個簡單HTML靜態(tài)網(wǎng)頁（HTML+CSS）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

??精彩專欄推薦 ??文末獲取聯(lián)系
?? 作者簡介: 一個熱愛把邏輯思維轉變?yōu)榇a的技術博主
?? 作者主頁: 【主頁——??獲取更多優(yōu)質源碼】
?? web前端期末大作業(yè)：【??畢設項目精品實戰(zhàn)案例 (1000套) 】
?? 程序員有趣的告白方式：【??HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
??超炫酷的Echarts大屏可視化源碼：【?? Echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
?? HTML+CSS+JS實例代碼：【???HTML+CSS+JS實例代碼 (炫酷代碼) 繼續(xù)更新中…】
?? 免費且實用的WEB前端學習指南：【??web前端零基礎到高級學習視頻教程 120G干貨分享】

?? 關于作者: ??歷任研發(fā)工程師，技術組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。然而，對于技術的探索和追求從未停歇。 ??堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！

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

??茶文化網(wǎng)站、??????中華傳統(tǒng)文化題材、京劇文化??水墨風書畫、中國民間年畫文化藝術網(wǎng)站、等網(wǎng)站的設計與制作。

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

??? 這個首頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，內部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細致，使用hover來完成過渡效果、鼠標滑過效果等，使用表格、表單補充模塊，為方便新手學習, 個別源碼頁面中沒有使用js有需要的可以自行添加。

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

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

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

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

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

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

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

??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）??html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）?? css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）?? js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。

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

html+css網(wǎng)頁設計,html5期末大作業(yè),web前端,web前端期末大作業(yè),網(wǎng)頁設計,網(wǎng)頁作業(yè)

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

??HTML結構代碼

<!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" href="css/style.css">
    <title>實驗3</title>
</head>

<body>
    <div class="bigbox">
        <div class="imglogo">
            <img src="picture/logo.jpg" alt="">
        </div>
        <div class="banner">
            <div class="heard">
                <a href="">首頁</a>
                <a href="">新聞中心</a>
                <a href="">精彩圖片</a>
                <a href="">聯(lián)系我們</a>
            </div>
            <div class="xinwenlist">
                <div class="xinwen_list">
                    <h1>新聞公告</h1>
                    <ul>
                        <li>吉狄馬加專訪：“我不會停止深情地呼喚”</li>
                        <li>第37屆青春詩會詩叢上市丨詩人詩作選</li>
                        <li>"在重慶：娜夜詩歌朗誦會"在南濱路舉行</li>
                    </ul>
                </div>
                <div class="xinwen_list">
                    <h1>新聞資訊</h1>
                    <ul>
                        <li>頭條詩人 | 多多 ：在同一個夢里劃槳</li>
                        <li>《莫礪鋒講宋詩課》：七十絕妙好詩，一門大學課程</li>
                        <li>中國詩歌網(wǎng)每周精選第9期：一樽往事醉煙霞</li>
                    </ul>
                </div>
                <div class="xinwen_list">
                    <h1>新聞動態(tài)</h1>
                    <ul>
                        <li>300元稿酬邀您來評《去大明寺》（11月30日截止）</li>
                        <li>每日好詩評選（現(xiàn)代詩）第306期 網(wǎng)上公示 截止到11月28日</li>
                        <li>每日好詩評選（舊體詩）第306期 網(wǎng)上公示 截止到11月28日</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="msgs">
            <div class="msgs_left">
                <div class="title">
                    <a href="">首頁></a>
                    <a href="">新聞中心></a>
                </div>
                <div class="msgnei">
                    <h1>木瓜</h1>
                    <div class="neirong">
                        <div>
                            <p class="shou">《詩經(jīng)·大雅·抑》有“投我以桃，報之以李”之句，后世“投桃報李”便成了，成語，比喻相互贈答，禮尚往來。比較起來，《衛(wèi)風·木瓜》這一篇雖然也有從“投之以木瓜（桃、李），報之以瓊琚（瑤、玖）”生發(fā)出的成語“投木報瓊”（如托名宋尤袤《全唐詩話》就有“投木報瓊，義將安在”的記載），但“投木報瓊”的使用頻率卻根本沒法與“投桃報李”相提并論?？墒钦搨髡b程度還是《木瓜》更高，它是現(xiàn)今傳誦最廣的《詩經(jīng)》名篇之一。</p>
                            <img src="picture/1.webp" alt="">
                            <p>對于這么一首知名度很高而語句并不復雜的先秦古詩，古往今來解析其主旨的說法居然也有七種之多（據(jù)張樹波《國風集說》統(tǒng)計）。按，成于漢代的《毛詩序》云：“《木瓜》，美齊桓公也。衛(wèi)國有狄人之敗，出處于漕，齊桓公救而封之，遺之車馬器物焉。衛(wèi)人思之，欲厚報之，而作是詩也。”這一說法在宋代有嚴粲（《詩緝》）等人支持，在清代有魏源（《詩古微》）等人支持。與毛說大致同時的三家詩，據(jù)陳喬樅《魯詩遺說考》考證，魯詩“以此篇為臣下思報禮而作”，王先謙《詩三家義集疏》意見與之相同。從宋代朱熹起，“男女相互贈答說”開始流行，《詩集傳》云：“言人有贈我以微物，我當報之以重寶，而猶未足以為報也，但欲其長以為好而不忘耳。</p>
                        </div>
                        <div>
                            <p>疑亦男女相贈答之詞，如《靜女》之類?！边@體現(xiàn)了宋代《詩》學廢序派的革新疑古精神。但這一說法受到清代《詩》學獨立思考派的重要代表之一姚際恒的批駁，《詩經(jīng)通論》云：“以（之）為朋友相贈答亦奚不可，何必定是男女耶！”現(xiàn)代學者一般從朱熹之說，而且更明確指出此詩是愛情詩。因此詩主旨說法多不同，而“木瓜”作為文學意象也就被賦予了多種不同的象征意義。其中“臣子思報忠于君主”“愛人定情堅于金玉”“友人饋贈禮輕情重”三種意象逐漸成為“木瓜”意象的主流內涵。</p>

                            <p>《木瓜》一詩，從章句結構上看，很有特色。首先，其中沒有《詩經(jīng)》中最典型的句式——四字句。這不是沒法用四字句（如用四字句，變成“投我木瓜（桃，李），報以瓊琚（瑤、玖）；匪以為報，永以為好”，一樣可以），而是作者有意無意地用這種句式造成一種跌宕有致的韻味，在歌唱時易于取得聲情并茂的效果。其次，語句具有極高的重疊復沓程度。不要說每章的后兩句一模一樣，就是前兩句也僅一字之差，并且“瓊琚”“瓊瑤”“瓊玖”語雖略異義實全同，而“木瓜”“木桃”“木李”據(jù)李時珍《本草綱目》考證也是同一屬的植物．其間的差異大致也就像橘、柑、橙之間的差異那樣并不大。這樣，三章基本重復，而如此高的重復程度在整部《詩經(jīng)》中也并不很多，格式看起來就像唐代據(jù)王維詩譜寫的《陽關三疊》樂歌似的，——自然這是《詩經(jīng)》的音樂與文學雙重性決定的。</p>
                            <p>　“你贈給我果子，我回贈你美玉”</p>
                        </div>
                        <div>
                            <p>
                                ，與“投桃報李”不同，回報的東西價值要比受贈的東西大得多，這體現(xiàn)了一種人類的高尚情感（包括愛情，也包括友情）。這種情感重的是心心相印，是精神上的契合，因而回贈的東西及其價值的高低在此實際上也只具有象征性的意義，表現(xiàn)的是對他人對自己的情意的珍視，所以說“匪報也”?！巴段乙阅竟希ㄌ?、李），報之以瓊琚（瑤、玖）”，其深層語義當是：雖汝投我之物為木瓜（桃、李），而汝之情實貴逾瓊琚（瑤、玖）；我以瓊琚（瑤、玖）相報，亦難盡我心中對汝之感激。清牛運震《詩志》評此數(shù)語云：“惠有大于木瓜者，卻以木瓜為言，是降一格襯托法；瓊瑤足以報矣，卻說匪報，是進一層翻剝法?！彼脑挷⒎菦]有道理，但將木瓜、瓊瑤之類已基本抽象化的物品看得太實，其他解此詩者似也有此病。實際上，作者胸襟之高朗開闊，已無衡量厚薄輕重之心橫亙其間，他想要表達的就是：珍重、理解他人的情意便是最高尚的情意。從這一點上說，后來漢代張衡《四愁詩》“美人贈我金錯刀，何以報之英瓊瑤”，盡管說的是“投金報玉”。其意義實也與“投木報瓊”無異。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="msgs_right">
                <h1>圖文欣賞</h1>
                <ul>
                    <li>
                        <img src="picture/3.webp" alt="">
                    </li>
                    <li>
                        <img src="picture/4.webp" alt="">

                    </li>
                    <li>
                        <img src="picture/5.webp" alt="">

                    </li>

                </ul>
            </div>
        </div>
        <div class="yeshu">
            <div class="number">
                <a href="#">上一頁</a>
                <a href="#" class="kaung">1</a>
                <a href="#" class="kaung">2</a>
                <a href="#" class="kaung">3</a>
                <a href="#">下一頁</a>
            </div>
        </div>
        <div class="banquanxinxi">
            版權所有
        </div>
    </div>
</body>

</html>

??CSS樣式代碼


* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

body {
    background-image: url(../image/17401.gif);
    background-repeat: repeat;
}

.bigbox {
    width: 1000px;
    margin: 0 auto;
    height: 200px;
}

.imglogo {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.imglogo img {
    width: 160px;
}

.banner {
    width: 100%;
    height: 450px;
    background-image: url(../image/bg.jpg);
    background-size: 100%;
}

.heard {
    width: 800px;
    height: 50px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.heard a {
    height: 48px;
    line-height: 48px;
    text-decoration: none;
    display: inline-block;
    width: 160px;
    text-align: center;
    margin-top: 1px;
    color: black;
}

.heard a:not(:first-child) {
    margin-left: 48px;
}

.heard a:hover {
    background-color: rgba(117, 117, 117, 0.642);
}

.xinwenlist {
    margin-top: 410px;
    width: 1000px;
    display: flex;
}

.xinwen_list {
    width: 320px;
    display: inline-block;
    overflow: hidden;
}

.xinwen_list:not(:first-child) {
    margin-left: 20px;
}

.xinwen_list h1 {
    width: 100%;
    background-color: black;
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
}

.xinwen_list ul {
    width: 100%;
    padding-top: 10px;
    background-color: #fff;
    padding-bottom: 10px;
}

.xinwen_list ul li::before {
    margin-right: 10px;
    margin-left: 20px;
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 4px solid transparent;
    border-left: 4px solid red;
    border-bottom: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.xinwen_list ul li {
    width: 250px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xinwen_list ul li:hover {
    color: brown;
}

.msgs {
    width: 1000px;
    display: flex;
    margin-top: 120px;
}

.msgs_left {
    width: 700px;
    margin-right: 10px;
    background-color: #BEC6BF;
}

.title {
    height: 28px;
    line-height: 28px;
    background-color: rosybrown;
}

.title a {
    color: black;
    text-decoration: none;
    font-size: 12px;
}

.msgnei {
    width: 96%;
    padding-top: 1%;
    margin-left: 1%;
    padding-left: 1%;
    padding-right: 1%;
    margin-top: 10px;
}

.msgnei h1 {
    width: 100%;
    height: 28px;
    font-size: 18px;
    line-height: 28px;
    background-color: chocolate;
    text-align: center;
}

.neirong {
    width: 100%;
    display: flex;
}

.neirong p {
    font-size: 14px;
}

.neirong div {
    margin-top: 20px;
    width: 33.4%;
}

.neirong div:nth-child(2) {
    padding-left: 1%;
    padding-right: 1%;
    margin-left: 1%;
    margin-right: 1%;
    border-right: 1px dashed rgb(81, 81, 81);
    border-left: 1px dashed rgb(81, 81, 81);
}

.neirong img {
    width: 70%;
    margin-left: 15%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.shou:first-letter {
    font-size: 28px;
    font-weight: bold;
    font-family: 黑體;
}

.msgs_right {
    width: 30%;
    background-color: rgb(226, 226, 226);
    overflow: hidden;
}

.msgs_right h1 {
    width: 100%;
    height: 28px;
    font-size: 18px;
    line-height: 28px;
    background: linear-gradient(to bottom, #8C6D74, 52%, #B2A6BE);
    padding-left: 20px;
    margin-bottom: 20px;
}

.msgs_right ul {
    width: 100%;
}

.msgs_right ul li {
    width: 200px;
    height: 90px;
    overflow: hidden;
    background-color: violet;
    text-align: center;
    margin-left: 45px;
    margin-bottom: 70px;
}

.msgs_right ul li:first-child {
    animation: donghua 0.5s infinite;
    animation-delay: 1s linear;
    animation-iteration-count: 1;
}

.msgs_right ul li:nth-child(2) {
    animation: donghua 0.5s infinite;
    animation-delay: 2s linear;
    animation-delay: 2s;
    animation-iteration-count: 1;
}

.msgs_right ul li:nth-child(3) {
    animation: donghua 0.5s infinite;
    animation-delay: 2s linear;
    animation-delay: 3s;
    animation-iteration-count: 1;
}

.msgs_right ul li img {
    width: 100%;
}

@keyframes donghua {
    from {
        width: 200px;
        height: 90px;
        margin-left: 45px;
        margin-bottom: 70px;
    }
    to {
        width: 220px;
        height: 99px;
        margin-left: 40px;
        margin-bottom: 66px;
    }
}

.yeshu {
    width: 1000px;
    margin: 0 auto;
    background-color: #fff
}

.number {
    width: 693px;
    height: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
}

.number a {
    text-decoration: none;
}

.kaung {
    display: inline-block;
    height: 20px;
    width: 30px;
    border: 1px solid #ccc;
    background-color: rgb(209, 209, 209);
    position: relative;
    line-height: 20px;
}

.banquanxinxi {
    width: 1000px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    line-height: 40px;
}

六、?? 如何讓學習不再盲目

第一、帶著目標去學習，無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么，是想解決什么問題，實現(xiàn)怎樣的目標。

第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發(fā)現(xiàn)每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識

第三、學到了就要用到

有時，我們一天下來感覺學到了很多干貨，那么我們一定要將這些知識點和實際工作和生活聯(lián)系起來。知識和實踐相互聯(lián)系靠攏。愛學習是一件好事，但只有會學習的人，才有價值。

七、??更多干貨

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

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

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

以上內容技術相關問題??歡迎一起交流學習??????????????