网页作业9 - 技术栈

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
            position: relative;
        }

        .top {
            height: 120px;
            background: url('logo.jpg') no-repeat center center / cover;
        }

        .menu {
            height: 60px;
            position: relative;
        }

        .menu img {
            float: right;
            margin: 5px 10px;
        }

        .left {
            width: 200px;
            height: 600px;
            float: left;
            background: 
                url('left-a.jpg') no-repeat left top / 200px 300px,
                url('left-b.jpg') no-repeat left bottom / 200px 300px;
        }

        .concent {
            width: 800px;
            height: 600px;
            float: left;
            position: relative;
        }

        .concent > center {
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .concent > h3 {
            font-weight: bold;
            font-size: 20px;
            margin-top: 20px;
        }

        .concent > p {
            margin-top: 10px;
        }

        .A, .B, .C {
            width: 264px;
            height: 248px;
            border: 1px solid black;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            background-color: white;
            position: absolute;
            top: 350px;
        }

        .A {
            left: 0;
        }

        .B {
            left: 270px;
        }

        .C {
            left: 540px;
        }

        .A img, .B img, .C img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .footer {
            width: 1000px;
            height: 60px;
            position: absolute;
            bottom: 63px;
            left: 6px;
            background: url('footer.jpg') no-repeat center center / contain;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="menu">
            <img src="menu-e.jpg" alt="Menu E">
            <img src="menu-d.jpg" alt="Menu D">
            <img src="menu-c.jpg" alt="Menu C">
            <img src="menu-b.jpg" alt="Menu B">
            <img src="menu-a.jpg" alt="Menu A">
        </div>
        <div class="left"></div>
        <div class="concent">
            <center>常见问题汇总</center>
            <h3>一, 如何联系客服</h3>
            <p>最近很多用户到咨询中心提问，为什么客服不在线，客服在线不回复，如何联系客服等问题，您可以联系下面的QQ了解详细解答:(QQ)123000000</p>
            <h3>二, 我的订单为什么一直在交易中？</h3>
            <p>很多客户在交易过程中会有这样的困惑:为什么订单一直在交易中？如果您的订单一直在交易中，我们建议你可以联系客服了解原因，您可以联系下面的QQ了解详细解答:(QQ)123000000</p>
            <div class="A"><img src="right-a.jpg" alt="Right A"></div>
            <div class="B"><img src="right-b.jpg" alt="Right B"></div>
            <div class="C"><img src="right-c.jpg" alt="Right C"></div>
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .container {
            width: 1000px;
            margin: 0 auto;
            position: relative;
        }

        .top {
            height: 120px;
            background: url('logo.jpg') no-repeat center center / cover;
        }

        .menu {
            height: 60px;
            position: relative;
        }

        .menu img {
            float: right;
            margin: 5px 10px;
        }

        .left {
            width: 200px;
            height: 600px;
            float: left;
            background: 
                url('left-a.jpg') no-repeat left top / 200px 300px,
                url('left-b.jpg') no-repeat left bottom / 200px 300px;
        }

        .concent {
            width: 800px;
            height: 600px;
            float: left;
            position: relative;
        }

        .concent > center {
            text-align: center;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .concent > h3 {
            font-weight: bold;
            font-size: 20px;
            margin-top: 20px;
        }

        .concent > p {
            margin-top: 10px;
        }

        .A, .B, .C {
            width: 264px;
            height: 248px;
            border: 1px solid black;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            background-color: white;
            position: absolute;
            top: 350px;
        }

        .A {
            left: 0;
        }

        .B {
            left: 270px;
        }

        .C {
            left: 540px;
        }

        .A img, .B img, .C img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .footer {
            width: 1000px;
            height: 60px;
            position: absolute;
            bottom: 63px;
            left: 6px;
            background: url('footer.jpg') no-repeat center center / contain;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="menu">
            <img src="menu-e.jpg" alt="Menu E">
            <img src="menu-d.jpg" alt="Menu D">
            <img src="menu-c.jpg" alt="Menu C">
            <img src="menu-b.jpg" alt="Menu B">
            <img src="menu-a.jpg" alt="Menu A">
        </div>
        <div class="left"></div>
        <div class="concent">
            <center>常见问题汇总</center>
            <h3>一, 如何联系客服</h3>
            <p>最近很多用户到咨询中心提问，为什么客服不在线，客服在线不回复，如何联系客服等问题，您可以联系下面的QQ了解详细解答:(QQ)123000000</p>
            <h3>二, 我的订单为什么一直在交易中？</h3>
            <p>很多客户在交易过程中会有这样的困惑:为什么订单一直在交易中？如果您的订单一直在交易中，我们建议你可以联系客服了解原因，您可以联系下面的QQ了解详细解答:(QQ)123000000</p>
            <div class="A"><img src="right-a.jpg" alt="Right A"></div>
            <div class="B"><img src="right-b.jpg" alt="Right B"></div>
            <div class="C"><img src="right-c.jpg" alt="Right C"></div>
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>