DIV布局——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript 学生网上商城网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

HTML5期末大作业

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!doctype 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>
    <!--引入外部css样式 start-->
    <link href="css/basic.css" style="text/css" rel="stylesheet">
    <link href="css/web.css" style="text/css" rel="stylesheet">
    <!--引入外部css样式 end-->
</head>
<style type="text/css">
</style>

<body>

    <div id="TopMain">
        <!--用来包d="Top"和d="Header的大盒子 便于吸顶效果计算 吸顶盒效果时 计算的高度 这样就自适应了"-->
        <!--头部广告开始  target="_blank" 在新窗口打开-->
        <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">
            <!--Logo 图片start-->
            <div class="Logo"><a href=""><img src="images/logo.png"></a></div>
            <!--Logo 图片end-->

            <!--Search start-->
            <div class="Search">
                <form action="" method="">
                    <input type="text" class="Sea" />
                    <input type="submit" class="But" value="" />
                </form>
            </div>
            <!--Search end-->

            <!--User start-->
            <div class="User">
                <!--用户注册登录 start-->

                <!--用户注册登录前 start-->
                <!--<a href=""><font class="iconfont">&#xe7d4;</font>登录</a><a href=""><font class="iconfont">&#xf0073;</font>注册</a><a href=""><font class="iconfont">&#xe69d;</font>加入购物车</a>-->
                <!--用户注册登录前 end-->


                <!--用户注册登录后 start-->
                <span>您好,dyp123,欢迎你回来! <a href="">用户中心</a>|<a href="">退出</a></span>
                <font class="iconfont">&#xe69d;</font><a href="">加入购物车</a>
                <!--用户注册登录后 end-->
                <!--用户注册登录 start-->
            </div>
            <!--User end-->
        </div>
        <!--标题结束-->
    </div>

    <!--网站导航 start -->
    <div id="Logo">
        <!-- 吸顶盒导航:滚动到一定高度 给<div id="Logo" ></div>导航加上class="gd"-->
        <ul>
            <li class="frist">
                <font class="iconfont">&#xe637;</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>

    <!--网站导航   end-->


    <!--第一部分 start-->
    <div id="Part1">
        <div class="PartCon">

            <!--news strat-->
            <div class="news">
                <!--
			1、在News大盒子里面,构建两个大小一模一样大小的长方形,一个用来设置背景透明,一个利用绝对定位,盖在透明图层上面,来用放内容
			-->
                <div class="newsOpacity"></div>
                <div class="newsCon">
                    <!--咨询快讯 start-->
                    <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>
                    <!--咨询快讯   end-->

                    <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>
            <!--news end-->

            <!--flash  start-->
            <div class="flash">
                <!--左右切换按钮 start-->
                <a href="javascript:void(0)" class="prev"></a>
                <a href="javascript:void(0)" class="next"></a>
                <!--左右切换按钮 end-->

                <!--图片滚动 start-->
                <div class="scroll">
                    <img style="left:0;" src="images/flash1.jpg" />
                    <img src="images/flash2.jpg" />
                    <img src="images/flash3.jpg" />
                    <img src="images/flash4.jpg" />
                    <img src="images/flash5.png" />
                    <img src="images/flash6.jpg" />
                </div>
                <!--图片滚动 end-->

                <!--滚动按钮 start-->
                <div class="But">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div>
                        <!--滚动按钮  end-->
                    </div>
                    <!--flash   end-->
                </div>
            </div>

            <!--第一部分  end-->

            <div style="clear:both"></div>
            <!--主题内容start-->
            <div id="Main">
                <!--今日新品 start-->
                <div id="NewProduct">
                    <div class="title">
                        <font class="datexp">&#xe62a;</font>
                        <!--今日新品图标-->
                        <span class="new">今日新品</span>
                        <span class="data">每天8:00新品特卖</span>

                        <span class="go"><font class="gohyp">&#xe609;</font>换一批</span>
                        <div style="clear:both"></div>
                        <div class="Product">
                            <div class="imgList" style="display:block;">
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/bimg.png" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg_img1.jpg" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg_img2.jpg" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg19.jpg" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg17.jpg" width="200px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                            </div>
                            <div class="imgList">
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg24.jpg" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg27.jpg" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg23.jpg" width="190px" height="183px" /></dd>
                                    <dd>
                                        <font class="iconfont">&#xe6b2;</font>共有
                                        <font>1000</font>个人购买</dd>
                                </dl>
                                <dl>
                                    <dt><font class="iconfont">&#xe60b;</font>距离结束:<font>2</font><font>16</font><font>53</font><font>31</font></dt>
                                    <dd><img src="images/dg26.jpg" width="190px" height="183px" /></dd>
                                    <font>¥30.0</font>
                                </h3>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--节日礼物结束-->

            </div>


            <div style="clear:both"></div>
            <!--主题内容  end-->



            <!--商城底部 footer start-->
            <img src="images/f.jpg" class="fbg" />
            <div id="Footer2">
                <dl class="frist">
                    <dt><a href="#">关于我们</a></dt>
                    <dd><a href="#">诚聘英才</a></dd>
                    <dd><a href="#">品牌入驻</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">关于我们</a></dt>
                    <dd><a href="#">诚聘英才</a></dd>
                    <dd><a href="#">品牌入驻</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">关于我们</a></dt>
                    <dd><a href="#">诚聘英才</a></dd>
                    <dd><a href="#">品牌入驻</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">关于我们</a></dt>
                    <dd><a href="#">诚聘英才</a></dd>
                    <dd><a href="#">品牌入驻</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">关于我们</a></dt>
                    <dd><a href="#">诚聘英才</a></dd>
                    <dd><a href="#">品牌入驻</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                </dl>
                <dl>
                    <dt><a href="#">关于我们</a></dt>
                    <dd><a href="#">诚聘英才</a></dd>
                    <dd><a href="#">品牌入驻</a></dd>
                    <dd><a href="#">友情链接</a></dd>
                </dl>
                <dl class="last">
                    <dt>客服在线</dt>
                    <dd>4006-600-00</dd>
                    <dd> <a href="http://wpa.qq.com/msgrd?v=3&uin=1209885250&site=qq&menu=yes" target="_blank"><img src="images/QQ.jpg" /></a></dd>
                </dl>
                <div style="clear:both"></div>
            </div>

            <!--版权 start-->
            <p class="copy">Copyright © 2015-2017 www.wtu.edu.cn All Rights Reserved 版权所有:武汉亲友有限公司 备案号:备13016888号</p>
            <!--版权 end-->


            <!--商城底部 footer end-->



            <!--引入jQuery官方类库-->
            <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
            <!--引入外部js-->
            <script type="text/javascript" src="js/index.js"></script>


</body>

</html>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值