仿小米商城电脑官网-纯HTML+CSS（含轮播图）

最新推荐文章于 2024-07-14 18:50:22 发布

「已注销」

最新推荐文章于 2024-07-14 18:50:22 发布

阅读量5.4k

点赞数 22

分类专栏：笔记文章标签： html css html5 css3

本文链接：https://blog.csdn.net/Zakke/article/details/104272653

版权

本文是作者初次尝试写博客，分享了使用HTML和CSS仿制小米商城电脑官网的过程。作者首先分析了网页布局，将其分为页眉、快速导航、LOGO与搜索栏、中间分类及轮播图、模块栏等五个部分，并提供了HTML和CSS代码实现。

摘要由CSDN通过智能技术生成

来自作者的话

这是我第一次写博客，也是为了激励自己学习，分享一些前端学习的知识，有写的不好的多多包涵。下面是参考的一些博客的链接

https://blog.csdn.net/weixin_43976890/article/details/89473101

下面先放上成品网页图（个别字体图标因本人过懒简略了）
仿小米商城官网首页

1.网页的布局分析

一个网页拿到手，首先看它的整体布局，分为哪几部分，然后我们一部分一部分地去完成，对于这次的小米商城官网我们主要就考虑它的前面一小部分，如上图所示

总的来看我们把它分为五个部分：
（每个人想法都是不一样的，不必一定要跟我的一致，说不定我的想法还繁杂了些）

页眉的的宣传广告栏
快速导航栏
LOGO+小导航栏+搜索栏
中间分类栏+轮播图
模块栏+3张图片

分好部分就可以开始逐个去写代码了。

2.网页代码部分

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿小米商城官网</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引用添加ico图标（就是网页标题栏前的小图标） -->
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
    <!-- 1.页眉部分 -->
    <header>
        <a href="#"></a>
    </header>
    <!-- 2.导航栏 -->
    <div class="shortcut">
        <div class="base">
            <ul class="fl">
                <li><a href="#">小米商城</a></li>
                <li class="space"></li>
                <li><a href="#">MIUI</a></li>
                <li class="space"></li>
                <li><a href="#">云服务</a></li>
                <li class="space"></li>
                <li><a href="#">IoT</a></li>
                <li class="space"></li>
                <li><a href="#">金融</a></li>
                <li class="space"></li>
                <li><a href="#">有品</a></li>
                <li class="space"></li>
                <li><a href="#">小爱开发平台</a></li>
                <li class="space"></li>
                <li><a href="#">企业团购</a></li>
                <li class="space"></li>
                <li><a href="#">资质证照</a></li>
                <li class="space"></li>
                <li><a href="#">协议规则</a></li>
                <li class="space"></li>
                <li><a href="#">下载app</a></

最低0.47元/天解锁文章

「已注销」

关注

22
点赞
踩
77

收藏

觉得还不错? 一键收藏
0
评论
仿小米商城电脑官网-纯HTML+CSS（含轮播图）

来自作者的话这是我第一次写博客，也是为了激励自己学习，分享一些前端学习的知识，有写的不好的多多包涵。下面是参考的一些博客的链接https://blog.csdn.net/weixin_43976890/article/details/89473101废话不多说下面直接开始。1.网页的布局分析一个网页拿到手，首先看它的整体布局，分为哪几部分，然后我们一部分一部分地去完成，对于这次的小米...
复制链接

扫一扫