网页作业9

<!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>

在这里插入图片描述

<!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>