HTML实战篇：常用新闻列表以及图片列表制作

篇文章主要给大家介绍一下如何使用html+css完成新闻列表以及图片列表的制作。

1）新闻列表

首先呢一个通用的新闻列表页面一般是有左侧的一个图片缩略图，右侧有新闻的标题和简介，有的呢还包含有新闻发布的时间等，我们具体来看一下下面这张图片

从上边图片不难看出，整个新闻列表的布局就是由新闻图片、标题、简介以及时间组成。这个列表页的主要涵盖了以下几个知识点：

1）浮动元素float（图片要使用 float:left; 进行左对齐，而日期要使用 float:right; 进行右对齐）；

小技巧：使用float:right;的元素要放到元素内容的最左侧，这样元素可以避免内容过多导致右浮动元素换行的问题。

2）标题以及简介元素配置（合理的使用css代码来调整标题以及简介元素，使主题结构清晰明了，这里要注意文字内容超出隐藏的问题）

具体的实现html代码以及css代码就如下图所示：

2）图片列表

图片列表跟新闻列表比较类似，一般也是由一张图片以及一个标题文字组成，我们具体来看一下下面这张图片

由此图片列表可以看出，本图片列表包含了一个图片的缩略图，还有一行文字，半透明的黑色背景并且浮动在图片的底部。这个图片列表页的主要涵盖了以下几个知识点：

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>

有序列表(unordered list)

<ol></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>

无序列表(ordered list)

<ul></ul> 列表标签定义一个标有圆点的列表;

disc 默认值,实心圆。

circle 空心圆。

square 实心方块。

<ul>
<li></li>
<li></li>
<li></li>
</ul>

目录列表所有主流浏览器都支持 <dir> 标签。。

<dir></dir>标签定义目录列表。

<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>

菜单列表目前所有主流浏览器都不支持 <menu> 标签。

<menu></menu>标签可定义一个菜单列表。

<menu>
<li>html</li>
<li>xhtml</li>
</menu>

在实际工作中, 它的用途较少, 大部分我们还是用ul;

另外还可以使用:

<div align=""></div>分区标签,用来排版大块HTML段落,也用于格式化表

在线咨询

上一篇：把HTML转成PDF的4个方案及实现方法
下一篇：技术贴：一篇文章看懂链接（超链接）设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商