HTML - 列表 ¶

作者：KK
发表日期：2016.1.26

比如我们要在显示一个新闻列表,就试试以下代码:

<ul>
	<li>
		<a href="http://xxx.com/news/1.html">新闻1</a>
	</li>
	<li>
		新闻2,列表里的一行可以不用标签的,纯文本也可以
	</li>
	<li>
		<p>今日焦点:<a href="http://xxx.com/news/3.html">新闻3</a> 嘿嘿,加个p标签都行,反正符合嵌套规则咯</p>
	</li>
	<li>
		<a href="http://xxx.com/news/4.html">新闻4 <br/>据XXX新闻网报道,昨天伤亡数量已达到N人...这里多了个换行都行</a>
	</li>
	<li>
		<a href="http://xxx.com/news/5.html">新闻5</a> 更多嵌套方式自己发挥咯,看页面设计咯
	</li>
</ul>

浏览器效果如下:

HTML列表

其实列表就是用ul标签作为一个大容器,然后容器里面包几个几十个li标签作为列表的元素,每一个li标签就是列表里面的一行,而li里面写什么标签内容就随便你了,纯文字也可以,a标签也可以

但你不可以直接这样写:

<li>
	<a href="http://xxx.com/news/1.html">新闻1</a>
</li>
<li>
	<a href="http://xxx.com/news/2.html">新闻2</a>
</li>
<li>
	<a href="http://xxx.com/news/3.html">新闻3</a>
</li>
<li>
	<a href="http://xxx.com/news/4.html">新闻4</a>
</li>
<li>
	<a href="http://xxx.com/news/5.html">新闻5</a>
</li>

这样是不正确的,因为外面没有ul包住

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });