Web大学生网页作业成品——联想商品商城网页设计与实现(HTML+CSS)（1个页面）

常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

---

一、作品介绍

️本套采用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、看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
3、源码获取公众号，点点下方公众号进行获取吧! 网页搜索编号:E0109