HTML5网页成品（普洱茶购买）

最新推荐文章于 2024-07-17 16:29:37 发布

写代码的大学生

最新推荐文章于 2024-07-17 16:29:37 发布

阅读量463

点赞数 3

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2303_82176667/article/details/139686667

版权

1.完整代码

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
    <style>  
       .span{border: 1px solid #BCB9B9;margin: 2px 5px;color: #6B76EF}  
    </style>  
</head>  
  
<body>  
    <div>  
    <img src="img.png" style="float: left;margin: 1px 20px">  
           <h2>品韵-金芽熟普 357克/饼 19年云南普洱熟茶滋味醇正清爽甘甜  </h2>  
       <p>价格：<span style="color: red;font-size: 20px"> ￥128</span> </p>  
        <p>  茶类:普洱熟茶</p>  
<p>产区:云南省</p>  
<p>茶园: 茶吉送精选优质茶园</p>  
<p>快递: 包邮</p>  
<p>已售: 65</p>  
       <p>规格：<span style="color: red;border: 1px solid #FF0000">357g</span></p>  
       <p>数量：<input type="button" value="-">  
          <input type="text" style="width: 20px" value="1">  
          <input type="button" value="+">  
              </p>  
       <input type="submit" value="立即购买" style="width: 100px; height: 40px;background:#ff0000;border: 0">  
       <p>温馨提示:不满意就退款 电话订购: 400-9700-910</p>  
    </div>  
</body>  
</html>

2.实现过程

首先，这是一个完整的 HTML 文档，包含了 <html>、<head> 和 <body> 标签。
在 <head> 部分，定义了字符集（<meta charset="utf-8">）和页面标题（<title>）。
在 <body> 部分，有一个包含商品信息的 <div> 元素。
商品信息包括：
- 商品名称：品韵-金芽熟普 357克/饼 19年云南普洱熟茶滋味醇正清爽甘甜
- 价格：￥128
- 茶类：普洱熟茶
- 产区：云南省
- 茶园：茶吉送精选优质茶园
- 快递：包邮
- 已售：65
- 规格：357g
- 数量输入框：可以点击“-”和“+”来调整购买数量
- -立即购买按钮：点击后可以购买商品
- 温馨提示：不满意可以退款，电话订购：400-9700-910