主页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;//元素水平居中显示。
font-size: 14px;
color: #333;
padding-top: 50px;
padding-bottom: 50px;//方和下方分别添加50像素的内边距
}
img {
border: none;
}
a {
color: #333;
}
ul {
list-style-type: none;//去除无序列表的默认样式（通常是圆点）。
}
em {
font-style: normal;//字体样式设置为正常文本
}
.lt {
float: left;
}
.rt {
float: right;
}
div.clear {
font: 0px Arial;//元素字体设置为0像素
line-height: 0;//内容行高为0
height: 0;
overflow: hidden;//内容溢出时隐藏
clear: both;//清除浮动
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/*wrapin 主体容器宽度*/
.wrapin {
width: 1000px;
margin-left: auto;
margin-right: auto;//水平居中
}
header {
height: 50px;
background: #fff;
border-bottom: 1px solid #ccc;
}
.nav li {
cursor: pointer;
line-height: 50px;
float: left;
width: 20%;
text-align: center;
font-size: 16px;
}
.nav li a {
color: #333;
}
.nav li a:hover {
background-color: lightblue;
}
.banner img {
width: 100%;
display: block;//显示为块状元素。
}
.banner {//横幅块的样式
width: 100%;
height: 560px;
display: block;
overflow: hidden;//超出部分隐藏
position: relative;//相对定位于其父级容器。
}
.box-1 ul li {
width: 100;
height: 560px;
}
.box-1 ul li img {
display: block;
width: 100%;
height: 100%;
}
.box-1 ul li h2 {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background: rgba(125,125,120,.4);
text-indent: 2em;
padding-right: 500px;
font-size: 15px;
line-height: 40px;
}
.box-2 {
position: absolute;
right: 10px;
bottom: 14px;
}
.box-2 ul li {
float: left;
width: 12px;
height: 12px;
overflow: hidden;
margin: 0 5px;
border-radius: 50%;
background: rgba(0,0,0,0.8);
text-indent: 100px;
cursor: pointer;//一个手型光标
}
/* 设置.box-2中处于选中状态的列表项的背景颜色为橙色 */
.box-2 ul .on {
background:#FF9933;
}
/* 绝对定位，垂直居中偏移量为-40像素，圆角半径为5像素*/
.box-3 span {
position: absolute;
color: rgba(255,255,255,0.1);
background: rgba(255,255,255,0.1);
width: 50px;
height: 80px;
top: 50%;
font-family: "宋体";
line-height: 80px;
font-size: 60px;
margin-top: -40px;
border-radius: 5px;
text-align: center;
}
/* 设置.box-3中具有类名为prev的元素的左偏移量为10像素 */
.box-3 .prev {
left: 10px;
}
/* 右偏移量为10像素 */
.box-3 .next {
right: 10px;
}
/* 被选中时的背景透明化 */
.box-3 span::selection {
background: transparent;
}
/* 背景颜色为半透明白色 */
.box-3 span:hover {
background: rgba(255,255,255,0.5);
color: rgba(255,255,255,1);
}
/* 设置.con类的内边距为15像素，背景为白色 */
.con {
padding: 15px;
background: #fff;
}
.top .text {
float: left;
width: 60%;
line-height: 26px;
}
/* 图片容器的样式 */
.pic {
position: relative;
float: right;
margin-top: 50px;
animation: slide 8s forwards;
}
/* 定义动画slide */
@keyframes slide {
from { right: -100px; opacity: 0; } /* 动画起始位置，右侧隐藏*/
to { right: 0; opacity: 1; } /* 动画结束位置，移到指定位置并显示 */
}
.top .pic {
float: right;
width: 38%;
margin-top: 20px;
}
/* 设置.top中类为pic下的img元素宽度为100% */
.top .pic img {
width: 100%;
}
/* 设置.title元素的上下内边距为20像素，h2字体大小为20像素，颜色为深灰色 */
.title {
padding: 20px 0;
}
.title h2 {
font-size: 20px;
color: #333;
}
/* 设置类名为tupian的ul元素左右外边距为负15像素 */
.tupian ul {
margin: 0 -15px;
}
/* 设置类名为tupian的ul元素下的li元素宽度占33.33%，左浮动，
内边距为15像素，盒模型为边框盒 */
.tupian ul li {
width: 33.33%;
float: left;
padding: 15px;
box-sizing: border-box;
}
/* 设置类名为tupian的ul元素下的li元素下的img元素宽度100%，
高度200像素，等比例缩放裁剪以适应 */
.tupian ul li img {
width: 100%;
height: 200px;
object-fit: cover;
}
/* 设置类名为pinglun的元素行高为26像素，颜色为深灰色，
字体大小为14像素，下内边距为30像素 */
.pinglun {
line-height: 26px;
color: #333;
font-size: 14px;
padding-bottom: 30px;
}
/* 图片放大效果 */
li img {
transition: transform 0.3s; /* 添加过渡效果 */
}
/* 鼠标悬停时图片放大 */
li img:hover {
transform: scale(2);
}
footer {
background: #282828;
text-align: center;
color: #fff;
line-height: 50px;
}
#home {
display: inline-block;//内联元素
animation: slideRight 5s infinite;
}
@keyframes slideRight {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('.box-1 ul li');
const totalImages = images.length;
let currentIndex = 0;
function showImage(index) {
images.forEach((image, i) => {
// 显示当前索引对应的图片，隐藏其他图片
image.style.display = i === index ? 'block' : 'none';
});
}
// 切换到下一张图片
function nextImage() {
if (currentIndex < totalImages - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
// 显示下一张图片
showImage(currentIndex);
}
const banner = document.querySelector('.banner');
// 点击banner元素时触发切换下一张图片的函数
banner.addEventListener('click', function() {
nextImage();
});
// 自动切换图片
setInterval(() => {
nextImage();
}, 2000); // 切换间隔为2秒
});
</script>
</head>
<body>
<div class="wrapin">
<!--头部-->
<div class="banner">
<div class="box-1">
<ul>
<li> <img src="maijiaxiu1.jpg"></img> </li>
<li> <img src="maijiaxiu2.jpg"></img> </li>
<li> <img src="jiaju1.jpg"></img> </li>
<li> <img src="maijiaxiu3.jpg"></img> </li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3"> <span class="prev"> < </span> <span class="next"> > </span> </div>
</div>
<header>
<ul class="nav clearfix">
<li><a href="jiaju.html">家居家具</a></li>
<li><a href="fushi.html">家居服饰</a></li>
<li><a href="dianqi.html">家居电器</a></li>
<li><a href="liuyanban.html">留言板</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</header>
<!--内容-->
<div class="con">
<div class="top clearfix">
<div class="text">
<h2>欢迎来到home</h2>
<P>致力于打造一个完美舒适的家居生活<br>
<br></P>
</div>
<div class="pic"> <img src="logo.jpg"/> </div>
</div>
<div class="title">
<h2>买家评价</h2>
</div>
<div class="pinglun">
<div class="text">李先生：一站式家居服务可太方便了，一次可把一整套房子给安排了，不用来回跑。</div>
<div class="text">王先生：无论是电器还是家具都送货上门，一天即达，上门安装，有售后服务，买的放心</div>
<div class="text">张女士：居家睡衣可太舒服了，在家休闲很放松。</div>
</div>
<div class="tupian">
<div class="title">
<h2>买家秀</h2>
</div>
<ul class="clearfix">
<li><img src="maijiaxiu1.jpg"/></li>
<li><img src="maijiaxiu2.jpg"/></li>
<li><img src="maijiaxiu3.jpg"/></li>
</ul>
</div>
</div>
<!--底部-->
<footer>
<p><span id="home">home</span></p>
</footer>
</div>
</body>
</html>
家居家具页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>家居家具</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
.product {
border: 1px solid #ccc;
padding: 10px;
margin: 20px 0;
width: 100%;
box-sizing: border-box;
}
.product img {
width: 40%;
max-width: 60%;
height: auto;
margin-bottom: 10px;
}
.product h2 {
font-size: 20px;
margin-bottom: 10px;
}
.product p {
text-align: justify;
line-height: 1.6;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
transform: scale(1.5);
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1 style="margin-top: 20px;">家居家具购买页面</h1>
<div class="product">
<a href="jiaju1.html"><img src="shafa.png" alt="沙发"></a>
<h2>沙发</h2>
<p>北欧奶油风2024新款客厅电动绒布沙发简约轻奢直排三人位实木家具</p>
<p>价格：$800</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="极简套装">
<h2>极简套装</h2>
<p>包含了床，床垫，四件套，床头柜各一个，额外赠送床头灯一个。</p>
<p>价格：$600</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="会客套装">
<h2>会客套装</h2>
<p>三级沙发，一个茶几，送茶具一套。</p>
<p>价格：$1500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="原木茶桌">
<h2>原木茶桌</h2>
<p>原木茶桌，送茶具以及上等茶叶一套</p>
<p>价格：$400</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="麂皮沙发">
<h2>麂皮沙发</h2>
<p>长麂皮沙发，单人麂皮沙发。送靠枕</p>
<p>价格：$800</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="精致餐厅套装">
<h2>精致餐厅套装</h2>
<p>精致餐桌加椅子（标配六把），精致酒柜</p>
<p>价格：$1200</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="皮质沙发">
<h2>皮质沙发</h2>
<p>皮质单人沙发，皮质沙发，送靠枕</p>
<p>价格：$500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="shafa.png" alt="实木茶几">
<h2>实木茶几</h2>
<p>实木茶几一个，送茶具一套</p>
<p>价格：$300</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="jiaju9.jpg" alt="梦幻大床">
<h2>梦幻大床</h2>
<p>豪华梦幻大床，加柔软床垫，丝滑舒适四件套，漆木床头柜</p>
<p>价格：$2500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<script>
function purchaseSuccess() {
alert("购买成功");
}
</script>
</div>
</body>
</html>
家居家居购买详情页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>沙发详情</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.product-image {
text-align: center;
}
.product-image img {
max-width: 100%;
height: auto;
}
.product-info {
margin-top: 20px;
}
.product-info h2 {
font-size: 24px;
margin-bottom: 10px;//底部间距
}
.product-info p {
text-align: justify;
line-height: 1.6;
}
.product-info .price {
font-size: 18px;
color: red;
}
.product-details {
display: none;
margin-top: 20px;
}
.product-details img {
max-width: 100%;
height: auto;
margin-top: 10px;
}
button{
font-size: 16px;
}
button:hover {
transform: scale(1.5);
background-color: #45a049;
}
</style>
<body>
<div class="container">
<div class="product-image">
<img src="shafa.png" alt="沙发">
</div>
<div class="product-info">
<h2>电动绒布沙发</h2>
<p>北欧奶油风2024新款客厅电动绒布沙发简约轻奢直排三人位实木家具</p>
<p class="price">价格：$800</p>
<button οnclick="toggleProductDetails()">显示商品详细信息</button>
<button οnclick="purchaseSuccess()">立即购买</button>
<div class="product-details">
<h3>商品详细信息</h3>
<p>毛重：100kg</p>
<p>风格：奶油风</p>
<p>填充物硬度：软硬适中</p>
<p>安装说明详情：上门安装</p>
<p>出租车是否可运输：否</p>
<img src="1.png" alt="沙发">
<img src="2.png" alt="沙发">
<img src="3.png" alt="沙发">
<img src="4.png" alt="沙发">
</div>
</div>
</div>
<script>
function toggleProductDetails() {
var details = document.querySelector('.product-details');
if (details.style.display === 'none') {
details.style.display = 'block';
} else {
details.style.display = 'none';
}
}
function purchaseSuccess() {
alert("购买成功");
}
</script>
</body>
</html>
家居服饰页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>家居服装购买页面</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
text-align: center;
}
h1 {
padding: 20px;
background-color: #333;
color: #fff;
margin: 0;
}
.container {
max-width: 1200px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
background-color: #f1f1f1;
border: 2px dotted #555;
border-radius: 10px;
padding: 20px;
margin: 20px;
width: 250px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.product:hover {
transform: scale(1.5);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.product img {
width: 100%;
border-radius: 10px;
}
.product h2 {
margin: 15px 0;
font-size: 20px;
color: #555;
}
.product p {
margin-bottom: 10px;
font-size: 16px;
color: #777;
}
button {
padding: 10px 20px;
background-color: #FF5733;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #E84118;
}
</style>
</head>
<body>
<h1>家居服装购买页面</h1>
<div class="container">
<!-- 商品示例 -->
<div class="product">
<a href="fushi1.html"><img src="shuiyi.png" alt="简约套装"></a>
<h2>舒适睡衣</h2>
<p>翻领格纹短袖短裤套装</p>
<p>价格：$30</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="jiaju1.jpg" alt="温暖拖鞋">
<h2>温暖拖鞋</h2>
<p>保暖舒适的家居拖鞋</p>
<p>价格：$15</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="浴袍套装">
<h2>浴袍套装</h2>
<p>柔软吸水的浴袍套装</p>
<p>价格：$40</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
</div>
<script>
function purchaseSuccess() {
alert("购买成功");
}
</script>
</body>
</html>
家居服饰详情页面
<!DOCTYPE html>
<html lang="en">
<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;
background-color: #f2f2f2;
}
.product {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: #fff;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.product h2 {
font-size: 20px;
color: #333;
margin-bottom: 10px;
}
.product p {
color: #666;
margin-bottom: 5px;
}
button {
background-color: #ff6600;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 10px;
}
.details-img {
margin-top: 20px;
}
.details-img img {
width: 70%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="product">
<img src="shuiyi.png" alt="Clothes">
<h2>翻领格纹短袖短裤套装</h2>
<p>价格：$20</p>
<p>面料俗称：棉混纺布</p>
<p>领型：小翻领</p>
<p>适用季节：夏季</p>
<p>面料材质成分：棉72.4% 聚酯纤维27.6%</p>
<button>立即购买</button>
</div>
<div class="details-img">
<h2>产品图片</h2>
<img src="4.png" alt="Clothes Detail">
<img src="5.png" alt="Clothes Detail">
<img src="6.png" alt="Clothes Detail">
</div>
<script>
document.querySelector('button').addEventListener('click', function() {
alert('商品已购买！');
});
</script>
</body>
</html>
家居电器页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>家居电器</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f3f3f3;
text-align: center;
}
h1 {
padding: 20px;
background-color: #333;
color: #fff;
margin: 0;
}
.container {
max-width: 1200px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: auto;
gap: 20px;
justify-content: center;
}
.product {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.product:hover {
transform: translateY(10px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.product img {
width: 100%;
border-radius: 5px;
}
.product h2 {
margin: 10px 0;
font-size: 18px;
color: #333;
}
.product p {
margin-bottom: 10px;
font-size: 14px;
color: #666;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>家居电器购买页面</h1>
<div class="container">
<div class="product">
<a href="dianqi1.html"><img src="bingxiang.png" alt="冰箱"></a>
<h2>小米冰箱</h2>
<p>十字四门双开门风冷无霜一级智能超薄变频米家家用冰箱</p>
<p>价格：$800</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi2.jpg" alt="豪华套装">
<h2>豪华套装</h2>
<p>冰箱，吸尘器，微波炉，洗衣机，洗碗机，节能空调，电视机，油烟机，饮水机，咖啡机，榨汁机</p>
<p>价格：$4000</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi3.png" alt="厨房生活五件套">
<h2>厨房生活五件套</h2>
<p>榨汁机，加湿器，烤面包机，烧水壶，电熨斗</p>
<p>价格：$500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi4.jpg" alt="必备套装">
<h2>必备套装</h2>
<p>冰箱，洗碗机，洗衣机，烘干机</p>
<p>价格：$2500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi5.jpg" alt="厨房电器">
<h2>厨房电器</h2>
<p>电饭煲，高压锅自选一个</p>
<p>价格：$150</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi6.jpg" alt="休闲套装">
<h2>休闲套装</h2>
<p>双开门大冰箱，微波炉，洗碗机，豪华电视加音响DVD播放器</p>
<p>价格：$2800</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi7.jpg" alt="幸福套装">
<h2>幸福套装</h2>
<p>洗衣机，洗鞋机各两台，节能小空调三台，客厅3匹空调，家用电脑，三层管理冰箱，双开门智能冰箱各一台</p>
<p>价格：$5500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<div class="product">
<img src="dianqi8.jpg" alt="豪华休闲套装">
<h2>豪华休闲套装</h2>
<p>冰箱，微波炉，洗碗机，台式电脑加豪华音响DVD播放器，蓝牙音响，家庭打印机，笔记本电脑</p>
<p>价格：$3500</p>
<button οnclick="purchaseSuccess()">立即购买</button>
</div>
<script>
function purchaseSuccess() {
alert("购买成功");
}
</script>
</div>
</body>
</html>
家居电器详情页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冰箱详情页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.product-details {
text-align: center;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
font-size: 24px;
margin-top: 10px;
}
p {
color: #666;
font-size: 16px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #005F6B;
}
</style>
</head>
<body>
<h1>冰箱详情页面</h1>
<div class="container">
<div class="product-details">
<img src="bingxiang.png" alt="冰箱">
<h2>十字四门双开门风冷无霜一级智能超薄变频米家家用冰箱</h2>
<p>价格：$800</p>
<button οnclick="purchaseSuccess()">立即购买</button>
<div>
<label for="specification">规格选择：</label>
<select id="specification">
<option value="450L">450L</option>
<option value="500L">500L</option>
</select>
</div>
<div>
<label for="model">商品型号选择：</label>
<select id="model">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<p>面板类型：PCM彩涂板</p>
<p>制冷控制系统：电脑温控</p>
<p>箱门结构：十字对开门式</p>
<p>耗电量：0.85Kwh/24h</p>
</div>
</div>
<script>
function purchaseSuccess() {
alert('商品已购买！');
}
</script>
</body>
</html>
留言板页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言板</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
text-align: center;
}
h1 {
padding: 20px;
background-color: #333;
color: #fff;
margin: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
form {
margin-bottom: 20px;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
textarea {
min-height: 100px;
}
button {
padding: 10px 20px;
background-color: #FF5733;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #E84118;
}
.message {
background-color: #f1f1f1;
border: 2px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
text-align: left;
}
</style>
</head>
<body>
<h1>留言板</h1>
<div class="container">
<form id="messageForm">
<input type="text" name="name" placeholder="请输入您的姓名" required><br>
<input type="text" name="contact" placeholder="请输入您的联系方式" required><br>
<textarea name="message" placeholder="在这里留下您的留言" required></textarea><br>
<button type="submit" οnclick="submitMessage()">提交留言</button>
</form>
<div id="messages">
<div class="message">
<strong>张三：</strong>
<p>今天天气不错。</p>
</div>
<div class="message">
<strong>李四：</strong>
<p>这个留言板很不错。</p>
</div>
</div>
</div>
<script>
function submitMessage() {
const form = document.getElementById("messageForm");
const name = form.elements["name"].value;
const contact = form.elements["contact"].value;
const message = form.elements["message"].value;
const messagesDiv = document.getElementById("messages");
const newMessage = document.createElement("div");
newMessage.classList.add("message");
newMessage.innerHTML = `<strong>${name} (${contact}):</strong><p>${message}</p>`;
messagesDiv.appendChild(newMessage);
form.reset();
alert("留言提交成功，感谢您对我们的期望，我们会更加努力给用户提供更好的服务");
return false;
}
</script>
</body>
</html>
扫一扫
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
