HTML5期末考核大作業——學生網頁設計作業源碼HTML+CSS+JavaScr

【作者主頁——獲取更多優質源碼】

【web前端期末大作業——畢設項目精品實戰案例(1000套)】

文章目錄

一、網站題目?

美食網頁介紹、甜品蛋糕、地方美食小吃文化、餐飲文化、等網站的設計與制作。

二、網站描述??

美食主題網站主要對各種美食進行展示，讓瀏覽者清晰地了解到各種美食的詳細信息，便于瀏覽者進行選擇。該模塊的左側有個美食分類，用戶可以選擇自己喜歡的種類，當點擊種類后，就會在右側出現該分類下的各種美食，用戶可以點擊自己感興趣的食品，從而看到它的具體信息。它的具體信息包括配料、產地及它的一些功能，使用戶對該食品有著全面的認識。

三、網站介紹

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

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

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

網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、網頁圖片文件；

網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、、、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。

其中：

（1）html文件包含：其中index.html是首頁、其他html為二級頁面；

（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；

（3） js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。

四、網站效果

五、代碼實現 HTML結構代碼

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>中華文化title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <embed src="music/ge.mp3" hidden="true" autostart="true" loop="true">
head>
<body>
    <div>
        <div class="mw">----弘揚中華傳統美德----div>
        <div id="main">
            <div id="main_im">
                <div class="nav"><a href="index.html">首頁a><a href="page/page1.html">設計理念a><a href="page/page2.html">起源a><a href="page/page3.html">形成與發展a><a href="page/page4.html">表現方面a><a href="page/page5.html">格言a><a href="page/#">歷史文化a><a href="page/#">諸子百家a>
                    <a
                        href="page/#">核心內涵a>

                div>
                <p class="i_p">中華文化，亦稱華夏文明，是世界上最古老的文明之一，也是世界上持續時間最長的文明。p>
                <div class="center "> <a href="#"><img src="images/wh2.jpg" width="800" />a>div>
                <p class="i_p">中華民族傳統美德，是指中國五千年歷史流傳下來，具有影響，可以繼承，并得到不斷創新發展，有益于下代的優秀道德遺產。概括起來就是：中華民族優秀的道德品質、優良的民族精神、崇高的民族氣節、高尚的民族情感以及良好的民族習慣的總和。它標志著中華民族的“形”與“魂”。它也是我國人民兩千多年來處理人際關系、人與社會關系和人與自然關系的實踐的結晶p>
                <div class="center "> <a href="#"><img src="images/gg.jpg" width="800"  />a>div>
                <p class="i_p">p>
                <div id="foot">
                    <p>版權所有p>
                div>
            div>
        div>
    div>
body>
html>

CSS樣式代碼


@charset "utf-8";
/* CSS Document */
body {
    color: #6e6e6e;
    font-size: 13px;
    line-height: 1.4em;
    background: url(../images/bj.jpg) top no-repeat fixed;
}
* {
    margin: 0;
    padding: 0;
    font-family: Tahoma, Geneva, sans-serif;
}
.m10 {
    margin-top: 10px;

    padding-bottom: 100px;
    width: 500px;
}
.center {
    text-align: center;
}
a,
a:link,
a:visited {
    color: #7f0d0d;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    border: none;
}
#cont {
    width: 980px;
    height: 1000px;
    margin: auto;
}
#head {
    width: 980px;
    height: 350px;
    margin: auto;
}
#main {
    width: 980px;
    height: auto;
    background: #ffffff;
    margin: auto;
    margin-bottom: 100px;

}
.main_im {
    width: 400px;
    height: 250px;
    float: left;
    margin: 20px 60px 20px 30px;
}
.detail {
    font-size: 18px;
    color: #333333;
    text-align: center;
}
#D_main {
    width: 980px;
    height: auto;
    background: #ffffff;
    margin: 50px auto;
}
#D_main_im {
    width: 400px;
    height: auto;
    margin: 30px auto;
}
#D_main_im_title {
    font-size: 18px;
    padding-top: 50px;
    font-weight: bold;
    color: #000000;
}
.nav {
    width: 980px;
    height: 40px;
    background-color: #093;
    margin: 10px auto;
    padding-top: 20px;

}
.nav a {
    color: #fff;
    font-size: 24px;
    margin: 13px;
}
.nav a:hover {
    color: #F30;
    text-decoration: none;
}
.nav2 {
    width: 980px;
    height: 30px;
    background-color: #663300;
    margin: 5px auto;
    padding-top: 10px;
    text-align: center;
}
.nav2 a {
    font-size: 18px;
    margin: 10px;
    color: #fff;
    font-weight: bold;
}
.nav2 a:hover {
    color: #00ff00;
    text-decoration: none;
}
.mw {
    width: 960px;
    height: 30px;
    background: #900;
    margin: 5px auto;
    margin-bottom: 10px;
    text-align: center;

    font-size: 24px;
    color: #FFFFFF;
    padding: 10px;
}
.i_p {
    width: 760px;
    height: auto;
    padding: 10px;
    margin: auto;
    font-size: 16px;
    color: 333;
    text-indent: 2em;
    line-height: 28px;
}
#foot {
    height: 100px;
    width: 980px;
    margin-right: auto;
    margin-left: auto;
    color: #FFF;
    margin-top: 0px;
    background-color: #093;
}
#foot p {
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 300px;
    display: block;
    height: 50px;
    padding-top: 30px;
    font-size: 14px;
}

八、更多干貨

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

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

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

在線咨詢

上一篇：簡單的網站優化方法
下一篇：seo優化是什么工作前景如何

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5期末考核大作業——學生網頁設計作業源碼HTML+CSS+JavaScr

您的項目需求