代码仅供参考：
<!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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.title {
background: url('../img/cap.jpg') center/cover no-repeat;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 4px #000;
width: 100%;
}
.container {
width: 80%;
margin: 20px auto;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid #ddd;
padding: 15px;
text-align: center;
}
img {
max-width: 150px;
height: auto;
margin-bottom: 10px;
}
p {
margin: 0;
font-size: 14px;
color: #333;
}
</style>
</head>
<body>
<header class="title">
<h1>翡翠阁</h1>
</header>
<main class="container">
<table>
<tbody>
<tr>
<td>
<img src="../img/li1.jpg" alt="翡翠项链嘴子">
<p>翡翠项链嘴子<br>$1500</p>
</td>
<td>
<img src="../img/li2.jpg" alt="羊脂玉戒指">
<p>羊脂玉戒指<br>$2300</p>
</td>
<td>
<img src="../img/li3.jpg" alt="紫羽手链">
<p>紫羽手链<br>$2880</p>
</td>
<td>
<img src="../img/li4.jpg" alt="羊头黄玉">
<p>羊头黄玉<br>$6699</p>
</td>
</tr>
<tr>
<td>
<img src="../img/li5.jpg" alt="翡翠挂件">
<p>翡翠挂件<br>$1260</p>
</td>
<td>
<img src="../img/li6.jpg" alt="翡翠蝴蝶胸口扣">
<p>翡翠蝴蝶胸口扣<br>$1254</p>
</td>
<td>
<img src="../img/li7.jpg" alt="翡翠耳坠">
<p>翡翠耳坠<br>$6650</p>
</td>
<td>
<img src="../img/li8.jpg" alt="翡翠项白金镯子">
<p>翡翠项白金镯子<br>$9999</p>
</td>
</tr>
</tbody>
</table>
</main>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>页面标题</title>
<style>
.audio-player {
width: 300px;
height: 40px;
}
.all {
background: url(./img/bg002.jpg) no-repeat;
width: 800px;
height: 800px;
margin: 0px auto;
}
.all2 {
background: url(./img/bgg.jpg);
width: 700px;
height: 700px;
margin: 0px auto;
overflow: hidden;
}
.top {
width: 500px;
height: 600px;
background: url(./img/list.jpg) no-repeat;
float: right;
}
.l {
width: 100px;
height: 600px;
border: 1px solid black;
text-align: center;
float: left;
}
.rx{
width: 400px;
height: 400px;
float: right;
margin-top: 200px;
}
.all2::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="all">
<div class="all2">
<div class="top">
<div class="rx">
<ol>
<li>陈小朵——匆匆那年 <br />
<audio src="img/陈小朵 - 匆匆那年.mp3"
class="audio-player" controls></audio></li>
<br /><br /> <br />
<li>陈毅嗯——那些你很冒险的梦 <br />
<audio src="img/陈颖恩 - 那些你很冒险的梦.mp3"
class="audio-player" controls></audio></li>
<br /><br /> <br />
<li>黄霄云——左手指月 <br />
<audio src="img/黄霄雲 - 左手指月.mp3"
class="audio-player" controls></audio></li>
<br /><br /> <br />
<li>李健——抚仙湖 <br />
<audio src="img/李健 - 抚仙湖.mp3"
class="audio-player" controls></audio></li>
</ol>
</div>
</div>
<div class="l">
<br /><br /><br /><br />
<h1>心</h1>
<br />
<h1>灵</h1>
<br />
<h1>之</h1>
<br />
<h1>音</h1>
</div>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
