前端HTML小米官方网站界面部分实现

最新推荐文章于 2024-05-10 18:56:31 发布

阿拉斯加的头头儿

最新推荐文章于 2024-05-10 18:56:31 发布

阅读量1.9k

点赞数 6

文章标签： html css 列表

本文链接：https://blog.csdn.net/weixin_44196534/article/details/108716830

版权

前端HTML小米官方网站界面部分实现

- 完整代码

效果参考图：

在这里插入图片描述小米官网图：

定义与用法

 background: rgba(131, 131, 131, 0.6);

rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
透明度（A）取值 0~1 之间， 代表透明度。

 /* banner动画 */
        @keyframes move {
            33% {
                margin-left: -1200px;
            }

            66% {
                margin-left: -2400px;
            }

            100% {
                margin-left: -3600px;
            }
        }

在动画方面，具体是把banner里的图片进行水平放置，所以是4张图片共4800px，然后随着33%进度，整体左移1200px,代表左移过一张图片，但是由于overflow: hidden;代表溢出隐藏，所以就会出现轮播图的图片。

   li {
            /* 取消列表默认样 */
            list-style: none;
        }

li代表列表，不过存在默认样式，所以仅仅想用列表而不用自带样式时候，可以通过该函数取消默认样式

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        li {
            /* 取消列表默认样 */
            list-style: none;
        }

        /* 轮播部分 */
        .view {
            width: 1200px;
            margin: 100px auto;
            overflow: hidden;
            /* relative相对位置供绝对位置参考 */
            position: relative;
        }

        .banners {
            /* 水平排列 */
            display: flex;
            width: 4800px;
            /* 背景图片轮播图,无限循环12s */
            animation: move 12s infinite;
        }

        .banners img {
            /* 定义图片大小 */
            height: 500px;
            width: 1200px;
        }

        /* banner动画 */
        @keyframes move {
            33% {
                margin-left: -1200px;
            }

            66% {
                margin-left: -2400px;
            }

            100% {
                margin-left: -3600px;
            }
        }

        /* 列表部分 */
        .list {
            /* 绝对定位参照位置view */
            position: absolute;
            width: 230px;
            background: rgba(131, 131, 131, 0.6);
            top: 0;
            left: 0;
            /* 上下填充 */
            padding: 20px 0;
        }

        /* 菜单部分 */
        .content {
            display: none;
        }

        .list p {
            line-height: 42px;
            /* 放置右方向箭头 */
            background-image: url(images/arrow.png);
            /* 背景图片不填充 */
            background-repeat: no-repeat;
            /* 箭头位置 */
            background-position: 180px center;
            background-size: 30px auto;
            color: rgb(233, 233, 233);
            font-size: 14px;
            text-indent: 20px;
        }

        .list li:hover p {
            background-color: tomato;
        }

        .content {
            width: 800px;
            height: 430px;
            background-color: white;
            /* 绝对定位参照位置list */
            position: absolute;
            left: 230px;
            top: 0;
            /* box-shadow: 0 0 10px white; */
        }

        .list li:hover .content {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 外层容器 显示单张图片的尺寸 -->
    <div class="view">
        <!-- 包含所有图片的大块  让图片横向排列 -->
        <div class="banners">
            <img src="images/banner01.webp" alt="">
            <img src="images/banner02.jpg" alt="">
            <img src="images/banner03.webp" alt="">
            <!-- 替身 -->
            <img src="images/banner01.webp" alt="">
        </div>
        <!-- 侧边列表 -->
        <ul class="list">
            <li>
                <p>手机 电话卡</p>
                <div class="content">1</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">2</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">3</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">4</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">5</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">6</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">7</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">7</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">8</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">9</div>
            </li>
            <li>
                <p>手机 电话卡</p>
                <div class="content">10</div>
            </li>
        </ul>
    </div>
</body>

</html>

阿拉斯加的头头儿

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
前端HTML小米官方网站界面部分实现

前端HTML小米官方网站界面部分实现完整代码效果参考图：小米官网图：定义与用法 background: rgba(131, 131, 131, 0.6);rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。红色（R）0 到 255 间的整数，代表颜色中的红色成分。。绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。蓝色（B）0 到 255 间的整数，代
复制链接

扫一扫