今天有空，使用前端三件套html、css、js制作了一個非常簡單的產品制作頁面，與大家分享，希望可以滿足大家應急的需求。本頁面可以對產品進行“搶購”、對產品進行介紹，同時可以安排一張產品的高清大圖，我也加入了頁面的背景。
下面我們上具體流程。
HTML
首先是主體部分，我主要是用div盒子對頁面的各個部分進行分割，在一層大的div當中潛逃兩個小的div盒子，其中一個div中再次嵌套一個div進行文字介紹。具體的結構圖如下：
看完大致結構和原理，我們就開始具體的開發與實踐。我們用到的主體上面已經說過，主要用div進行完成，文字部分主要是用h系列的標簽和p標簽實現。圖片直接使用img即可使用。需要注意的是我們需要加入id或class來方便后續css的設置。接下來上代碼和具體效果圖供大家參考：
<div class="container"> <div class="image-section"> <img src="imgimg.png" alt="內容" class="image"> <div class="image-info"><h2> xxx秒殺產品 </h2><p id="miaosha">秒殺價：￥1000 </p><p id="miaosha">正在秒殺;</p><p>總量：100</p><p>余量：20</p><p>開始搶貨時間：2024.6.2 15:30</p> <p>結束搶貨時間：2024.6.4 15:30</p><button class="large-btn">立即秒殺</button><br><button class="small-btn">返回上一頁</button> </div> </div> <div class="text-section"><h2>商品詳情</h2><p>一款新推出的智能產品</p></div>
</div>
PS：這里的效果已經加入了最終的CSS代碼，并非最初的html所呈現的效果。最終css代碼如何使用請聽我娓娓道來。
CSS
CSS部分我們主要加入了對字體大小font-size、內外邊距padding和margin、按鈕button、div的背景色backgroundcolor、背景圖backgroundimage的多重設置。同時我們也針對字體樣式font-family進行了修改，為大家設置出一款還算好看的字體。
但是大家需要注意的是實際開發中我們需要盡可能多的使用%進行設置，而非使用px等設置，因為實際開發中我們的代碼需要保證在多臺電腦上得到的效果盡量一樣，因此使用百分比等方式再適合不過。
我們的代碼如下，大家使用后就可以得到如上圖的代碼：
<style>body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-serif; } .container { display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 100vh; } .image-section { display: flex; align-items: center; width: 100%; max-width: 800px; } .image { max-width: 50%; height: auto; margin-right: 100px;} .image-info { margin-left: 20px; } .image-info h2 { margin: 0 0 10px 0;background-color: #f0f0f0;padding: 10px;}.image-info p { margin: 0;font-size: 20px;} .large-btn, .small-btn { margin-top: 10px; padding: 10px 20px; border: none; cursor: pointer; outline: none; } .large-btn { font-size: 16px; width: 100%;box-sizing: border-box;} .small-btn { font-size: 14px; padding: 8px 16px; margin-left: auto; } .text-section p { max-width: 600px; text-align: center;}.text-section { max-width: 600px; text-align: center; background-color: #f2f2f2; padding: 20px; margin-top: 20px; border-radius: 8px; padding-left: 30px;padding-right: 30px;}#productname{background-color: #f2f2f2;padding: 10px;}#miaosha{background-color: #f2f2f2;padding: 5px;}body{background-image: url("test.webp");background-size: cover;background-position: center;}.image-section{background-color: #f2f2f2;padding: 30px;}
</style>JS
最后我們如果想要實現網頁之間的跳轉和購買等功能，我們需要對按鈕設置一些js代碼來完成。這里我們直接使用addEventListener即可實現頁面跳轉等功能，直接秒殺。我也在代碼中給出一些注釋，希望對大家有幫助：
<script>// 等待DOM加載完成 document.addEventListener('DOMContentLoaded', function() { // 使用querySelector獲取第一個class為small-btn的按鈕 var smallBtn = document.querySelector('.small-btn'); // 為按鈕添加點擊事件監聽器 smallBtn.addEventListener('click', function() { // 改變當前窗口的URL，實現頁面跳轉 window.location.href = 'conductlist.html'; }); });document.addEventListener('DOMContentLoaded', function() { // 使用querySelector獲取第一個class為small-btn的按鈕 var smallBtn = document.querySelector('.large-btn'); // 為按鈕添加點擊事件監聽器 smallBtn.addEventListener('click', function() { // 改變當前窗口的URL，實現頁面跳轉 window.location.href = 'sucess.html'; }); });</script>將上述代碼結合起來，我們就可以得到一個可以跳轉頁面的html網站了。希望對大家有所幫助，希望您也可以為我留下點贊、收藏和關注，這對我很重要，謝謝！?
