實戰電商頁面1：靜態佈局

尹成發表於2018-11-14

使用前面學習的知識：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
在這裡插入圖片描述

相關文章