HTML静态网页成品作业(HTML+CSS)——联想商品商城网页(1个页面)

🎉不定期分享源码，关注不丢失哦

---

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有1个页面。

二、作品演示

三、代码目录

四、网站代码

HTML部分代码

<div class="header cl">
            <div class="logo">
                <a href="javascript:void(0);"><img src="./image/logo.jpg" alt=""></a>
            </div>
            <div class="base cl">
                <div class="nav fl">
                    <a href="javascript:void(0);">商城首页</a>
                </div>
                <div class="login-reg fr cl">
                    <div class="reg">
                        <a href="javascript:void(0);">注册</a>
                        <div class="reg-now cl">
                            <a href="javascript:void(0);">立即注册抽好礼</a>
                            <img src="./image/gift.png" alt="">
                        </div>
                    </div>
                    <div class="line">|</div>
                    <div class="login"><a href="javascript:void(0);">登陆</a></div>
                    <div class="mobile" onmouseenter="mobileEnter()" onmouseleave="mobileLeave()">
                        <img src="./image/phone.png" alt="">
                        <div id="mobile-ewm" class="mobile-ewm hide">
                            <div class="mobile-ewm-img fl"><img src="./image/ewm.jpg" alt=""></div>
                            <div class="mobile-ewm-text fl">
                                <div class="t1">联想客户端</div>
                                <div class="t2">下载即享</div>
                                <div class="t3">188元新人礼</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--banner-->
        <div class="banner">
            <a href="javascript:void(0);"></a>
        </div>
        <!--爆品专区-->
        <div class="baopin">
            <div class="baopin-title"></div>
            <div class="baopin-pro">
                <a href="javascript:void(0);" class="pro1">
                    <span>2699</span>
                </a>
            </div>
            <div class="baopin-pro">
                <a href="javascript:void(0);" class="pro2">
                    <span>1999</span>
                </a>
            </div>
            <div class="baopin-pro">
                <a href="javascript:void(0);" class="pro3">
                    <span>3999</span>
                </a>
            </div>
            <div class="baopin-pro">
                <a href="javascript:void(0);" class="pro4">
                    <span>2299</span>
                </a>
            </div>
            <div class="baopin-pro">
                <a href="javascript:void(0);" class="pro5">
                    <span>1299</span>
                </a>
            </div>
            <div class="baopin-pro baopin-pro6">
                <a href="javascript:void(0);" class="pro6">
                </a>
            </div>
        </div>
        <div class="tj">
            <div class="tj-title mb20"></div>
            <ul class="cl tj-list base2">
                <li class="tj-item">
                    <a href="javascript:void(0);">
                        <div class="tj-img">
                            <img src="./image/p1.jpg" alt="">
                        </div>
                        <div class="tj-name">联想平板小新Pad Pro 11.5英寸 影音娱乐办公学习平板电脑 深空灰</div>
                        <div class="tj-desc">Qualcomm® Snapdragon™ 730G/8核/Android系统/11.5英寸/6G/128G/WIFI版/深空灰</div>
                        <div class="buy cl">
                            <div class="fl price">
                                <span class="price-cur">¥</span>
                                <span class="price-value">2299</span>
                            </div>
                            <div class="fr">
                                <span class="cart">立即购买</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="tj-item">
                    <a href="javascript:void(0);">
                        <div class="tj-img">
                            <img src="./image/p2.jpg" alt="">
                        </div>
                        <div class="tj-name">联想平板小新Pad 11英寸 学习娱乐平板电脑 深空灰</div>
                        <div class="tj-desc">Qualcomm® Snapdragon™ 662/8核/Android系统/11英寸/6G/128G/WIFI版/深空灰</div>
                        <div class="buy cl">
                            <div class="fl price">
                                <span class="price-cur">¥</span>
                                <span class="price-value">1299</span>
                            </div>
                            <div class="fr">
                                <span class="cart">立即购买</span>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="tj-item">
                    <a href="javascript:void(0);">
                        <div class="tj-img">
                            <img src="./image/p3.jpg" alt="">
                        </div>
                        <div class="tj-name">联想平板小新Pad 11英寸 学习娱乐平板电脑 深空灰</div>
                        <div class="tj-desc">Qualcomm® Snapdragon™ 662/8核/Android系统/11英寸/4G/64G/WIFI版/深空灰</div>
                        <div class="buy cl">
                            <div class="fl price">
                                <span class="price-cur">¥</span>
                                <span class="price-value">1099</span>
                            </div>
                            <div class="fr">
                                <span class="cart">立即购买</span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧