基于HTML+CSS+JavaScript仿華為手機電子商城

常見網頁設計作業題材有個人、美食、公司、學校、旅遊、電商、寵物、電器、茶葉、家居、酒店、舞蹈、動漫、服裝、體育、化妝品、物流、環保、書籍、婚紗、遊戲、節日、戒煙、電影、攝影、文化、家鄉、鮮花、禮品、汽車、其他等網頁設計題目, A+水準作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求。原始HTML+CSS+JS頁面設計, web大學生網頁設計作業源碼，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用。

文章目錄🌰

一、網頁介紹📖
一、網頁效果🌌
二、代碼展示😈

1.HTML結構代碼 🧱
2.CSS樣式代碼 🏠

三、個人總結😊
四、更多幹貨🚀

一、網頁介紹📖

1 網頁簡介：此作品為學生個人首頁網頁設計題材，HTML+CSS 布局制作,web前端期末大作業,大學生網頁設計作業源碼，這是一個不錯的網頁制作，畫面精明，代碼為簡單學生水準, 非常适合初學者學習使用。

2.網頁編輯：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟體進行運作及修改編輯等操作）。

3.知識應用：技術方面主要應用了網頁知識中的: Div+CSS、滑鼠滑過特效、Table、導航欄效果、Banner、表單、二級三級頁面等，視訊、音頻元素、Flash，同時設計了Logo（源檔案）所需的知識點。

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

<!DOCTYPE html>
<html>
<head>
    <title> new document </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="hw_index.css" >
    <link rel="icon" href="img/hw.ico">
    <script src="hw_index.js"></script>
</head>
<body>
<!-- 頁面頂部 -->
<!-- 頂部容器 ：width:100% -->
<header id="top">
    <!-- 内容顯示區域 ：width : 1211px -->
    <div id="top_box">
        <ul class="lf">
            <li><a href="#">華為官網</a></li>
            <li><a href="#">華為榮耀</a></li>
            <li>
                <a href="#">軟體應用</a>
                <!--滑鼠移入移出事件-->
            </li>
            <li><a href="#">花粉俱樂部</a></li>
            <li><a href="#">Select Region</a></li>
        </ul>
        <ul class="rt">
            <li><a href="#">登入</a></li>
            <li><a href="#">注冊</a></li>
            <li><a href="#">我的訂單</a></li>
            <li><a href="#">V碼(優購碼)</a></li>
            <li><a href="#">手機版</a></li>
            <li>
                <a href="#">網站導航</a>
                <!--滑鼠移入移出事件-->
            </li>
        </ul>
    </div>
</header>
<!-- logo 和 搜尋框 -->
<div id="top_main">
    <div class="lf  top_main_left">
        <img src="img/image/newLogo.png" alt="" />
    </div>
    <div class="lf search_box">
        <div class="search">
            <input type="text" class="text" id="txtSearch"/>
            <input type="button" class="button" value="搜尋"/>
        </div>
        <div class="hot_words">
            <span>熱門搜尋：</span>
            <a href="#"> 5C</a>
            <a href="#"> HUAWEI P9</a>
            <a href="#"> 5X</a>
            <a href="#">榮耀7</a>
            <a href="#"> Mate 8</a>

        </div>
    </div>
    <div class="lf" id="my_hw">我的商城</div>
    <div class="lf" id="settle_up">我的購物車</div>
    <div class="lf" id="weixin">
        <img src="img/qrcode_vmall_wechat01.jpg" style="width:75px;height:75px;" alt=""/>
        <p>微信關注我們</p>
    </div>
</div><!--top_main-->

<!-- 導航 -->
<nav id="nav">
    <div id="category">
        <a href="#">全部商品</a>
    </div>
    <ul id="nav_items" class="lf">
        <li><a href="#">首頁</a></li>
        <li><a href="#">華為專區</a></li>
        <li><a href="#">榮耀專區</a></li>
        <li><a href="#">榮耀暢玩5C</a><s></s></li>
        <li><a href="#">HUAWEI P9 Plus</a></li>
        <li><a href="#">榮耀7</a></li>
        <li><a href="#">精彩頁面</a></li>
    </ul>
</nav>
<!-- banner 廣告 -->
<div id="banner">
    <ul id="cate_box" class="lf">
        <li>
            <h3><a href="#">手機</a></h3>
            <p><span>榮耀</span><span>暢玩</span><span>華為</span><span>Mate/P系列</span></p>
        </li>
        <li>
            <h3><a href="#">平闆 & 穿戴</a></h3>
            <p><span>平闆電腦 </span><span>手環</span><span>手表</span></p>
        </li>
        <li>
            <h3><a href="#">智能家居</a></h3>
            <p><span>電力貓</span><span>路由器 </span><span>電視盒子</span></p>
        </li>
        <li>
            <h3><a href="#">必備配件</a></h3>
            <p><span>入耳式耳機</span><span>保護殼</span><span>保護套</span></p>
        </li>
        <li>
            <h3><a href="#">潮流配件</a></h3>
            <p><span>支架 </span><span>自拍杆/器 </span><span>智能開關/插座</span></p>
        </li>
        <li>
            <h3><a href="#">應用市場</a></h3>
            <p><span>手機遊戲 </span><span>手機應用</span></p>
        </li>
    </ul>
    <!--圖檔輪播 -->
    <form>
        <div class="slider">
            <img id="slider_img" class="img_slider" src="img/slide01.png" alt=""/>
        </div>
    </form>

</div>
<div class="hr-2"></div>
<!-- 網頁主體 -->
<section id="main">
    <div class="layout">
        <div class="fl u-4-3 lf">
            <ul>
                <li class="channel-pro-item">
                    <!--<i class="p-tag"><img src="img/new_ping.png" style="padding-left: 0" alt=""/></i>-->
                    <div class="p-img">
                        <img src="img/phone01.png" alt=""/>
                    </div>
                    <div class="p-name lf"><a href="#">HUAWEI P9 Plus</a></div>
                    <div class="p-shining">
                        <div class="p-slogan">一上手，就愛不釋手</div>
                        <div class="p-promotions">5月6日10:08 火爆開售</div>
                    </div>
                    <div class="p-price">
                        <em>¥</em>
                        <span>3988</span>
                    </div>
                    <div class="p-button lf">
                        <a href="#">立即搶購</a>
                    </div>
                </li>
                <li class="channel-pro-item" style="background-color:#E2F9FB"><!--榮耀暢玩5C-->
                    <!--<i class="p-tag"><img src="img/new_ping02.png" alt=""/></i>-->
                    <div class="p-img">
                        <img src="img/phone02.png" alt=""/>
                    </div>
                    <div class="p-name lf"><a href="#">榮耀暢玩5C</a></div>
                    <div class="p-shining">
                        <div class="p-slogan">16納米8核芯千元普及風暴</div>
                        <div class="p-promotions">5月10日10:08震撼開售</div>
                    </div>
                    <div class="p-price">
                        <em>¥</em>
                        <span>899</span>
                    </div>
                    <div class="p-button lf">
                        <a href="#">立即搶購</a>
                   </div>
                </li>
                <div class="hr-2"></div>
                <li class="channel-pro-item" style="background-color:#FFFCE7"><!--榮耀暢玩5C-->

             </dt>
         </dl><dl class="s2">
         <dt>
             <i></i>
             關于商城
         <dd>
             <ol>
                 <li><a href="">公司介紹</a></li>
                 <li><a href="">華為商城簡介</a></li>
                 <li><a href="">聯系客服</a></li>
             </ol>
         </dd>
         </dt>
     </dl>
         </dl><dl class="s2">
         <dt>
             <i></i>
             關注我們
         <dd>
             <ol>
                 <li><a href="">新浪微網誌</a></li>
                 <li><a href="">騰訊微網誌</a></li>
                 <li><a href="">花粉社群</a></li>
                 <li><a href="">商城手機版</a></li>
             </ol>
         </dd>
         </dt>
     </dl>

     </div>
<footer id="foot_box">
    <div class="footer-otherLink">
        <p style="text-align:left; text-align:">
            友情連結 | 華為官網 | 華為消費者業務 | 榮耀官網 | 花粉俱樂部 | 莫塞爾商城 | 愛旅官網 | 華為應用市場 | 萬表網 | 手機之家 | 中商情報網 | 鑽石小鳥 | 刷機精靈 | 安卓市場 | 優購物官網 | 移動叔叔 | 奧特萊斯 |

        </p>
        <p style="text-align:left;text-align:"">
            中關村商城 | 酷狗音樂 | 華為商城手機版 | 手機世界 | 百信手機網 | 一呼百應網 | 卡寶寶網 | 多特軟體下載下傳 | 嗨淘網 | 同步助手 | 蜂鳥攝影網 | 奇珀論壇 | 家具商城 | 世界名表 | 拍鞋網商城 | 歐寶麗珠寶 | 尋購網 |
        </p>
        <p style="text-align:left; text-align:"">
            九塊郵官網 | 安卓遊戲 | 阿裡巴巴生意經 | 手機大全 | 安卓軟體園 | 卓大師刷機 | 智機論壇 | 電子産品世界 | 曆趣網 | 網購返利 | 中國供應商 | Apple110 | 91.手機門戶網 | 添翼圈社群 | 易購官網 | 美樂樂家具網 |
        </p>
        <p style="text-align:left; text-align:"">
            智能電視網 | 快遞查詢 | 億智蘑菇手機網 | UC浏覽器 | 以舊換新 | 華為P9 | 攜程租車 | 安卓市場 | 申請連結 >>
        </p>
    </div>
    </div>
    </div>
    </div>
    <div class="footer-warrant-area">
        <p style="text-align:left; text-align:">
            隐私政策 服務協定 Copyright © 2012-2016 VMALL.COM 版權所有 保留一切權利
        </p>
        <p style="text-align:left; text-align:">
            <img src="img/20160226162651249.png" alt=""/>
            蘇公網安備 32011402010009号 | 蘇ICP備09062682号-9 | 增值電信業務經營許可證：蘇B2-20130048 | 網絡文化經營許可證：蘇網文[2012]0401-019号
        </p>
        <p style="text-align:left; text-align:" class="footer-img">
            <img src="img/20160226162415360.png" alt=""/>
            <img src="img/20160226162521265.png" alt=""/>
            <img src="img/20160226162531395.png" alt=""/>
        </p>
    </div>
</footer>
        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/bootstrap.js"></script>

</body>
</html>

2.CSS樣式代碼 🏠

#top_box{
    height:30px;
}
#top_box>img{
    float:left;
    margin-top:8px;
    margin-right:5px;
}
#top_main:after{
    content: "";
    display: block;
    clear: both;
}
#top_box>ul>li{
    float:left;
    text-align:center;
    padding-right: 25px;
}

.search_box{
    width:510px;
    padding:10px 0px 0 40px;
    margin:10px 0px 10px 110px;
    position:relative;
}
.search_box div.search{
    width:500px;
    height:30px;
    border: 3px solid #CA141D;
    background-color: #CA141D;
}
input.text{
    width:405px;
    height:19px;
    padding:5px;
    background-color: #ffffff;
    line-height: 20px;
    color: #999999;
    font-family: arial,"\5b8b\4f53";
}
input.button{
    width:75px;
    height:30px;
    font-size:14px;
    font-weight: 700;
    color: #fff;
    background:#CA141D;
}
div.hot_words,{
    height:18px;
}
div.hot_words:after{
    content: "";
    display:block;
    clear: both;
}
div.hot_words span, div.hot_words a{
    float:left;
    font-weight: 400;
    margin-right: 15px;
}
#my_hw,#settle_up{
    width:99px;
    height:30px;
    line-height: 30px;
    margin-top: 26px;
    padding: 0 4px 0 0px;
    border: 1px solid #EFEFEF;
    background-color: #FFF;
    text-align: center;
    cursor: pointer;
    position: relative;
    border-radius: 2px;
}
#weixin{
    margin: 10px 0px 5px 80px;
}
.top_main_left{
    margin-top: 26px;
}
/*導航*/
#nav {
    height: 40px;
}
#category {
    width: 245px;
    float: left;
    background: #CD2A2C;
    height: 40px;
}

三、個人總結😊

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分；
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成；
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術；
菜單美觀、醒目，二級菜單可正常彈出與跳轉；
要有JS特效，如定時切換和手動切換圖檔新聞；
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用；
頁面清爽、美觀、大方，不雷同。
網站前端程式不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

基于HTML+CSS+JavaScript仿華為手機電子商城

文章目錄🌰

一、網頁介紹📖

一、網頁效果🌌

二、代碼展示😈

1.HTML結構代碼 🧱

2.CSS樣式代碼 🏠

三、個人總結😊

繼續閱讀

基于Echarts實作可視化資料大屏工具廠大屏系統監控

基于HTML美食文化網頁設計與實作——html+css+javascript+jquery+bootstarp響應式西餐廳美食網站

基于HTML環保主題網頁項目的設計與實作——環保垃圾分類(HTML+CSS+JavaScript)

基于HTML電商項目的設計與實作——html靜态網站基于數位類電商購物網站網頁設計與實作共計30個頁面

基于HTML的環境網站設計 HTML+CSS環保網站項目實作帶設計說明psd

基于HTML+CSS制作靜态頁面【剪紙文化15頁】傳統文化設計題材 dreamweaver制作靜态html網頁設計作業作品

基于Echarts實作可視化資料大屏機械裝置監測大資料統計平台HTML頁面

基于Echarts實作可視化資料大屏物流大資料服務平台

基于Echarts實作可視化資料大屏智慧旅遊綜合服務平台系統

基于Echarts實作可視化資料大屏中國地圖城市區塊選擇代碼

基于VUE + Echarts 實作可視化資料大屏農村資訊可視化

Vue中使用echarts

基于Echarts實作可視化資料大屏物流雲大資料看闆頁面HTML模闆

設計大屏資料可視化需要注意的問題

基于VUE + Echarts 實作可視化資料大屏智慧校園可視化

基于HTML+CSS+JavaScript我的學校設計畢業論文源碼