3.1 Web前端：实战电商页面1：静态布局

最新推荐文章于 2024-07-24 21:04:47 发布

搬砖的乔布梭

最新推荐文章于 2024-07-24 21:04:47 发布

阅读量2.8k

点赞数 4

分类专栏：服务端开发必会的前端知识前端开发

本文链接：https://blog.csdn.net/u010986776/article/details/84142145

版权

前端开发同时被 2 个专栏收录

58 篇文章 9 订阅

订阅专栏

服务端开发必会的前端知识

29 篇文章 1 订阅

订阅专栏

使用前面学习的知识：html,css,javascript,jquery实现电商页面，使用html搭建页面，css调节页面样式，Javascript，jquery实现动态效果，使学生具备一定的企业实战能力。
效果图：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>

<div class="header_box">
    <p class="fl">欢迎来到天天生鲜</p>
    <ul class="login_box fr">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">我的购物车</a></li>
        <li><a href="#">我的订单</a></li>
    </ul>
</div>


<div class="content_box">
    <div class="banner centerbox">
        <div class="logo fl">
            <img src="images/logo.png">
        </div>
        <div class="search fl">
            <input class="usrinput fl" type="text" placeholder="搜索">
            <input id="btnsearch" class="fl" type="button" value="搜索">
        </div>
        <div class="cart fr">
            <a href="#" class="fl">我的购物车</a>
            <span class="fl">0</span>
        </div>
    </div>

    <div class="navigationbar_box">
        <div class="navigationbar centerbox">
            <h1 class="allgoods fl">全部商品分类</h1>
            <ul class="hmenu fl">
                <li><a href="#">首页</a></li>
                <li><a href="#">手机生鲜</a></li>
                <li><a href="#">抽奖</a></li>
            </ul>

        </div>
    </div>

    <div class="hot centerbox">
        <ul class="vmenu fl">
            <li><a href="#" class="fruit">新鲜水果</a></li>
            <li><a href="#" class="seafood">海鲜水产</a></li>
            <li><a href="#" class="meat">牛羊猪肉</a></li>
            <li><a href="#" class="egg">禽类蛋品</a></li>
            <li><a href="#" class="vegetable">新鲜蔬菜</a></li>
            <li><a href="#" class="frozen">速冻食品</a></li>
        </ul>

        <div class="gallery fl">

            <ul class="sliders">
                <li><a href="javascript:;"><img src="images/slide.jpg"></a></li>
                <li><a href="javascript:;"><img src="images/slide02.jpg"></a></li>
                <li><a href="javascript:;"><img src="images/slide03.jpg"></a></li>
                <li><a href="javascript:;"><img src="images/slide04.jpg"></a></li>
            </ul>

            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>
            <ul class="dots"></ul>
        </div>

        <div class="ads fl">
            <img src="images/adv01.jpg" class="fl">
            <img src="images/adv02.jpg" class="fl">
        </div>
    </div>

    <div>
        <div class="goodsmenu centerbox">
            <h2 class="fl">新鲜水果</h2>
            <ul class="submenu fl">
                <li><a href="#">鲜芒</a></li>
                <li><a href="#">加州提子</a></li>
                <li><a href="#">亚马逊牛油果</a></li>
            </ul>

            <a href="#" class="more fr">查看更多&gt&gt</a>
        </div>

        <div class="goods centerbox">
            <div class="face fl">
                <img src="images/banner01.jpg">
            </div>
            <ul class="goodspic fl">
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
            </ul>
        </div>
    </div>

    <div>
        <div class="goodsmenu centerbox">
            <h2 class="fl">新鲜水果</h2>
            <ul class="submenu fl">
                <li><a href="#">鲜芒</a></li>
                <li><a href="#">加州提子</a></li>
                <li><a href="#">亚马逊牛油果</a></li>
            </ul>

            <a href="#" class="more fr">查看更多&gt&gt</a>
        </div>

        <div class="goods centerbox">
            <div class="face fl">
                <img src="images/banner02.jpg">
            </div>
            <ul class="goodspic fl">
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
            </ul>
        </div>
    </div>

    <div>
        <div class="goodsmenu centerbox">
            <h2 class="fl">新鲜水果</h2>
            <ul class="submenu fl">
                <li><a href="#">鲜芒</a></li>
                <li><a href="#">加州提子</a></li>
                <li><a href="#">亚马逊牛油果</a></li>
            </ul>

            <a href="#" class="more fr">查看更多&gt&gt</a>
        </div>

        <div class="goods centerbox">
            <div class="face fl">
                <img src="images/banner03.jpg">
            </div>
            <ul class="goodspic fl">
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
                <li>
                    <h4>草莓</h4>
                    <a href="#"><img src="images/goods_pic.jpg"></a>
                    <span>￥38.00</span>
                </li>
            </ul>
        </div>
    </div>

</div>


<div class="footer_box centerbox">
    <div class="links">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p class="copyright">CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>

</body>
</html>

学院Go语言视频主页
https://edu.csdn.net/lecturer/1928

清华团队带你实战区块链开发
扫码获取海量视频及源码 QQ群：721929980
在这里插入图片描述