html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼

❤ 【作者主页—— 获取更多优质源码】 ❤ 【web前端期末大作业—— 毕设项目精品实战案例(1000套)】

@TOC

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码网站制作，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：、、、、、Text 、++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示 1.HTML结构代码

代码如下（示例）：以下仅展示部分代码供参考~

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="邓裕朋">
    <meta name="Keywords" content="Ecshop商城开发">
    <meta name="Description" content="一个月开发商城——邓裕朋">
    <title>echsop商城首页title>
    
    <link href="css/basic.css" style="text/css" rel="stylesheet">
    <link href="css/web.css" style="text/css" rel="stylesheet">
    
head>
<style type="text/css">
style>
<body>
    <div id="TopMain">
        
        
        <div id="Top">
            <a href="http://www.baidu.com" class="adv" target="_blank">
                <img src="images/adv.jpg" />
             a>
            <img src="images/close.png" class="close" />
            
        div>
        
        
        <div id="Header">
            
            <div class="Logo"><a href=""><img src="images/logo.png">a>div>
            
            
            <div class="Search">
                <form action="" method="">
                    <input type="text" class="Sea" />
                    <input type="submit" class="But" value="" />

                form>
            div>
            
            
            <div class="User">
                
                
                
                
                
                <span>您好，dyp123,欢迎你回来! <a href="">用户中心a>|<a href="">退出a>span>
                <font class="iconfont">font><a href="">加入购物车a>
                
                
            div>
            
        div>
        
    div>
    
    <div id="Logo">
        
        <ul>
            <li class="frist">
                <font class="iconfont">font>全部商品分类
                <div class="Menu">
                    <ol>
                        <li>
                            <h3>节日礼物h3>
                            <p><a href="">生日a><a href="">表白a><a href="">订婚a><a href="">结婚a>p>
                            <div class="moreNav">div>
                            <div class="border_top">div>
                            <div class="border_bottom">div>
                            <div class="border_right">div>
                        li>
                        <li>
                            <h3>生日礼物h3>
                            <p><a href="">生日a><a href="">表白a><a href="">订婚a><a href="">结婚a>p>
                            <div class="moreNav">div>
                            <div class="border_top">div>
                            <div class="border_bottom">div>
                            <div class="border_right">div>
                        li>
                        <li>
                            <h3>蛋糕h3>

                            <p><a href="">生日a><a href="">表白a><a href="">订婚a><a href="">结婚a>p>
                            <div class="moreNav">div>
                            <div class="border_top">div>
                            <div class="border_bottom">div>
                            <div class="border_right">div>
                        li>
                        <li>
                            <h3>商务礼物h3>
                            <p><a href="">生日a><a href="">表白a><a href="">订婚a><a href="">结婚a>p>
                            <div class="moreNav">div>
                            <div class="border_top">div>
                            <div class="border_bottom">div>
                            <div class="border_right">div>
                        li>
                        <li>
                            <h3>节个性定制h3>
                            <p><a href="">生日a><a href="">表白a><a href="">订婚a><a href="">结婚a>p>
                            <div class="moreNav">div>
                            <div class="border_top">div>
                            <div class="border_bottom">div>
                            <div class="border_right">div>
                        li>
                        <li>
                            <h3>鲜花h3>
                            <p><a href="">生日a><a href="">表白a><a href="">订婚a><a href="">结婚a>p>
                            <div class="moreNav">div>
                            <div class="border_top">div>
                            <div class="border_bottom">div>
                            <div class="border_right">div>
                        li>
                    ol>
                div>
            li>
            <li><a href="">首页li>
            <li><a href="">节日礼物a>li>
            <li><a href="">生日礼物a>li>
            <li><a href="">蛋糕a>li>
            <li><a href="">商物礼物a>li>
            <li><a href="">个性定制a>li>
            <li><a href="">鲜花a>li>
            <li class="last">li>
        ul>
    div>
    
    
    <div id="Part1">
        <div class="PartCon">

            
            <div class="news">
                
                <div class="newsOpacity">div>
                <div class="newsCon">
                    
                    <div class="newsKx">
                        <h3>最新快讯h3>
                        <ul>
                            <li>
                                <a href="" class="frist">
                                    <font>[ 特惠 ]font> 1月1店庆趴 爆品嗨抢a>
                            li>
                            <li>
                                <a href="">
                                    <font>[ 公告 ]font>“让爱飘香”公益a>
                            li>
                            <li>
                                <a href="">
                                    <font>[ 特惠 ]font> 1月1商品全场五折a>
                            li>
                            <li>
                                <a href="">
                                    <font>[ 特惠 ]font> 1月1店庆趴 爆品嗨抢a>
                            li>
                            <li>
                                <a href="">
                                    <font>[ 公告 ]font>“让爱飘香”公益a>
                            li>
                        ul>
                    div>
                    
                    <div class="newsKx Datatx">
                        <h3>节日提醒h3>
                        <ul>
                            <li>
                                <a href="" title="[ 6.21 ] 父亲节如何选择礼物">
                                    <font>[ 6.21 ] 父亲节font> 进入专题页a>
                            li>
                            <li>
                                <a href="" title="[ 6.21 ] 七夕节如何选择礼物">
                                    <font>[ 8.21 ] 七夕font> 进入专题页a>
                            li>
                            <li>
                                <a href="" title="[ 6.21 ] 光棍节如何选择礼物">
                                    <font>[ 11.11 ] 光棍节font> 进入专题页a>
                            li>
                            <li>

                                <a href="" title="[ 6.21 ] 光棍节如何选择礼物">
                                    <font>[ 11.11 ] 光棍节font> 进入专题页a>
                            li>
                        ul>
                    div>
                div>
            div>

2.CSS样式代码

#webIntro {
    width: 100%;
    height: 170px;
    background: #f1f1f1;
}
#webIntro .webIntro {
    width: 1200px;
    height: 170px;
    margin: 0 auto;
}
.webIntro .hotIntro {
    width: 950px;
    height: 170px;
    float: left;
}
.webIntro .hotIntro .hotList {
    width: 860px;
    height: 170px;
    float: right;
}
.hotList img.hotimg {
    float: left;
}
.webIntro .newIntro {
    width: 220px;
    height: 170px;
    float: right;
}
.hotIntro .hotList dl {
    width: 244px;
    height: 115px;
    background: #fff;
    margin: 18px 10px 0;

    padding: 10px;
    box-shadow: 2px 2px 3px #ddd;
    float: left;
}
.hotIntro .hotList dl dt {
    width: 110px;
    height: 96px;
    float: left;
    padding-top: 10px;
}
.hotIntro .hotList dl dd {
    width: 130px;
    float: right;
    font-size: 12px;
    color: #666;
}
.hotIntro .hotList dl dd.money {
    padding-top: 15px;
    padding-bottom: 10px;
}
.hotIntro .hotList dl dd.money font {
    font-size: 18px;
    color: #ff0066;
}
.hotIntro .hotList dl dd.buy a {
    width: 75px;
    height: 23px;
    background: #fff;
    font-size: 14px;
    color: #666;
    display: block;
    border: 1px solid #ddd;
    border-radius: 2px;
    line-height: 23px;
    text-align: center;
}
.newIntro img.hotimg_1 {
    float: left;
}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定) 1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分； 2. 所有页面相互超链接，可到三级页面，有5-10个页面组成； 3. 页面样式风格统一布局显示正常，不错乱网站制作，使用Div+Css技术； 4. 菜单美观、醒目，二级菜单可正常弹出与跳转； 5. 要有JS特效，如定时切换和手动切换图片新闻； 6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 7. 页面清爽、美观、大方，不雷同。

8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题欢迎一起交流学习【主页—— 获取更多优质源码】

在线咨询

上一篇：seo搜索引擎优化总结（搜索引擎seo教程优化）
下一篇：网站优化的具体实操步骤

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼

您的项目需求