html显示列表

前言

今天再写一篇前端的基础，本来不想写的因为太基础了，后来思考一下还是决定给贴出来，万一能帮到别人呢！

正文

要解决的问题是，前端的列表显示，而且是带样式的列表。如下图：

图中的列表是图片加各种样式组合在一块显示的，标题底下的虚线是引用的图片。
主要代码

//注意id,调用js中的indexLoad()方法
<ul id="theme_body" class="gsgg_box3"></ul>

function indexLoad() { //是页面加载时执行的初始化方法，类似C++的构造方法
	//注意下面括号匹配
	var weburl = window.webUrl
	$.ajax({
		type: "post", // 以post方式发起请求
		url: weburl + "/ArticleList", // 你的请求链接
		data: { // 提交数据
			"categoryId": "2",
			"number": "6", // 前者为字段名，后者为数据	
			"pageNumber": "1"
		},
		success(data) {
			var list = "";
			var areasList = data.data;
			for(var i = 0; i < data.data.length; i++) {
				//alert(value=data.data[i].title)
				//标题
				var title1 = data.data[i].title
				//时间
				var date1 = /\d{4}-\d{1,2}-\d{1,2}/g.exec(data.data[i].updateDate);
				//文章内容id
				var articleId = data.data[i].id;
				var categoryId = 2;

				list +=
					'<li><a href=./xq/details.html?param1=' + categoryId + '&param2=' + articleId + '>' + title1 + '</a><span>' + date1 + '</span></li>'
			}

			document.getElementById('theme_body').innerHTML = list;
		
}; 

代码就是这个样子了

结束

改换其他样式也是一样的，比如如下这样的，同样是用相同的方法来实现，只是引用的样式不一样而已。