文章目录
前言
提示：这里可以添加本文要记录的大概内容：
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%3A%2F%2Ftxsm-m.jd.com%2F%3FbabelChannel%3Dttt35">
<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=%E5%B9%BF%E4%B8%9C%E6%B7%B1%E5%9C%B3%E5%B8%82%E9%BE%99%E5%8D%8E%E5%8C%BA%E8%A7%82%E6%BE%9C%E8%A1%97%E9%81%93&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%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D3270780441%26returnurl%3Dhttps%253A%252F%252Fplus.m.jd.com%252Findex&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商品页面。
5213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
