HTML5期末考核大作業(yè)——學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼HTML+CSS+JavaScr

【作者主頁——獲取更多優(yōu)質(zhì)源碼】

【web前端期末大作業(yè)——畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例(1000套)】

文章目錄

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

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

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

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

三、網(wǎng)站介紹

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

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

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

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

網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、、、、Text 、++ 等任意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)站效果

五、代碼實(shí)現(xiàn) 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 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">----弘揚(yáng)中華傳統(tǒng)美德----div>
        <div id="main">
            <div id="main_im">
                <div class="nav"><a href="index.html">首頁a><a href="page/page1.html">設(shè)計理念a><a href="page/page2.html">起源a><a href="page/page3.html">形成與發(fā)展a><a href="page/page4.html">表現(xiàn)方面a><a href="page/page5.html">格言a><a href="page/#">歷史文化a><a href="page/#">諸子百家a>
                    <a
                        href="page/#">核心內(nèi)涵a>

                div>
                <p class="i_p">中華文化，亦稱華夏文明，是世界上最古老的文明之一，也是世界上持續(xù)時間最長的文明。p>
                <div class="center "> <a href="#"><img src="images/wh2.jpg" width="800" />a>div>
                <p class="i_p">中華民族傳統(tǒng)美德，是指中國五千年歷史流傳下來，具有影響，可以繼承，并得到不斷創(chuàng)新發(fā)展，有益于下代的優(yōu)秀道德遺產(chǎn)。概括起來就是：中華民族優(yōu)秀的道德品質(zhì)、優(yōu)良的民族精神、崇高的民族氣節(jié)、高尚的民族情感以及良好的民族習(xí)慣的總和。它標(biāo)志著中華民族的“形”與“魂”。它也是我國人民兩千多年來處理人際關(guān)系、人與社會關(guān)系和人與自然關(guān)系的實(shí)踐的結(jié)晶p>
                <div class="center "> <a href="#"><img src="images/gg.jpg" width="800"  />a>div>
                <p class="i_p">p>
                <div id="foot">
                    <p>版權(quán)所有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.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “點(diǎn)贊” “??評論” “收藏” 一鍵三連哦！

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

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

在線咨詢

上一篇：簡單的網(wǎng)站優(yōu)化方法
下一篇：seo優(yōu)化是什么工作前景如何

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5期末考核大作業(yè)——學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼HTML+CSS+JavaScr

您的項(xiàng)目需求