一、新闻列表

    在网页中模拟百度新闻列表，如下图所示：

html5 网页消息提示 html5网站新闻_html

（1）新建新闻列表目录：

html5 网页消息提示 html5网站新闻_html5 网页消息提示_02

（2）<title>标签中编写的是网页的名字：

html5 网页消息提示 html5网站新闻_数据分析_03

（3）科技后面的灰色字母暂时还无法实现，先用图片代替：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度新闻列表</title>
	</head>
	<body>
		<h1>科技 <img src="img/img1.png"></h1>
		<hr />
	</body>
</html>

    <img>标签是一个单标签，src属性是图片所在路径。

html5 网页消息提示 html5网站新闻_html5 网页消息提示_04

（4）使用<ul>标签表示列表，<li>标签表示列表中的每一项：

<ul>
			<li>今年第4败之后，长征11号成功从船上发射！实现中国..</li>
			<li>DataFocus使用技巧陪你玩转数据分析</li>
			<li>马云：现在创业不会选择互联网，机会在传统行业｜CE..</li>
			<li>LG Wing正式发布：独创旋转双屏设计</li>
		</ul>

html5 网页消息提示 html5网站新闻_html5 网页消息提示_05

（5）新闻中的每一项都是可以点击的，使用<a>标签实现：

<ul>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677879200067849252">今年第4败之后，长征11号成功从船上发射！实现中国..</a>
			</li>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677879220498964088">DataFocus使用技巧陪你玩转数据分析</a>
			</li>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677793920629595859">马云：现在创业不会选择互联网，机会在传统行业｜CE..</a>
			</li>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677869991382710304">LG Wing正式发布：独创旋转双屏设计</a>
			</li>
		</ul>

    <a>标签叫超链接，href属性表示点击超链接跳转的地址。

（6）<ul>标签是无序列表标签，可以改成<ol>有序列表：

<ol>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677879200067849252">今年第4败之后，长征11号成功从船上发射！实现中国..</a>
			</li>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677879220498964088">DataFocus使用技巧陪你玩转数据分析</a>
			</li>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677793920629595859">马云：现在创业不会选择互联网，机会在传统行业｜CE..</a>
			</li>
			<li>
				<a href="http://baijiahao.baidu.com/s?id=1677869991382710304">LG Wing正式发布：独创旋转双屏设计</a>
			</li>
		</ol>

html5 网页消息提示 html5网站新闻_html_06

二、图片的使用

    新建图片的使用目录，在该子目录下创建img目录存放图片：

html5 网页消息提示 html5网站新闻_html5 网页消息提示_07

    编写代码引入图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片的使用</title>
	</head>
	<body>
		<img src="img/timg(12).jpg" />
		<img src="img/timg(13).jpg" />
		<img src="img/timg(14).jpg" />
	</body>
</html>

html5 网页消息提示 html5网站新闻_数据分析_08

    从上图中我们可以看出，图片默认是从左到右的顺序在网页中展示，默认是底部对齐。当第一行放不下图片时则会换到下一行显示。

（1）调整图片的大小

    width属性表示图片的宽度，px表示单位是像素。注意修改图片大小不管是宽度（width）还是高度（height）图片都会自动的进行等比例的放大或缩小。如果同时修改宽度和高度，要注意保持图片比例，否则可能导致图片变形。

<body>
		<img src="img/timg(12).jpg" width="100px"/>
		<img src="img/timg(13).jpg" width="100px"/>
		<img src="img/timg(14).jpg" width="100px"/>
	</body>

html5 网页消息提示 html5网站新闻_html_09

（2）图片自适应网页窗口大小

    向网页中添加一张比较大的图片：

html5 网页消息提示 html5网站新闻_双屏_10

    我们发现因为图片过宽导致导致网页出现了横向的滚动条，通过如下设置图片可以自动根据窗口调整尺寸：

<img src="img/timg02.jpg" width="100%"/>

html5 网页消息提示 html5网站新闻_数据分析_11