整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要給大家介紹一下如何使用html+css完成新聞列表以及圖片列表的制作。
首先呢一個通用的新聞列表頁面一般是有左側的一個圖片縮略圖，右側有新聞的標題和簡介，有的呢還包含有新聞發布的時間等，我們具體來看一下下面這張圖片
從上邊圖片不難看出，整個新聞列表的布局就是由新聞圖片、標題、簡介以及時間組成。這個列表頁的主要涵蓋了以下幾個知識點：
1）浮動元素float（圖片要使用 float:left; 進行左對齊，而日期要使用 float:right; 進行右對齊）；
小技巧：使用float:right;的元素要放到元素內容的最左側，這樣元素可以避免內容過多導致右浮動元素換行的問題。
2）標題以及簡介元素配置（合理的使用css代碼來調整標題以及簡介元素，使主題結構清晰明了，這里要注意文字內容超出隱藏的問題）
具體的實現html代碼以及css代碼就如下圖所示：
圖片列表跟新聞列表比較類似，一般也是由一張圖片以及一個標題文字組成，我們具體來看一下下面這張圖片
由此圖片列表可以看出，本圖片列表包含了一個圖片的縮略圖，還有一行文字，半透明的黑色背景并且浮動在圖片的底部。這個圖片列表頁的主要涵蓋了以下幾個知識點：
1）浮動元素float（圖片列表要使用 float:left; 進行左排列對齊）；
2）標題元素的絕對定位（首先設置子元素position:relative;，然后設置標題絕對定位position:absolute;讓其位于圖片的底部）
3）背景半透明（使用css3的新屬性background:rgba(0,0,0,0.5);最后一位0.5為元素的透明度，區間（0-1））
具體的實現html代碼以及css代碼就如下圖所示：
為什么給大家放圖片而不直接放源代碼，就是為了想要讓大家鍛煉自己動手寫的能力，只有自己能夠熟練的運用才是王道。
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以舉一反三看能寫出其它的類似頁面，如果有不理解或者有需要源碼的可以直接私信我即可。
每日金句：人生不要被過去所控制，決定你前行的是未來，人生不要被安逸所控制，決定你成功的是奮斗。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
.列表（對相同類型的數據進行合理的展示）
列表分為有序、無序和自定義列表。
a、無序列表（ul）：
ul 標簽用來聲明無序列表 ，所有的列表項（li）都要包含在ul標簽當中
<ul>
<li> xx</li>
<li> xx</li>
</ul>標識符類型樣式：改變type屬性值來控制當前列表的標識符類型。
circle 實心圓樣式
square 實心正方形
disc 默認值實心圓
<ul type="none"> <!--無標識符-->
<li>吃飯</li>
</ul>
<ul type="square">
<li>睡覺</li>
</ul>
<ul type="circle">
<li>看電視</li>
</ul>注意：li 標簽中一般不能出現樣式，比如 <li type = "circle">XX</li>寫法不是很規范：
ul標簽當中只能出現 li 標簽，不能出現其他標簽和文字，列表內容寫在li標簽中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="none">
<!--li列表項-->
<li>吃飯1</li>
<li>吃飯2</li>
<li>吃飯3</li>
<li>吃飯4</li>
</ul>
</body>
</html>b、有序列表（ol）：
<ol>
<li> xx</li>
<li> xx</li>
</ol>修改標識符：改變type屬性值
1 數字1 2 3 ......
a/A 小/大寫字母
i/I 小/大寫的羅馬數字
<ol type="none">XX</ol> 無標識符
注意：同樣，ol標簽和li標簽是配合使用的，不能單獨使用，而且ol標簽內部不能存在 任何其他標簽，一般情況下只能存在li標簽。
有序列表
c、自定義列表（dl）：
<dl>標簽和<dt><dd>標簽是配合使用，不能單獨使用，而且<dl>標簽內部不能存在
任何其他標簽。（dt是標題，dd是列表內容）
<dl>
<!--自定義列表的標題-->
<dt>廣東省</dt>
<!--可以寫自定列表的內容-->
<dd>廣州</dd>
<dd>潮汕</dd>
<dd>中山</dd>
<dt>廣西省</dt>
<dd>南寧</dd>
<dd>柳州</dd>
<dd>桂林</dd>
</dl>小結：
列表有三種表現形式；
有序列表和無序列表必須配合li標簽使用；
列表的type屬性可以改變列表標識符；
2.表格
<table>XX</table> 聲明表格
<tr>XX</tr> 行
<td>XX</td> 列
<th>XX</th> 表頭單元格，粗體居中
<caption>XX</caption> 表格的標題，寫在table下面
<table border = "2"> <!--border 表格邊框粗細-->
<caption>XX</caption>
<tr>
<td>吃飯1</td>
<td>吃飯2</td>
</tr>
<tr>
<td>吃飯3</td>
<td>吃飯4</td>
</tr>
</table>補充：W3C：萬維網聯盟 ，制定web標準。
web標準分為結構（html）、 表現（css）、行為（js）
標簽名稱、屬性名稱必須小寫
標簽必須嚴格嵌套，并且必須閉合，即使空元素標簽也必須閉合
屬性值必須用引號引起來
立和使用列表
<dl></dl>列表標簽定義列表;
<dt>定義列表標題;
<dd>定義列表內容;說明:
1. dt和dd對應著的, 一個dt可以對應著多個dd;
2. dd完全是為了dt服務的, 對標題進行描述;
實例:
<dl>
<dt>標題1</dt><dd>內容11</dd><dd>內容12</dd>
<dt>標題2</dt><dd>內容21</dd><dd>內容22</dd>
</dl><ol></ol> 列表標簽定義一個標有數字的列表;
<ol type="value"></ol>
1 默認值。數字有序列表。(1、2、3、4)
a 按字母順序排列的有序列表，小寫。(a、b、c、d)
A 按字母順序排列的有序列表，大寫。(A、B、C、D)
i 羅馬字母，小寫。(i, ii, iii, iv)
I 羅馬字母，大寫。(I, II, III, IV)
<ol>
<li>聯系人:</li>xxx
<li>聯系地址:</li>北京市豐臺區
<li>郵政編碼:</li>100036
</ol><ul></ul> 列表標簽定義一個標有圓點的列表;
<ul type="value"></ul>
disc 默認值,實心圓。
circle 空心圓。
square 實心方塊。
<ul>
<li></li>
<li></li>
<li></li>
</ul><dir></dir>標簽定義目錄列表。
<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir><menu></menu>標簽可定義一個菜單列表。
<menu>
<li>html</li>
<li>xhtml</li>
</menu>在實際工作中, 它的用途較少, 大部分我們還是用ul;
另外還可以使用:
<div align=""></div>分區標簽,用來排版大塊HTML段落,也用于格式化表
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
