1. Toy模板网首页
  2. > Toy博客

商品购物网页设计（HTML）

10月前 作者：可乐爱炸鸡 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了商品购物网页设计（HTML）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

  • 前言
  • 一、商品分类功能
  • 二、限时秒杀

  • 目录

    文章目录

    前言

    一、商品分类功能

    二、限时秒杀

    三、商品列表

     四、在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%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>

html商品分类页面,html,前端

 

二、限时秒杀

代码如下：

 <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>

 

html商品分类页面,html,前端

 

三、商品列表

该功能使用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>

html商品分类页面,html,前端

 四、在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">

html商品分类页面,html,前端

 

.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商品页面。文章来源地址https://www.toymoban.com/news/detail-795470.html

到了这里，关于商品购物网页设计（HTML）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包