请教用html的li标签如何做到商品展示，例如京东的商品展示是用的li标签，一排显示4个，循环很多排？

html-css06

请教用html的li标签如何做到商品展示，例如京东的商品展示是用的li标签，一排显示4个，循环很多排？,第1张

你先给一个div用来包住内容的，设置宽高，然后在div放一个ul，ul里放4个li，li的宽度就是25%，或者可以写具体的值

<ul>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

</ul>

css：

ul{

width: 100%

}

li{

list-style:none

width: 20%

height:300px

border:1px solid #000

float:left

}

我是设置的5个就可以看到换行的效果了，如果觉得样式可以就在js里设置一个数组，复制一个li的内容，然后把li全部注释，然后在js里写循环遍历

var list=[

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'}

]

var html=""//声明一个空变量来接收拼接的内容

for(var i of list){

//拼接内容

html+=`

<li>

<img src="${i.img}" alt="" />

<p>${i.title}</p>

<p>¥<span>${i.price}</span>: 00</p>

</li>

`

$("ul").html(html)//把遍历的内容添加到ul里面

}

大概就是这样，不知道你看不看得懂

<html>

<head>

<script>

function cal() {

var appleVolum = Number(document.getElementById("appleVolum").value)

var bananaVolum = Number(document.getElementById("bananaVolum").value)

var pineappleVolum = Number(document.getElementById("pineappleVolum").value)

document.getElementById("msg").value = "共花费：" + (appleVolum * 10 + bananaVolum * 20 + pineappleVolum * 20)

}

</script>

</head>

<body>

苹果每斤10元，请输入您要购买的斤数：<input id="appleVolum"><br>

香蕉每斤20元，请输入您要购买的斤数：<input id="bananaVolum"><br>

菠萝每斤20元，请输入您要购买的斤数：<input id="pineappleVolum"><button onclick="cal()">我买</button><br>

信息:<input id="msg">

</body>

</html>

太大的 发不上来...

发一部分给你吧.

<html><head>

<!--eBay V3- msxml 4.0 XXXXXXXXXXXXXXXXXXXXXXXXXX-->

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"><meta name="description" content="eBay: Find BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE in the Home Garden , Yard, Garden Outdoor Living , Patio Garden Furniture , Hammocks category on eBay."><meta name="keywords" content="BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE, Home Garden, Yard, Garden Outdoor Living, Patio Garden Furniture, Hammocks"><title>BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE - eBay (item 140261481011 end time Aug-26-08 22:00:49 PDT)</title><!--srcId: ViewItem--><meta http-equiv="Pragma" content="no-cache"><meta name="Arg1" content="uu.rpn276"><script><!--

var iframeApproved = truevar nodefaultcss = true

//--></script><script language="javascript" src="http://include.ebaystatic.com/js/e551/us/features/viewitem/view_item_e5511us.js"></script><style type="text/css"><!--

.ebay{font-family:Arial,Helvetica,sans-serif}

.ebay{font-family:Arial,Helvetica,sans-serif}

.ebay .standard,.ebay p,.ebay td,.ebay div,.ebay span,.ebay ul,.ebay ol,.ebay dl{font-size:x-smallfont-family:Arial}

.ebay .standard1{font-size:x-smallfont-family:Arial}

.ebay a:active,.ebay a:link,.ebay a:visited{color:#0000CC}

.ebay a:visited{color:#990099}

.ebay pre{font-family:"Courier New",Courier,monospacefont-size:x-small}

.ebay h1,.ebay .pagetitle{font-size:mediumfont-weight:bold}

.ebay h1,.ebay .itemTitle{font-family:Arial,Helvetica,sans-seriffont-size:mediumfont-weight:boldmargin-bottom:2px}

.ebay h2,.ebay .sectiontitle{font-size:smallfont-weight:bold}

.ebay .givingBarSectiontitle{font-size:smallfont-weight:boldcolor:#999999}

.ebay .givingBarSectionSubTitle{font-family:verdanafont-size:10pxcolor:#999999}

.ebay h2,.ebay .itemSpecifics{font-family:Arial,Helvetica,sans-seriffont-size:x-smallfont-weight:boldmargin-bottom:0px}

html>body .ebay .itemSpecifics{font-size:small !important}

.ebay h3,.ebay th,.ebay .standardtitle{font-weight:bold}

.ebay .emphasized{color:#009900font-weight:bold}

.ebay .error{color:#FF0000}

.ebay .help{color:#666666}

.ebay .pipe{color:#9999FF}

.ebay .button,.ebay .navigation{font-family:Verdanafont-size:xx-small}

.ebay .textbox{font-family:Verdanafont-size:xx-smallcolor:#000000}

.ebay .textboxhelp{font-family:Verdanafont-size:xx-smallcolor:#666666}

.ebay .nomargin{margin:0px}

.ebay .cssMessage{display:none}

.ebay .optInLayer{color:#999999text-align:rightborder:1px solid #CCCCCCpadding:5px 5px 5px}

.ebay .hrthick{ text-align: rightwidth: 100%height: 2pxborder: solid #9999CC 1pxbackground: #9999CC}

.ebay .hrthin{ text-align: rightwidth: 100%height: 2pxborder: solid #DCDCFE 1pxbackground: #DCDCFE}

.ebay .hrwhite{ text-align: rightwidth: 100%height: 2pxbackground: #ffffffborder: 1px solid #ffffff}

.ebay .hrgray{ text-align: rightwidth: 100%height: 1pxbackground: #bbbbbbborder: 1px solid #bbbbbb}

.ebay .titleRow{ border-top:2px solid #9999ccborder-bottom:2px solid #9999ccmargin-top:4px}

.ebay .titleColumn{border-top:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderLeft{border-left:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderRight{border-right:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderBottom{border-bottom:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderLeftBottom{border-bottom:1px solid #9999ccborder-left:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderRightBottom{border-bottom:1px solid #9999ccborder-right:1px solid #9999ccbackground-color:#eeeef8}

.RetroStyle2 {font: Terminalfont-family: Terminalcolor: #00FF00background-color: #000000font-size: 22px}

.BasicStyle {font: Tahomafont-family: Tahomacolor: #5F8F8Fbackground-color: Blackfont-size: 20px}

.titlePadding {padding-top:4pxpadding-bottom:4px}

.ebay .shipFootNote{font-family:verdanafont-size:10pxcolor:#999999padding-bottom:20px}

.ebay .shipFootNote1{font-family:verdanafont-size:10pxcolor:#999999padding:0 15px 20px 15px}

.ebay .grayOut{font-family:arialfont-size: 13pxcolor:#cccccc}

.ebay .grayText{font-family:arialfont-size: 13pxcolor:#999999}

.ebay .insuranceText{ font-family:arialfont-size: 10pxcolor:#999999}

.ebay .titlePurchase{color:#515151}

.ebay .shipPadding { padding-top:5pxpadding-bottom:5px}

.ebay .shipPadding1 { padding:20px 15px 10px 15px}

.ebay .shipHeaderFont { font-family:arial font-size: 13px padding-bottom:4px}

.ebay .shipSecFont{ font-family:arial font-size: 13px padding-left:4px}

.ebay .indentation{ padding-left:8px}

.ebay .LessIndentation{ padding-left:4px}

.ebay .extraIndentation{padding-left:12px}

.ebay .ViShipSecBorder{border-bottom:0px solid #ccccccborder-left:1px solid #ccccccborder-right:1px solid #ccccccborder-top:0pxpadding:0px}

.ebay .ViShipSecHeaderBorder{border-width: 1pxborder-color: #ccccccborder-style: solidpadding:8px}

.ebay .ViShipSecTdBorder{border-bottom:1px solid #e5e5e5border-left:1px solid #e5e5e5border-right:1px solid #e5e5e5border-top:0px solid #e5e5e5padding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViShipSecThBorder{border-bottom:1px solid #e5e5e5border-left:1px solid #e5e5e5border-right:1px solid #e5e5e5border-top:0pxpadding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViShipSecTdRightBorder{border-bottom:1px solid #e5e5e5border-left:1px solid #e5e5e5border-right:0px solid #e5e5e5border-top:0px solid #e5e5e5padding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViShipSecTdLeftBorder{border-bottom:1px solid #e5e5e5border-left:0px solid #e5e5e5border-right:1px solid #e5e5e5border-top:0px solid #e5e5e5padding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViMessageSecHeaderBorder{border-width: 1pxborder-color: #ccccccborder-style: solid}

.refreshlinkText{font-family:Verdanafont-size:xx-smallcolor:#FFFFFFpadding-left:3pxpadding-right:4px}

#divrefresh a:active{font-family:Verdanafont-size:xx-smalltext-decoration:underlinecolor:#FFFFFF}

#divrefresh a:visited{font-family:Verdanafont-size:xx-smalltext-decoration:nonecolor:#FFFFFF}

#divrefresh a:link{font-family:Verdanafont-size:xx-smalltext-decoration:nonecolor:#FFFFFF}

#divrefresh a:hover{font-family:Verdanafont-size:xx-smalltext-decoration:underlinecolor:#FFFFFF}

.greyboldsmall{font:bold small Arial, Helvetica, sans-serifcolor:#666666}

.overlay {background:transparentposition:absolute}

.overlay .contentbox {width:100%position: relative}

.overlay .contentbox .content { padding:5pxborder:1px solid #666background: #fffborder-width: 0 1px}

.overlay .contentbox *, .overlay .shadowbox * {position:relative}

.overlay .shadowbox {width:100%position:absolutetop:7pxleft: 7pxopacity:.15filter: "alpha(opacity=15)"-moz-opacity:0.15}

.overlay .shadowbox .content {background: #000padding:10px}

.overlay .contentbox .n { border-top:1px solid #666margin: 0 5pxbackground: #fff}

.overlay .contentbox .s { border-bottom:1px solid #666margin: 0 5pxbackground: #fffposition:relative}

.overlay .shadowbox .n, .overlay .shadowbox .s {margin: 0 5pxbackground: #000}

.cn, .scn {margin:0padding:0height:5pxdisplay:blockfont-size:0line-height:0%}

.cn {background: transparent url(http://pics.ebaystatic.com/aw/pics/globalAssets/imgOverlayCorners.gif) no-repeat}

.scn {background: transparent url(http://pics.ebaystatic.com/aw/pics/globalAssets/imgOverlayShade.gif) no-repeat}

.overlay .n .cn .cn, .overlay .n .scn .scn { background-position:0 0width:5pxmargin-left: -5px}

.overlay .n .cn, .overlay .n .scn { background-position:100% -20pxmargin-right: -5px}

.overlay .s .cn, .overlay .s .scn { background-position:100% -30pxmargin-right: -5px}

.overlay .s .cn .cn, .overlay .s .scn .scn { background-position:0 -10pxwidth:5pxmargin-left: -5px}

.overlayPos {position:absolutemargin-left:190px_margin-left:-80pxmargin-top:-15px_margin-top:-2px}

.arrowTL, .arrowTR, .arrowBL, .arrowBR {background:transparent url(http://pics.ebaystatic.com/aw/pics/globalAssets/imgOverlayPoints.gif) no-repeatwidth:22pxheight:25pxposition:absolute}

.arrowTL {top:12pxleft:-21pxbackground-position:0px 0px}

.arrowTR {top:12pxright:-21pxbackground-position:100% -30px}

.arrowBL {bottom:12pxleft:-21pxbackground-position:0px -60px}

.arrowBR {bottom:12pxright:-21pxbackground-position:100% -90px}