在html中如何让图片跟着滚动条而动

html-css025

在html中如何让图片跟着滚动条而动,第1张

1、新建一个文件夹,用来存放网页文件和图片,快捷键ctrl+shift+n。

2、进入新建文件夹里面,右键新建文本文档。

3、进入新建的文本文档,复制下方代码,点击快捷键ctrl+s保存后退出。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>百度知道</title>

</head>

<body>

<!--

position:fixed是设置为固定在页面的某个位置,不会随滚动条滚动而移动。

top: 50px图片距离页面顶部50像素。

right:10px图片距离页面右边10像素。

display:block设置图片为块状元素,这样图片不会单独占据行-->

<img style="position:fixedtop: 50pxright:10pxdisplay:block" src="1.png" alt="">

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

</body>

</html>

4、重命名新建文本文档为index.html,原先的.txt的后缀同时去掉后保存,提示确实要更改后按“是”即可。

5、添加背景图片源文件,并命名为1.png,这些图片为你需要放置的图片。

6、点击index.html,右键浏览器打开预览效果。

7、浏览器打开后即可得到如下效果

<DIV id=demo style="overflow: hiddenwidth: 600pxheight: 190pxtop:485pxleft:252pxposition: absolute">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top" id=demo1>

<!-- 循环滚动的图片 -->

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >

<tr>

<td width="200" align="center" style="height: 151px">

<a href="WebDeSign.aspx">

<img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>

</td>

<td width="200" align="center" style="height: 151px">

<a href="SoftWare.aspx">

<img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>

</td>