小米商城首页（简易版）

最新推荐文章于 2024-10-02 15:35:50 发布

小梁今天敲代码了吗

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量156

点赞数 1

分类专栏： Python Web开发文章标签： css html python

本文链接：https://blog.csdn.net/weixin_43780415/article/details/130183420

版权

Python Web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

该文章展示了如何运用HTML和CSS基础来创建一个简化版的小米商城首页。页面设计包括了头部导航、菜单、搜索栏和新闻区块。特别地，通过CSS的:hover伪类实现了当鼠标悬停在“下载app”上时显示二维码的效果。

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

根据前面所学知识，我们可以简单的模拟出小米商城的首页，只是模拟哈，没有太多功能，算是对上周学习的HTML和CSS知识进行一个简单的小结（主要是给自己看的哈哈），在pycharm里用旁边的辅助工具打开是这样的

鼠标放到“下载app”上会弹出二维码，因为用了hover，在鼠标放上去之前二维码是display：none；放上去之后变为display：block；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a:hover
            {
        background-color:yellow;
        }
      .sub-header .logo {
                width:234px;
                height:100px;
                float:left;
                }
      .sub-header .menu-list{
                float:left;
                line-height:100px;
                }
      .sub-header .menu-list  a{
                padding:0 20px;
                display:inline-block;
                color: #333;
                font-size:16px;
                text-decoration:none;<!-- 取消下划线-->
                }
      .sub-header .search{
                float:right;
                }
      body{
      margin:0;
      }
      .container{
              width:1226px;
              margin:0 auto;

              }
      .header{
              height:38px;
              color: #b0b0b0;
              background: #333;
              }
      .header .menu{
              float:left;
              color:white;
              height:38px;
              line-height:38px;
              }
      .header .account{
              float:right;
              color:white;
              height:38px;
              line-height:38px;
              }
      .header  a{
                    color: #b0b0b0;
                    line-height: 40px;
                    display: inline-block;
                    font-size:12px;
                    margin-right:30px;
                    text-decoration:none;
                    }

      .sub-header{
                height:100px;

                margin:0 auto;
                }
      .news .list-item{
                height:170px;
                width:316px;
                }
      .news .channel{
                width:232px;
                height:170px;
                padding:3px;
                background-color: #5f5750;

                }
      .slider .sd-img{
                width:1226px;
                height:460px;
                }
      .slider .sd-img img{
                width:100%;
                height:100%;
                }
      img{
                width:100%;
                height:100%;
                }
      .left{
                float:left;
                }
      .right{
                float:right;
                }
      .news{
                margin-top:14px;
                }
      .news .channel .item{
                height:82px;
                width:76px;
                float:left;
                text-align:center;
                opacity: .7;
                }
      .news .channel .item a{
                font-size:12px;
                padding-top:18px;
                display:inline-block;
                color: #fff;
                }
      .news .channel .item img{
                height:24px;
                width:24px;
                margin:0 auto 4px;
                display:block;

       }
      .back{
        position:fixed;
        width:60px;
        height:60px;
        border:1px solid red;
        right:0;
        top:500;
        }
      .app{
           position:relative;
           }
      .app .download{
            position:absolute;
            height:90px;
            width:90px;
            top:40px;
            left:-20px;
            display:none;
            }
      .app:hover .download{
            display:block;
            }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
        <div class="menu">
            <a>小米商城</a>
            <a href="https://home.miui.com/">MIUI</a>
            <a href="https://i.mi.com/">云服务</a>
            <a href="https://www.xiaomiyoupin.com/">小米有品</a>
            <a href="https://www.mi.com/appdownload" class="app">下载app
                <div class="download">
                    <img src="/static/img.png">
                </div>
            </a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear:both"></div>
        </div>
    </div>
    <div class="sub-header">
        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/shop" style="margin-top:22px; margin-left:40px; display:inline-block  ">
                    <img src="/static/mi.jpg" style="height:60px; width:100px; " alt="">
                </a>
            </div>
            <div class="menu-list">
                <a href="https://www.mi.com/shop/buy/detail?product_id=17969">Xiaomi手机</a>
                <a href="https://www.mi.com/shop/buy/detail?product_id=18119">Redmi红米</a>
                <a href="https://www.mi.com/mitv6/65oled">电视</a>
                <a href="https://www.mi.com/shop/buy/detail?product_id=16523">笔记本</a>
                <a href="https://www.mi.com/xiaomipad5">平板</a>
            </div>
            <div class="search">3</div>
            <div style="clear:both"></div>
        </div>

    </div>
    <div class="slider">
        <div class="container">
            <div class="sd-img">
                <img src="/static/xiaomi.jpg" >
            </div>
        </div>
    </div>
    <div class="news">
        <div class="container">
            <div class="channel left">
                <div class="item ">

                    <a href="https://www.mi.com/shop/order/fcode">
                        <img src="/static/小米图片4.png">
                        <span>保障服务</span>
                    </a>
                </div>
                                <div class="item ">

                    <a href="https://www.mi.com/shop/order/fcode">
                        <img src="/static/小米图片4.png">
                        <span>保障服务</span>
                    </a>
                </div>
                                <div class="item ">

                    <a href="https://www.mi.com/shop/order/fcode">
                        <img src="/static/小米图片4.png">
                        <span>保障服务</span>
                    </a>
                </div>
                                <div class="item ">

                    <a href="https://www.mi.com/shop/order/fcode">
                        <img src="/static/小米图片4.png">
                        <span>保障服务</span>
                    </a>
                </div>
                                <div class="item ">

                    <a href="https://www.mi.com/shop/order/fcode">
                        <img src="/static/小米图片4.png">
                        <span>保障服务</span>
                    </a>
                </div>
                                <div class="item ">

                    <a href="https://www.mi.com/shop/order/fcode">
                        <img src="/static/小米图片4.png">
                        <span>保障服务</span>
                    </a>
                </div>

                <div class="clear:both"></div>
            </div>
            <div class="list-item left" style="margin-left:14.5px">
                <img src="/static/小米图片1.jpg " >
            </div>
            <div class="list-item left" style="margin-left:14.5px">
                <img src="/static/小米图片2.jpg " >
            </div>
            <div class="list-item right" >
                <img src="/static/小米图片3.jpg " >
            </div>
            <div class="clear:both"></div>
        </div>
    <div class="back"></div>
    </div>
    <div style="height:1000px;background-color:white"></div>

</body>
</html>

<!-- a标签是行内标签，行内标签的高度，内外边距，默认无效-->
<!--
垂直方向居中
    本文+line-height
    图片+边距
a标签默认有下划线 用text-decoration:none; 取消下划线
鼠标放上去之后变成手
        a:hover
            {
        background-color:yellow;
        }
opacity:0.5;透明度设置


-->