完成官网开发

css/index.css

@@ -0,0 +1,148 @@
+
+.website-wrap {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    background-color: #F5FAFF;
+}
+/* 导航 */
+.website-wrap .header .nav {
+    width: 100%;
+    height: 3.9vh;
+    display: flex;
+    align-items: center;
+    padding-left: 18.4%;
+    background: rgba(255, 255, 255, .4);
+}
+/* logo */
+.website-wrap .header .nav img {
+    height: 2.4vh;
+}
+/* 背景 */
+.website-wrap .header {
+    width: 100%;
+    height: 43.7vh;
+    background-image: url(../images/banner.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+
+.website-wrap main {
+    width: 100%;
+    height: calc(100% - 43.7vh - 11.788vh);
+}
+
+.main h1 {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 2.25rem;
+    color: #0D2E6F;
+    line-height: 2.625rem;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    margin-top: 5.9vh;
+}
+.main h2 {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 1rem;
+    color: #0D2E6F;
+    line-height: 1.19rem;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    margin-top: 20px;
+}
+
+.main .area-wrap {
+    width: 100%;
+    height: 340px;
+    margin-top: 50px;
+    position: relative;
+    display: flex;
+}
+.main .area-wrap .pic {
+    width: 21.77vw;
+    height: 100%;
+    background-image: url(../images/area.png);
+    background-repeat: no-repeat;
+    background-size: 60% 100%;
+    background-position: right 16vh;
+}
+.main .area-wrap .wrap {
+    width: 63.07vw;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.main .area-wrap .wrap .item {
+    width: 14.25vw;
+    height: 100%;
+    background-image: url(../images/bj.png);
+    background-repeat: no-repeat;
+    background-size: 100% 110%;
+    background-color: #fff;
+    box-shadow: 0px 0px 16px 0px rgba(45,109,255,0.1);
+    border-radius: 0px 0px 0px 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.main .area-wrap .wrap .item dl {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+.main .area-wrap .wrap .item dl dt img{
+    height: 6.35vh;
+}
+.main .area-wrap .wrap .item dl dd h6:nth-child(1) {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 20px;
+    color: #0D2E6F;
+    line-height: 23px;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    margin-top: 41px;
+}
+.main .area-wrap .wrap .item dl dd h6:nth-child(2) {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #0D2E6F;
+    line-height: 16px;
+    font-style: normal;
+    text-transform: none;
+    text-align: center;
+    margin-top: 10px;
+}
+.footer {
+    width: 100%;
+    height: 11.788vh;
+    background-color: #04163C;
+    margin-top: 100px;
+}
+.footer .content {
+    width: 400px;
+    height: 100%;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.footer .content h2 {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    line-height: 1.5;
+}

css/reset.css

@@ -0,0 +1,55 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+}
+a {
+  font-size: 12px;
+  text-decoration: none;
+}

index.html

@@ -0,0 +1,80 @@
+<!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="./css/reset.css">
+    <link rel="icon" type="image/x-ico" href="">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+    <div class="website-wrap">
+        <header class="header">
+            <nav class="nav">
+                <img src="./images/logo.png" alt="">
+            </nav>
+        </header>
+        <main class="main">
+            <h1>构建多层级，多体系合伙人系统</h1>
+            <h2>聚拢合伙人快速裂变分润</h2>
+            <div class="area-wrap">
+                <div class="pic"></div>
+                <div class="wrap">
+                    <div class="item">
+                        <dl>
+                            <dt>
+                                <img src="./images/01.png" alt="">
+                            </dt>
+                            <dd>
+                                <h6>定制分润政策</h6>
+                                <h6>分销等级规则及分润比例</h6>
+                            </dd>
+                        </dl>
+                    </div>
+                    <div class="item">
+                        <dl>
+                            <dt>
+                                <img src="./images/02.png" alt="">
+                            </dt>
+                            <dd>
+                                <h6>定制分润政策</h6>
+                                <h6>分销等级规则及分润比例</h6>
+                            </dd>
+                        </dl>
+                    </div>
+                    <div class="item">
+                        <dl>
+                            <dt>
+                                <img src="./images/03.png" alt="">
+                            </dt>
+                            <dd>
+                                <h6>定制分润政策</h6>
+                                <h6>分销等级规则及分润比例</h6>
+                            </dd>
+                        </dl>
+                    </div>
+                    <div class="item">
+                        <dl>
+                            <dt>
+                                <img src="./images/04.png" alt="">
+                            </dt>
+                            <dd>
+                                <h6>定制分润政策</h6>
+                                <h6>分销等级规则及分润比例</h6>
+                            </dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <footer class="footer">
+            <div class="content">
+                <h2>© 2024 山西掌柜鼎科技有限公司所有</h2>
+                <h2>山西掌柜鼎科技有限公司 晋ICP备2021001666号-1</h2>
+                <h2>晋公网安备14010502050942号</h2>
+            </div>
+        </footer>
+    </div>
+</body>
+</html>