前端网页实现，排列显示数据库内容

img


我想要把这三个内容换成我数据库里面的商品信息该用什么控件，具体要怎么做啊


 <div class="list">
 
    <a target="_blank" href="web/article1.html" class="content-item"><div class="content-pic" style="background-image: url();"></div><p class="content-name">如何高效做笔记-康奈尔笔记法</p></a>
 
    <a target="_blank" href="web/article2.html" class="content-item"><div class="content-pic" style="background-image:url();"></div><p class="content-name">iPad 手势操作技巧 #iPad #苹果 #科技</p></a>
 
    <a target="_blank" href="web/article3.html" class="content-item"><div data-v-374003d4="" class="content-pic" style="background-image:url();"></div><p class="content-name">MacOS 有哪些隐藏功能/技巧？试试这5个</p></a></div>
 <div class="graphic-more">
     <a href="web/content.html" class="text" style="color:#FFF";>查看更多精选</a>
 
 </div>
 </div>

这是我目前的代码 ，点击之后要跳转到商品详情页面

img


这是我的数据库内容，只显示前三个就行

后端写个接口，返回数据库前3条内容，前端ajax请求数据，返回数据遍历渲染在页面。

Webform 项目中的话，超链接 用 HyperLink 控件:
https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.hyperlink?view=netframework-4.8.1
图片用 Image 控件 : https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.image?view=netframework-4.8.1
p标签用 Label 件 : https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.label?view=netframework-4.8.1