html图片列表问题

html-css065

html图片列表问题,第1张

一个简单的ul li 列表而已:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gbk" />

<title></title>

<style type="text/css">

ul{margin:0padding:0}

li{width:180pxheight:200pxborder: 1px red solidlist-style:nonefloat:leftmargin:10px}

</style>

</head>

<body>

<ul>

<li>图片地址</li>

<li>图片地址</li>

<li>图片地址</li>

<li>图片地址</li>

<li>图片地址</li>

<li>图片地址</li>

<li>图片地址</li>

<li>图片地址</li>

</ul>

</body>

</html>

HTML 列表(List)可以将若干条相关的内容整理起来,让内容看起来更加有条理。在列表内您可以放置文本、图像、链接等,也可以在一个列表中定义另一个列表(列表嵌套)。

HTML 为我们提供了三种不同形式的列表:

有序列表,使用 <ol>+ <li>标签

无序列表,使用 <ul>+ <li>标签

定义列表,使用 <dl>+ <dt>+ <dd>标签

1. 有序列表

在 HTML 中, <ol>标签用来表示有序列表。有序列表之间的内容有先后顺序之分,例如菜谱中的一系列步骤,这些步骤需要按顺序完成,这时就可以使用有序列表。

我们来看一个简单的实例:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>HTML有序列表</title>

</head>

<body>

  <p>煮米饭的步骤:</p>

  <ol>

      <li>将水煮沸</li>

      <li>加入一勺米</li>

      <li>搅拌均匀</li>

      <li>继续煮10分钟</li>

  </ol>

</body>

</html>

有序列表需要使用 <ol>和 <li>标签:

<ol>是 order list 的简称,表示有序列表,它可以为列表的每一项进行编号,默认从数字 1 开始。

<li>是 list item 的简称,表示列表的每一项,<ol>中有多少个 <li>就表示有多少条内容。列表项中可以包含文本、图片、链接等,甚至还可以是另外一个列表。

注意,<ol>一般和 <li>配合使用,不会单独出现,而且不建议在 <ol>中直接使用除 <li>之外的其他标签。

2. 无序列表

HTML 使用 <ul>标签来表示无序列表。无序列表和有序列表类似,都是使用 <li>标签来表示列表的每一项,但是无序列表之间的内容没有顺序。例如,早饭的种类不需要表明顺序,这时就可以使用无序列表。

我们来看一个简单的例子:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>HTML无序列表</title>

</head>

<body>

  <p>早餐的种类:</p>

  <ul>

      <li>鸡蛋</li>

      <li>牛奶</li>

      <li>面包</li>

      <li>生菜</li>

  </ul>

</body>

</html>

浏览器运行结果如图所示:

无序列表需要使用 <ul>和 <li>标签:

<ul>是 unordered list 的简称,表示无序列表。

<ul>和 <ol>中的 <li>一样,都表示列表中的每一项。默认情况下,无序列表的每一项都使用●符号表示。

注意,<ul>一般和 <li>配合使用,不会单独出现,而且不建议在 <ul>中直接使用除 <li>之外的其他标签。

3. 定义列表

在 HTML 中,<dl>标签用于创建定义列表。定义列表由标题(术语)和描述两部分组成,描述是对标题的解释和说明,标题是对描述的总结和提炼。

定义列表具体语法格式如下:

<dl>

  <dt>标题1<dt>

  <dd>描述文本2<dd>

  <dt>标题2<dt>

  <dd>描述文本2<dd>

  <dt>标题3<dt>

  <dd>描述文本3<dd>

</dl>

定义列表需要使用 <dl>、<dt>和 <dd>标签:

<dl>是 definition list 的简称,表示定义列表。

<dt>是 definition term 的简称,表示定义术语,也就是我们说的标题。

<dd>是 definition description 的简称,表示定义描述 。

可以认为 <dt>定义了一个概念(术语),<dd>用来对概念(术语)进行解释。

注意,<dt>和 <dd>是同级标签,它们都是 <dl>的子标签。一般情况下,每个 <dt>搭配一个 <dd>,一个 <dl>可以包含多对 <dt>和 <dd>。

我们来看一个简单的例子:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>HTML定义列表</title>

</head>

<body>

  <dl>

      <dt>HTML</dt>

      <dd>HTML 是一种专门用来开发网页的标记语言,您可以转到《<a href="#">HTML教程</a>》了解更多。</dd>

      <dt>CSS</dt>

      <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式,用来美化网页,您可以转到《<a href="#">CSS教程</a>》了解更多。</dd>

      <dt>JavaScript</dt>

      <dd>JavaScript 简称 JS,是一种用来开发网站(包括前端和后台)的脚本编程语言,您可以转到《<a href="#">JS教程</a>》了解更多。</dd>

  </dl>

</body>

</html>

<dt>和 <dd>虽然是同级标签,但是它们的默认样式不同,<dd>带有一段缩进,而 <dt>顶格显示,这样层次更加分明。

4. 总结

列表分类 说明

有序列表 <ol>表示有序列表,<li>表示列表中的每一项,默认使用阿拉伯数字编号。

无序列表 <ul>表示无序列表,<li>表示列表中的每一项,默认使用●符号作为作为每一项的标记。

定义列表 <dl>表示定义列表,<dt>表示定义术语、<dd>表示定义描述。一般情况下,每个 <dt>搭配一个 <dd>,一个 <dl>可以包含多对 <dt>和 <dd>。

html:

<section class="upload-section">

  <article class="upload-piclist">

    <div class="upload-file">

        <input type="file" id="file" accept="image/*" multiple onchange="imgChange()"/>

    </div>

  </article>

</section>

css:

/* body {

  margin: 0

  padding: 0

  max-width: 414px

  margin: 0 auto

  } */

  .upload-fh {

  background-image: url('data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAD1klEQVRoQ+XbTYhWVRgH8P8fwZUguFKi2pShbvqg2lhhG0PJlc40zQg62WhDg+jklIo1wViUNgwVTGSWWMngyvCjVdLHLrHaJaOBIIK2DHL7lweegcvL48D7vveee7xztu+d972/Ofec8zznPJe4T5qkRQC2AVgP4A8AMySvt3v7bPcP6rhe0lIAJwFsKvz+CZLb272f7MGSHnDsiy24WZKPNQosyUDWs88EsEGS3zQGLOkpx64OUG+T/LhdrF2f5SMt6QXHPhSghklOd4LNEixpo2OXBaitJL/rFJsdWFKvYxe3oO4A6Cd5phtsVmBJrwH4KgD9C+BVkj91i80GLGk3gKkA9I9jfy8DmwVY0kEAEwHoL8f+XRa2drCkDwG8E4B+A9BH8maZ2FrBkj4D8GYA+hHAKyT/KxtbG1iSRUiWCLS2045VFdjkYEm23HwPYHMAOk5yR1XQue9NFmlJskDCsC8FqCmSe6rGJuthSRYiGnZtgJogeSgFNglYkgX/hn08QI2RPJIKWzlYkqV1hn0kQL1B8ouU2ErBkixhN+zyADVA0j5L3iqZtCTZVoyBlrSILAmwNfZscqn/YOlgSf0AohTOkoBekj/XhS39kZa0E0A0Li0JMOzlOrGlgiWNAjgagCwJ6CF5tW5saWBJ7wEYD0CWBBj2Vg7YUsCSbB19KwBdcOz/uWC7BkuyzbRdAchOBfpygs7dS8eztKRvAQwEqGMkh3LEdtzDkj4CMBagJkna5JVt66iHJUX56jjJ97OVdhN4SLJtGdueaW3N7GFTLqgxPNetC2qWLqDtUGtf8Hif93CyOetwAf0ugGjC+tXRzYm0Cui9AD4JevpPRzcnli6gXwfwZYC+5mGm4WttHa3D892xJAspTwXX3Pae/qVOcelgX7JednS042F58bm60JWAHb3Ot3lWBDg7N5qpA10Z2NFPO/rRADdE8lhqdKVgR69y9BMBbpTkZEp05WBHP+jo5wJc0qQjCdjRdrZkOfSGAJ0s6UgGdrSdHhq6J0An2ThICi4EKMcBDAZom7mtgKUZ58NFoCQrYrFiltZmSYehm1MBUOjpwwAOBGhLOgzdnBqPAno/gA8CtMXdhr5S5rJVyxhuBUgaAfBpALOkw9CXykJnAfYZ3Iq9vw5glnQY+mIZ6GzAjt7iJ49RraWhf+gWnRXY0RaY2Frd/GrawkT2vFfVPhz0aLPqpQvoJx29JkA3qyK+gF7p6GcD9AjJz9sd09mN4WDJutdbLTdIRq8IzPs/yB7sE9nCeW+p8Hjbm2nDAKwcahbAdGPfTGt3nM53/V00ckNMKWY8LAAAAABJRU5ErkJggg==')

  background-repeat: no-repeat

  background-size: 100% 100%

  height: 30px

  width: 30px

  }

  .upload-hedaer {

  height: 55px

  display: grid

  grid-template-columns: repeat(3, 1fr)

  padding: 0 10px

  box-sizing: border-box

  align-items: center

  text-align: center

  background: #287cff

  color: #fff

  border-bottom: 1px solid #efefef

  font-size: 19px

  }

  .upload-hedaer div:last-child {

  text-align: right

  }

  .upload-textarea {

  width: 100%

  height: 60px

  font-size: 28px

  border: 1px solid #efefee

  max-height: 300px

  }

  .upload-article-text {

  width: 100%

  padding: 10px

  box-sizing: border-box

  }

  .upload-file {

  position: relative

  background: url('../images/z_add.png') no-repeat 50%/100% 100%

  /* width: 100px*/

  height: 120px

  order: 9

  }

  .upload-piclist {

  padding: 0 10px

  box-sizing: border-box

  display: grid

  grid-template-columns: repeat(3, 120px)

  justify-content: space-between

  grid-gap: 14px

  }

  #file {

  width: 100%

  height: 100%

  opacity: 0

  }

  .upload-Picitem {

  width: 100%

  height: 120px

  }

  .upload-Picitem>img {

  width: 100%

  height: 100%

  object-fit: cover

  }

  .submit {

  padding: 15px 0

  background-color: #287cff

  color: #fff

  text-align: center

  margin: 10px

  font-size: 20px

  border-radius: 10px

  }

  .upload-sm {

  padding: 10px

  box-sizing: border-box

  color: gray

  }

  .upload-sm ol>li {

  margin-bottom: 10px

  }

js:let picmax = 9//限制上传数量

function imgChange() {

let file = document.getElementById('file').files

let imglist = document.querySelectorAll('.upload-Picitem')

let piclist = document.getElementsByClassName('upload-piclist')[0]

let filelist = file.length + imglist.length >picmax ? 9 - imglist.length : file.length + imglist.length

if (file.length + imglist.length >= 9) {

let uploadfile = document.getElementsByClassName('upload-file')[0]

uploadfile.style.display = "none"

}

for (let i = 0i <filelisti++) {

readerfile(file[i]).then(e =>{

let html = document.createElement('div')

html.className = 'upload-Picitem'

html.innerHTML = '<img src=' + e + ' alt="pic">'

piclist.appendChild(html)

})

}

}

function readerfile(file) {

return new Promise((resolve, reject) =>{

let reader = new FileReader()

reader.addEventListener("load", function() {

resolve(reader.result)

}, false)

if (file) {

reader.readAsDataURL(file)

}

})

}

//提交

function submit() {

let imglist = []

let text = document.getElementsByClassName('upload-textarea')[0].value

let piclist = document.querySelectorAll('.upload-Picitem')

for (let i = 0i <piclist.lengthi++) {

imglist.push(piclist[i].lastChild.src)

}

console.log("发布内容:", text)

console.log("图片列表:", imglist)

}

//textarea高度自适应

var autoTextarea = function(elem, extra, maxHeight) {

extra = extra || 0

var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!window.opera &&!!window.opera.toString().indexOf('Opera'),

addEvent = function(type, callback) {

elem.addEventListener ?

elem.addEventListener(type, callback, false) :

elem.attachEvent('on' + type, callback)

},

getStyle = elem.currentStyle ? function(name) {

var val = elem.currentStyle[name]

if (name === 'height' &&val.search(/px/i) !== 1) {

var rect = elem.getBoundingClientRect()

return rect.bottom - rect.top -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px'

}

return val

} : function(name) {

return getComputedStyle(elem, null)[name]

},

minHeight = parseFloat(getStyle('height'))

elem.style.resize = 'none'

var change = function() {

var scrollTop, height,

padding = 0,

style = elem.style

if (elem._length === elem.value.length) return

elem._length = elem.value.length

if (!isFirefox &&!isOpera) {

padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'))

}

scrollTop = document.body.scrollTop || document.documentElement.scrollTop

elem.style.height = minHeight + 'px'

if (elem.scrollHeight >minHeight) {

if (maxHeight &&elem.scrollHeight >maxHeight) {

height = maxHeight - padding

style.overflowY = 'auto'

} else {

height = elem.scrollHeight - padding

style.overflowY = 'hidden'

}

style.height = height + extra + 'px'

scrollTop += parseInt(style.height) - elem.currHeight

document.body.scrollTop = scrollTop

document.documentElement.scrollTop = scrollTop

elem.currHeight = parseInt(style.height)

}

}

// addEvent('propertychange', change)

// addEvent('input', change)

// addEvent('focus', change)

change()

}

pic:z_add.png