小米商城仿版

最新推荐文章于 2024-05-01 15:23:42 发布

一个胖小白

最新推荐文章于 2024-05-01 15:23:42 发布

阅读量493

点赞数

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

本文链接：https://blog.csdn.net/weixin_46002359/article/details/122843494

版权

笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

要求:
在这里插入图片描述
分析：

代码实现：
html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城仿版</title>
</head>

<body>
    <div>
        <!-- 第一部分 -->
        <div id="box01">
            <a href="#" id="box001">小米商城，学习专用</a>
            <a href="#" id="box002">首页</a>
            <a href="#" id="box003">注册</a>
            <a href="#" id="box004">消息通知</a>
            <a href="#" id="box005">购物车(0)</a>
        </div>
        <!-- 第二部分 -->
        <div id="box02">
            <img src="../img/logo.jpg" alt="图片加载失败" class="logo">
            <li>小米手机 红米 笔记本 盒子 新品 路由器 智能硬件 服务 社区</li>
            <img src="../img/find.jpg" alt="图片加载失败" class="search">
            <input type="text" class="boxtext">

        </div>
        <!-- 第三部分 -->
        <div id="box03">
            <!-- 左 -->
            <div class="box03left">
                <ul>
                    <li>小米手机</li>
                    <li>红米</li>
                    <li>笔记本</li>
                    <li>盒子</li>
                    <li>新品</li>
                    <li>路由器</li>
                    <li>智能硬件</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
            </div>
            <div class="box03right">
                <img src="../img/scroll_01.jpg" alt="图片加载失败">
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="../Css/xiaomi.css">
</body>

</html>

css代码：


```css
/* 第一块 */

#box01 {
    background-color: rgb(85, 83, 83);
    font-size: 14px;
    height: 50px;
    line-height: 50px;
}

#box001,
#box002,
#box003,
#box004,
#box005 {
    text-decoration: none;
    color: rgb(228, 224, 224);
}

#box002,
#box003,
#box004,
#box005 {
    display: inline-block;
    color: rgb(223, 217, 217);
}

#box001 {
    margin-left: 20px;
    margin-bottom: 10px;
}

#box002 {
    margin-left: 1100px;
}

#box003 {
    margin-right: 20px;
}

#box004 {
    margin-right: 20px;
}

#box005 {
    margin-right: 20px;
}


/* 第二块 */

#box02 {
    height: 100px;
    margin-top: 10px;
    margin-left: 50px;
    /* border: solid 1px red; */
}

#box02 .logo {
    margin-top: 20px;
}

#box02 li {
    display: inline-block;
    overflow: hidden;
    margin-bottom: 15px;
    margin-left: 80px;
}

#box02 .boxtext {
    height: 48px;
    margin-right: 20px;
    margin-top: 20px;
    float: right;
    border: solid 1px rgb(207, 204, 204);
}

#box02 .search {
    height: 50px;
    margin-right: 10px;
    float: right;
    margin-top: 20px;
    /* margin-right: 700px; */
}


/* 第三部分 */

#box03 {
    height: 450px;
    margin-top: 8px;
    margin-left: 50px;
    /* border: solid 1px red; */
}

#box03 .box03left {
    width: 200px;
    height: 450px;
    /* border: solid 1px blue; */
    float: left;
    background-color: rgb(66, 65, 65);
}

#box03 .box03right {
    width: 1000px;
    height: 450px;
    /* border: solid 1px rgb(10, 92, 71); */
    float: left;
}

#box03 .box03right img {
    width: 1000px;
    height: 450px;
}

#box03 li {
    font-size: 16px;
    margin-top: 25px;
    /* 去掉无序列表的小黑点 */
    list-style: none;
}