建站知识

立即咨询
当前位置:首页>帮助中心>建站知识

某矿泉水公司介绍主打产品或系列的html代码

2024-04-07 15:56:39 点击:546


image.png


HTML代码


 <!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>大云山山泉流程图</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background: #f4f4f4;

            font-family: 'Arial', sans-serif;

        }

        .iadvan {

            width: 1200px;

            margin: 0 auto;

            position: relative;

            background: #fff;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            padding: 20px;

        }

        .head {

            text-align: center;

            margin-bottom: 20px;

        }

        .head h2 {

            font-size: 36px;

            color: #333;

            margin-bottom: 10px;

        }

        .head h3 {

            font-size: 24px;

            color: #777;

        }

        .img {

            width: 400px;

            height: 400px;

            margin: 0 auto 40px;

            position: relative;

        }

        .img img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        .list {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 100%;

            height: 100%;

        }

        .list dd {

            position: absolute;

            width: 100px; /* 增加宽度 */

            height: 100px; /* 增加高度 */

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            text-align: center;

            color: #fff;

            font-weight: bold;

            border-radius: 50%;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

            border: 3px solid #4CAF50; /* 绿色边框 */

            margin: 10px; /* 与父容器的间距 */

            padding: 10px; /* 内边距 */

        }

        

        /* 为每个步骤编号设置不同的背景颜色 */

        .item-1 { background-color: #FFB300; } /* 橙色 */

        .item-2 { background-color: #FF6600; } /* 橙红色 */

        .item-3 { background-color: #FF3300; } /* 红色 */

        .item-4 { background-color: #CC0033; } /* 深红色 */

        .item-5 { background-color: #990099; } /* 紫罗兰 */

        .item-6 { background-color: #6A0DAD; } /* 深紫罗兰 */

        .item-7 { background-color: #4A00E0; } /* 蓝紫色 */

        .item-8 { background-color: #2D00B8; } /* 深蓝色 */

        

        /* 定位样式 */

        .item-1 { top: 18%; left: 15%; }

        .item-2 { top: 38%; left: 8%; }

        .item-3 { top: 62%; left: 10%; }

        .item-4 { top: 75%; left: 22%; }

        .item-5 { top: 18%; right: 18%; }

        .item-6 { top: 38%; right: 12%; }

        .item-7 { top: 62%; right: 12%; }

        .item-8 { top: 75%; right: 22%; }

.list i { width: 55px; height: 55px; line-height: 55px; position: relative; text-align: center; font-size: 24px; background-color: #80BEBEBE; font-weight: bold;  border-radius: 50%;font-style: normal; }



    </style>

</head>

<body>

    <div>

        <div>

            <h2>大云山山泉</h2>

            <h3>Process flow</h3>

        </div>

        <div>

            <div>

                <img src="/static/upload/image/20240407/1712476715201692.png" alt="">

            </div>

            <dl>

                <dd>

                    <i>01</i>

                    <h3>敬业爱岗</h3>

                </dd>

                <dd>

                    <i>02</i>

                    <h3>完善自我</h3>

                </dd>

                <dd>

                    <i>03</i>

                    <h3>精益求精</h3>

                </dd>

                <dd>

                    <i>04</i>

                    <h3>专注品质</h3>

                </dd>

                <dd>

                    <i>05</i>

                    <h3>安全至上</h3>

                </dd>

                <dd>

                    <i>06</i>

                    <h3>顾客至上</h3>

                </dd>

                <dd>

                    <i>07</i>

                    <h3>质量至上</h3>

                </dd>

                <dd>

                    <i>08</i>

                    <h3>信誉至上</h3>

                </dd>

            </dl>

        </div>

    </div>

</body>

</html>




主图

iadvan.png

声明:免责声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,请发送邮件至:[email protected]进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。本站原创内容未经允许不得转载。
logo
小云网络主营:企业网站制作,仿站,B2B平台搭建,新闻文章网站等搭建,网站管理,seo优化,搜索引擎推广,抖音短视频平台,1688代运营。

服务热线

17373833512

公司:小云网络

地址:深圳市宝安区宝安大道学子围工业园A栋

友情链接:

返回顶部