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

代碼就是這個樣子了

結束

改換其他樣式也是一樣的，比如如下這樣的，同樣是用相同的方法來實現，只是引用的樣式不一樣而已。