文章目录
- 前言
- 一、商品分类功能
- 二、限时秒杀
-
目录
文章目录
前言
一、商品分类功能
二、限时秒杀
三、商品列表
四、在head标签引入两个标签
总结
前言
提示：这里可以添加本文要记录的大概内容：
HTML网页设计是计算机科学领域中的一个重要分支，它涉及到网页的布局、设计、交互等方面。随着互联网的发展，HTML网页设计已成为了一个必备的技能，无论是企业还是个人都需要掌握这一技能。
本教程将介绍HTML的基础知识，包括HTML标签、CSS样式、JavaScript脚本等内容，帮助读者快速入门HTML网页设计，并能够创建出美观、实用、交互性强的网页。同时，我们也将介绍一些实用的工具和技巧，帮助读者更加高效地完成网页设计工作。
希望本教程能够对广大网页设计爱好者有所帮助！
提示：以下是本篇文章正文内容，下面案例可供参考
一、商品分类功能
在HTML的body标签中放入以下代码，第一个功能分类模块将实现（<div class="big">用来放这三个功能，body标签上加上
<body οnlοad="init()" style="background-color: #c7ccce">复制
）
<div class="big" > <!-- 功能分类--> <table> <tr> <td > <a href="https://pro.m.jd.com/mall/active/3xhqjGH1wMz5FaMgrfYhR22sFvqz/index.html?babelChannel=ttt192"> <img src="../img/jd/jdleibie.png"/> <div class="gnfl">京东超市</div> </a> </td> <td > <a href="https://pro.m.jd.com/mall/active/8tHNdJLcqwqhkLNA8hqwNRaNu5f/index.html"> <img src="../img/jd/jdleibie2.png"/> <div class="gnfl">数码电器</div> </a> </td> <td width="20%"> <a href="https://h5.m.jd.com/pb/014076750/48qPXkwvatBBCAhdeTXG5WQam4yq/index.html"> <img src="../img/jd/jdleibie3.png" /> <div class="gnfl">京东新百货</div> </a> </td> <td> <a href="https://pro.m.jd.com/mall/active/4P9a2T9osR9JvtzHVaYTPvsecRtg/index.html"> <img src="../img/jd/jdleibie4.png"/> <div class="gnfl">京东生鲜</div> </a> </td> <td> <a href="https://daojia.jd.com/html/index/index.html?channel=jdapp"> <img src="../img/jd/jdleibie5.png"/> <div class="gnfl">京东到家</div> </a> </td> </tr> <tr> <td> <a href="https://plogin.m.jd.com/login/login?appid=773&returnurl=https://txsm-m.jd.com/?babelChannel=ttt35"> <img src="../img/jd/jdleibie6.png"/> <div class="gnfl">充值中心</div> </a> </td> <td> <a href="https://pro.m.jd.com/mall/active/ZfpVC9DA985pfN3XYTj8CnJcELS/index.html?addressID=0&provinceCode=19&cityCode=1607&districtCode=47388&townCode=62136&fullAddress=广东深圳市龙华区观澜街道&detailAddress=&lng=114.06031&lat=22.72174&lbsData=aNbNBRSSIeyJhZGRyZXNzSUQiOjAsInByb3ZpbmNlQ29kZSI6MTksInByb3ZpbmNlIjoi5bm/5LicIiwiY2l0eUNvZGUiOjE2MDcsImNpdHkiOiLmt7HlnLPluIIiLCJkaXN0cmljdENvZGUiOjQ3Mzg4LCJkaXN0cmljdCI6Ium+meWNjuWMuiIsInRvd25Db2RlIjo2MjEzNiwidG93biI6Iuingua+nOihl+mBkyIsImZ1bGxBZGRyZXNzIjoi5bm/5Lic5rex5Zyz5biC6b6Z5Y2O5Yy66KeC5r6c6KGX6YGTIiwiZGV0YWlsQWRkcmVzcyI6IiIsImxuZyI6MTE0LjA2MDMxLCJsYXQiOjIyLjcyMTc0fQ==&hasChanged=1"> <img src="../img/jd/jdleibie7.png"/> <div class="gnfl">附近好店</div> </a> </td> <td> <a href="https://plogin.m.jd.com/login/login?appid=300&returnurl=https://wq.jd.com/passport/LoginRedirect?state=3270780441&returnurl=https%3A%2F%2Fplus.m.jd.com%2Findex&source=wq_passport"> <img src="../img/jd/jdleibie8.png"/> <div class="gnfl">PLUS会员</div> </a> </td> <td> <a href="https://gmart.jd.com/?channelId=331&appId=11&beginTime=1605941298000&des=dolphin&dolphinId=11"> <img src="../img/jd/jdleibie9.png"/> <div class="gnfl">京东国际</div> </a> </td> <td> <a href="https://zpsy.jd.com/"> <img src="../img/jd/jdleibie10.png"/> <div class="gnfl">京东拍卖</div> </a> </td> </tr> </table> <br>
二、限时秒杀
代码如下：
<div id="main2">
<table>
<tr>
<span>
<div class="jdmsText">
京东秒杀
<font class="shaba"> 18点场</font>
<font class="time">00:56:23</font>
<button class="anniu"> ≡ </button>
</div>
</span>
</tr>
<tr>
<td>
<a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2?skuId=732678,10061300593688&RID=640">
<img src="../img/jd/1.jpg"/>
<div class="money">￥200.98</div>
</a>
</td>
<td>
<a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2?skuId=10061300593688,10069729571975&RID=640">
<img src="../img/jd/1.jpg"/>
<div class="money">￥200.98</div>
</a>
</td>
<td>
<a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2?skuId=10069729571975,100033029752&RID=640">
<img src="../img/jd/2.jpg"/>
<div class="money">￥300.98</div>
</a>
</td>
<td>
<a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2?skuId=100033029752,100053185466&RID=640">
<img src="../img/jd/1.jpg"/>
<div class="money">￥287.98</div>
</a>
</td>
<td>
<a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2?skuId=100053185466,10022400202379&RID=640">
<img src="../img/jd/2.jpg"/>
<div class="money">￥357.98</div>
</a>
</td>
<td>
<a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2?skuId=10022400202379,6203374&RID=640">
<img src="../img/jd/1.jpg"/>
<div class="money">￥572.98</div>
</a>
</td>
</tr>
</table>
<div style="height: 17px"></div>
</div>
<br>复制
三、商品列表
该功能使用script进行标签遍历,先写出一个div标签，给定一个id,在body前面加上一个script标签写遍历标签的方法
<!--商品列表--> <div id="main3"> </div> </div>
<script> function init(){ //main3Table var str = ""; str += "<table>" //商品图片 var photomain3 = ["1.jpg","2.jpg","1.jpg","2.jpg","1.jpg","2.jpg","1.jpg","2.jpg",] for (var i = 0; i < Math.ceil(photomain3.length/2); i++) { str += "<tr>" for (var j = 0; j < 2; j++) { str += "<td>" str += '<a href="https://item.m.jd.com/product/100018433238.html?_fd=jdm&cover=jfs/t1/90789/33/28409/96936/64ad3d6fF946dc331/879b639cab305597.jpg&ptag=">\n' + ' <img src="../img/jd/'+photomain3[i*2+j]+'"/>' + ' </a>\n' + '\n' + ' <div>' + ' <img src="../img/jd/jdcs.png"/>' + ' 海尔（Haier）海尔冰箱三开门超薄冰箱家用大容量智能节能风冷无霜\n' + ' </div>\n' + '\n' + ' <form>￥ 70.99\n' + ' <button>2件7.5折</button>\n' + ' </form>\n' + '\n' + ' <img src="../img/jd/jd.png"/>\n' + '\n' + ' <button class="like">\n' + ' 找相似\n' + ' </button>' str += "</td>" } str += "</tr>" } document.getElementById("main3").innerHTML = str; } </script>
四、在head标签引入两个标签
jquery.min.js为网络标签，无需写新的文件，但productCss.css则需要编写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="../css/productCss.css">
.big table{ word-wrap: break-word; word-break: break-all; background-color: white; border-collapse:collapse; width: 100%; } /*京东秒杀*/ #main2{ background-color: white; width:97%; margin:5px auto; border-radius: 20px; } /*京东功能的分类<td>*/ .big table tr td{ background-color: white; } /*.gntd{*/ /* width:20%;*/ /* background-color: white;*/ /*}*/ /*超文本链接*/ a{ text-decoration: none; } /*所有图片*/ img{ width: 100%; } /*功能分类*/ /*.gnfl{*/ /* color: #777777;*/ /* display: flex;*/ /* justify-content: center;*/ /* font-size: 30px*/ /*}*/ .big table tr td a div { color: #777777; display: flex; justify-content: center; font-size: 30px } /*京东秒杀的文本格式*/ .jdmsText{ font-size: 30px;color: black; width: auto; margin-left: 10px } /*京东秒杀的十八点场*/ .shiba{ font-size: 30px; color: red;width: auto; margin-left: 10px } /*京东秒杀的剩余时间*/ .time{ font-size: 30px; color: red; width: auto; margin-left: 10px } /*京东秒杀的按钮*/ .anniu{ margin-top: 0px; width: 40px; height: 40px; background-color: red; color: white; border-radius: 180px; margin-left: 500px; } /*京东秒杀的金钱*/ .money{ font-size: 20px; color: red; display: flex; justify-content: center; } /*商品推荐的价格*/ table tr td form{ color: red; } /*推荐商品打折*/ table tr td form button{ border-color: red; color: red; background-color: white } /*商品标题*/ table tr td div{ font-size: 0.67em; font-weight: bold; } /*京东超市*/ table tr td>div img{ margin-top: 2px; width: 2.6rem; height: 1rem; } /*京东物流*/ table tr td>img{ width: 2.6rem; height: 1rem; margin-top: 2px } /*找相似*/ table tr td>button{ font-size: 3px; margin-top: 2px;size: 10px; margin-left: 70px; width: 60px; height: 20px; border-radius: 10px }
总结
以上就是今天要讲的内容，本文仅仅简单介绍了html商品页面。
