HTML静态网页成品作业(HTML+CSS)——魅族商城首页网页(1个页面)

news2025/1/8 5:46:56

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

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- HTML部分代码
五、源码获取

一、作品介绍

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

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<div class="header ">
        <div class="base">
            <div class="logo fl">
                <a href="javascript:void(0);">
                    <img src="./image/logo.png" alt="">
                </a>
            </div>
            <ul class="nav fl">
                <li><a href="">手机</a></li>
                <li><a href="">Lipro</a></li>
                <li><a href="">声学</a></li>
                <li><a href="">配件</a></li>
                <li><a href="">生活</a></li>
                <li><a href="">Flyme</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="">APP下载</a></li>
                <div class="cl"></div>
            </ul>
            <div class="search fl">
                <input type="text" class="fl" placeholder="魅族18">
                <a href="javascript:void(0);" class="fr s-btn"><img src="./image/s.png" alt=""></a>
            </div>
            <div class="icon-link fl">
                <a href="javascript:void(0);"><img src="./image/u.png" alt=""></a>
                <a href="javascript:void(0);"><img src="./image/c.png" alt=""><span class="cart-num">0</span></a>
            </div>
            <div class="cl"></div>
        </div>
    </div>
    <!--中间广告图-->
    <div class="banner">
        <a href="javascript:void(0);">

        </a>
    </div>