Html+CSS小米官网实例练习全部代码

最新推荐文章于 2024-09-13 10:46:15 发布
最新推荐文章于 2024-09-13 10:46:15 发布
阅读量373 收藏 7
点赞数 4
分类专栏： WebGIS益奇学 文章标签： WebGIS 前端 地理信息系统 Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43416590/article/details/140971699
版权

跟随B站视频和GitHub的分享学习复刻小米商城网站，参考的网站如下所示：

GitHub分享：
https://github.com/0033-Vec/mishopping
https://github.com/ldwwwwww/ldwwwwww.github.xiaomi
https://github.com/hysmdd/xiaomi-mall
B站视频：
https://www.bilibili.com/video/BV1Uf421f7Bf/?share_source=copy_web&vd_source=8a46fdcbfaf8df0abad95d6cda51a55b
https://www.bilibili.com/video/BV1Uf421f7Bf/?spm_id_from=333.788.recommend_more_video.19
https://www.bilibili.com/video/BV1894y1S7Cb/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=51d15aaa7e2e1f72f87356e06140ae6b

最终效果图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复刻小米商城网站</title>
    <!-- 链接初始化样式文件 -->
    <link rel="stylesheet" href="base.css">
    <!-- 链接小米商城home页样式文件 -->
    <link rel="stylesheet" href="home.css">
     <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
     <!-- 顶部黑色导航栏 -->
     <div class="topbar-nav">
        <!--第二个容器，用来进行内容居中 -->
        <div class="wrap">
        <!-- 使用列表承载导航栏的内容 -->
            <ul class="topbar-nav-left">
                <!--左侧导航栏内容 -->
                <li>
                    <a href="#">小米官网</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小米商城</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小米澎湃os</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小米汽车</a> <span>|</span>
                </li>
                <li>
                    <a href="#">云服务</a> <span>|</span>
                </li>
                <li>
                    <a href="#">Iot</a> <span>|</span>
                </li>
                <li>
                    <a href="#">有品</a> <span>|</span>
                </li>
                <li>
                    <a href="#">小爱开放平台</a> <span>|</span>
                </li>
                <li>
                    <a href="#">资质证照</a> <span>|</span>
                </li>
                <li>
                    <a href="#">规则协议</a> <span>|</span>
                </li>
                <li class="DownloadAPP">
                    <a href="#">下载APP</a> <span>|</span>
                    <!-- 弹出下载二维码 -->
                    <div class="download">
                        <img src="./img/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                    <!-- 实现白色三角形 -->
                     <div class="stri"></div>
                </li>
                <li>
                    <a href="#">地区</a> 
                </li>
            </ul>
            <ul class="topbar-nav-right">
                <!-- 右侧导航栏内容 -->
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a>
                <li class="topbar-nav-cart">
                    <a href="#" class="cart">
                        <i class="iconfont">&#xe63f;</i>
                        <i>购物车(0)</i>
                    </a>
                    <div class="cart-list">
                        抓紧选购到购物车吧！
                    </div>
                </li>
            </ul>
        </div>
     </div>

     <!--头部白色导航栏与搜索框部分 -->
     <div class="header-nav">
        <div class="wrap">
            <!-- logo图 -->
            <div class="logo">
                <!-- logo图片链接小米官网 -->
                <a href="https://www.mi.com/index.html">
                    <img class="logopng" src="./img/logo-mi2.png" alt="小米官网">
                </a>
            </div>
            <!-- 左侧菜单 -->
             <div class="header-nav-bar">
                <ul>
                    <li>
                        <a href="#">小米手机</a>
                        <!-- 头部导航小米手机弹出框内容 -->
                         <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (1).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >8999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (2).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >7999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (3).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >6999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <!-- 使用容器承载图片便于处理样式 -->
                                             <div class="img-box">
                                                <img src="./img/xiaomishouji (4).png" alt="">
                                             </div>
                                             <p class="name" >Xiaomi MIX Fold 4</p>
                                             <p class="price" >5999元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                         </div>
                    </li>
                    
                    <li><a href="#">红米手机</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="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">小米社区</a></li>
                </ul>
             </div>
             <!-- 右侧搜素 -->
              <div class="header-nav-search">
                <input type="text" placeholder="输入框默认文本">
                <!-- 搜索图标按钮,随便设置了一个图标 -->
                 <button class="iconfont">&#xe60b;</button>
              </div>
        </div>
     </div>
    
     <!-- banner部分 -->
     <div class="banner">
        <div class="wrap">
            <!-- 因为没有学习JS,所以这里的轮播图无法实现,是只使用了一张图 -->
             <img src="./img/bannerimg.jpg" alt="" class="banner-img">
            <!-- 侧边栏导航 -->
             <div class="slide">
                <ul>
                    <li>
                        <a href="#">手机</a><i class="iconfont">&#xe609;</i>
                        <!-- 具体产品列表 -->
                        <div class="slide-list">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./img/小米Civi系列.png" alt="">
                                        <!-- span不换行 -->
                                        <span>小米Civi系列</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">电视</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">家电</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">笔记本 平板</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">出行 穿戴</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">耳机 音响</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">健康 儿童</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">生活 箱包</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">智能 路由器</a><i class="iconfont">&#xe609;</i></li>
                    <li><a href="#">电源 配件</a><i class="iconfont">&#xe609;</i></li>
                </ul>
             </div>
        </div>
     </div>
    
     <!-- 广告部分 -->
    <div class="ad">
        <div class="wrap">
            <div class="ad-aside">
                <ul>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>保障服务</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>企业团购</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>F码通道</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>米粉卡</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>以旧换新</p>
                    </li>
                    <li>
                        <i class="iconfont">&#xe60d;</i>
                        <p>话费充值</p>
                    </li>
                </ul>
            </div>
            <div class="ad-img">
                <a href="#"><img src="./img/小米14广告.png" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="./img/小米14广告.png" alt=""></a>
            </div>
            <div class="ad-img">
                <a href="#"><img src="./img/小米14广告.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 内容模块,包括手机模块,智能穿戴模块,笔记本平板模块等7个模块-->
    <div class="content">
        <div class="wrap">
            <!-- 手机模块广告大图 -->
             <div class="big-adimg">
                <a href="#">
                    <img src="./img/手机横板广告图.webp" alt="">
                </a>
             </div>
            <!-- 手机模块 -->
             <div class="phone">
                <h3 class="title">手机<a href="#" class="phone-right">查看更多</a></h3>
                <div class="phone-box">
                    <div class="phone-box-left">
                        <a href="#">
                            <img src="./img/手机模块左侧大图.webp" alt="">
                        </a>
                    </div>
                    <div class="phone-box-right">
                        <div class="item">
                           <a href="#">
                                <img class="item-img" src="./img/手机模块小图.webp">
                                <p class="item-name">红米K70至尊版</p>
                                <p class="item-desc">性能魔王 全面进化</p>
                                <p class="item-price">2599元起</p>
                           </a> 
                        </div>
                        <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                         <div class="item">
                            <a href="#">
                                 <img class="item-img" src="./img/手机模块小图.webp">
                                 <p class="item-name">红米K70至尊版</p>
                                 <p class="item-desc">性能魔王 全面进化</p>
                                 <p class="item-price">2599元起</p>
                            </a> 
                         </div>
                    </div>
                </div>
             </div>
             <!-- 家电模块,24年小米家电模块和网上视频差别很大,自己进行了修改,并且没有了视频模块 -->
             <div class="jiadian">
            <!-- 家电模块和手机不一样,手机模块直接将右侧文字放在了标题中 -->
             <!-- 家电模块将文字部分和内容部分放在两个容器中 -->
                <div class="jiadian-text">
                    <h3 class="title">家电</h3>
                    <!-- 右侧更多的描述 -->
                    <div class="more">
                        <ul class="tab-list">
                            <li class="tab-active">热门</li>
                            <li class="tab-active2">电视影音无切换效果</li>
                            <li class="tab-active2">空调无切换效果</li>
                        </ul>
                    </div>
                </div>
                <!-- 定义家电图片部分 -->
                <div class="jiadian-bd">
                    <!-- 定义左侧图片部分 -->
                    <div class="jiadian-bd-left">
                        <ul class="brick-promo-list">
                            <!-- 使用item可以直接链接手机模块item样式,后面加brick-item还可以进行样式的进一步调整 -->
                            <li class="item brick-item">
                                <!-- 使图片超链接到购物页面 -->
                                <a href="https://www.mi.com/shop/buy/detail?product_id=10050068"><img src="./img/小米家电左侧上部分图.webp" alt=""></a>
                            </li>
                            <li class="item brick-item">
                                <a href="https://www.mi.com/machine-drive"><img src="./img/小米家电左侧下部分图.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <!-- 定义右侧部分,右侧有三页内容 -->
                    <!-- 但是最终没有实现切换效果,尝试使用hover但是无法触发 -->
                    <!-- 应该需要使用JS -->
                     <div class="jiadian-bd-right">
                        <div class="jiadian-bd-right">
                            <!-- 也是直接使用手机定义的item样式 -->
                            <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item">
                                <a href="#">
                                     <img class="item-img" src="./img/小米家电右侧第一层图.webp">
                                     <p class="item-name">小米电视S系列</p>
                                     <p class="item-desc">LED高分区背光分区、1200nits峰值亮度</p>
                                     <p class="item-price">2599元起</p>
                                </a> 
                             </div>
                             <div class="item item-last">
                                <div>
                                    <img src="./img/家电小图.png" alt="">
                                </div>
                                <div>
                                    <img src="./img/家电小图.png" alt="">
                                </div>
                             </div>
                        </div>
                     </div>
                </div>
             </div>
        </div>
    </div>
    <!-- 页脚部分 -->
     <div class="footer">
        <div class="wrap">
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe66b;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe647;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe66b;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe688;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe62f;</i>
                            <span>服务内容</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-link">
                <ul>
                    <li>选购指南</li>
                    <li><a href="#">手机</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="#">家居</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">售后</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="#">防伪查询</a></li>
                </ul>
                <ul>
                    <li>线下门店</li>
                    <li><a href="#">小米之家</a></li>
                    <li><a href="#">服务网点</a></li>
                    <li><a href="#">授权体验店</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">售后</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="#">防伪查询</a></li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li><a href="#">售后</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="#">防伪查询</a></li>
                </ul>
                <div class="footer-aside">
                    <p class="tel">400-100-5678</p>
                    <p class="time">8:00-18:00（仅收市话费）</p>
                    <a href="#" class="kefu">人工客服</a>
                    <p class="tel2">400-180-8888</p>
                    <p class="time">8:00-18:00（仅收市话费）<br>适用于：MIX FOLD、巨屏电视系</p>
                    <a href="#" class="kefu">人工客服</a>
                </div>
            </div>
        </div>
     </div>
</body>
</html>

CSS文件内容

欢迎关注我的公众号，回复**小米商城**

GISideas
关注
专栏目录
30个html+CSS和html5动画经典案例
qq_53863770的博客
06-13 3179
素材依赖https://www.icodingedu.com/goods/show/82?targetId=91&preview=0
CSS简单练习案例
sokoooo的博客
02-17 3974
CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏（简易） 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END（素材源于pink老师分享） 1. 新闻 1.1 css代码： body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; ..
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS (1)
网页设计与制作
03-12 1636
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML——css与js案例练习
人若有志,就不会在半坡停止。
09-14 1696
简易ATM机 简易计算器
前端学习笔记：HTML+CSS练习案例
m0_52289398的博客
01-20 471
链接：https://pan.baidu.com/s/1Wv7b8Ku28n_GW_AKX964dA?整理自b站课程《前端实战训练：2个网站+1个APP》
京东HTML+css+js+php+数据库
FZXCY的博客
10-19 5404
概括：这是模范京东的小型项目，登录，注册，首页，商品详情，购物车。 一.文件位置一定要在安装的php文件里面，数据库是php自带的小型数据库 数据库的搭建
HTML+CSS项目实战
m0_48069349的博客
08-14 1130
这里实战的网站是小米商城。首先是项目的搭建 引入favicon和css，这个commoncss就是一个公共的css。成为一个合格的页面重构师所有的公共样式书写到 中 这里的list-style: none;就是可以清除小点。a元素里面的color: inherit;这个是在之前的属性计算里面讲过 通用容器 这个是小米商城上有很多都符合这个特征。这部分属于CSS3的知识，现阶段只需要知道如何使用即可在页面所有样式之前引入一个CSShttps://at.alicdn.com/t/font_2960521_r
最新小米商城（html+css）
m0_63324578的博客
06-24 642
这时候我们则可以利用::after和::before，这两个伪元素相当于是对当前元素的装潢，他们并不是节点，不会出现在dom树中，但是在显示上具备节点的效果。很多时候在设计中我们需要“|”进行分割样式，没有实际的意义，例如对li元素，而他所在的li元素仅是为了装饰，本是不应该被创建在文档内的。nth-child(-n+3){ 选取前三个元素生效} 因为例如本实例有六个元素（0-5）选择第四个元素-3+3=0 无效选择。注意：在实现nav-bar-list我只是设置了前几个作为样例，后面为了方便设置为重复。
《网页设计与制作项目教程（HTML+CSS+JavaScript）》源代码.zip
02-03
这份源代码压缩包包含的文件是教材中的实例和练习，帮助学习者通过实践来掌握这三种核心技术。下面我们将详细探讨HTML、CSS和JavaScript在网页设计与制作中的应用及其重要性。 HTML (HyperText Markup Language) 是...
小米网站主页面大模块——小模块+导航（浮动案例）
小琳爱分享的博客
07-22 2241
目标图： 1.初始化页面 在style中定义margin和padding为0 1.在body中定义头部标签 2.定义粉色导航栏 在style中设置格式 margin: 0 auto;的作用： ①对DIV设置margin:0 auto样式，是为了让DIV在浏览器中水平居中。布局居中、水平居中，均加入margin:0 auto即可。 ②为什么要设置margin:0 auto？ 设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局
⑤CSS浮动&学成在线网实例
LINZHONG21的博客
10-14 422
1.浮动( float) 1.2标准流(普通流/文档流) 所谓的标准流:就是标签按照规定好默认方式排列 块级元索会独占一行,从上向下顺序排列。 ● 常用元素:div. hr、 p. h1~h6、 ul. ol. dl. form、 table 行内元素会按照顺序,从左到右顺序排列,碰到父元索边缘则自动换行。 ● 常用元素: span. a、i. em等 以上都是标准流布局, 我们前面学习的就是标准流,标准流是最基本的布局方式。 这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。 注
CSS学习笔记
YuKing_HONG的博客
10-17 1438
个人学习PINK老师课程的笔记。个人笔记写得不好，敬请见谅，如果有问题没关系，那是正常的。记错了欢迎指出了。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1297
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
（微服务项目）新闻头条——Day1
最新发布
weixin_73253843的博客
09-13 791
（微服务项目）新闻头条——Day1
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 667
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
react 基础语法
小白小白从不日别的博客
09-13 1525
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
09-09 517
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
JavaScript web API part1
wozhaonue_w的博客
09-09 1699
本文主要总结了JavaScript的webAPI的DOM对象，获取，修改属性，以及事件监听的一部分
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值