html图片

html插⼊图⽚背景

个⼈资料

⾃我介绍

姓名：

王⾬琪

年龄：

20

班级：

信2005-1

专业：

软件⼯程

⾃我评价 ：⽆

1、一般方式

deplay="0">

注释：

1) scrollAmount。它表示速度，值越大速度越快。

2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。

2、水平滚动和垂直滚动

（1）图片从右到左滚动

loop=infinite deplay="0">···

（2）图片从下到上滚动

onmouseout="this.start()">···

3、给滚动图片加超链接

用和把包围，并且img必须设border=0，否则图片会出现边框。例子如下：

例子：带有超链接的图片实现滚动效果

scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()">

href="连接地址">

4、给图片或文字加边框

双线：

虚线：

实线：

外凸：

火焰文字：

说道HTML中图片的水平居中问题，就不得不提到块级元素和行内元素。HTML中的所有标记都分为块级元素和行内元素两种，两者的区别是行内元素标记的下一个标记是接在行内元素的后面，而块级元素的下一个标记是在块级元素的下面，就是所谓的“标准流”，最明显的例子就是标记和标记，请看下面这段代码：

style=”background:green;”>Span ASpan B效果如图

再看这一段代码：

style=”background:red”>Div B 效果如图

这就是行内元素与块级元素的去区别。

每一个块级元素都可以用margin:auto的方法居中，例如这一段代码,

效果如图

浏览器会自动计算子标记的位置，并将它至于居中的位置，这种方法是目前css+div主流的水平居中方式。

标记默认是行内元素，是不可以用这种方法居中的，那我们就没有什么办法吗？当然有，利用css的display属性，强制将标记转换成块级元素，请看下面这段代码：

效果如图

这样就可以解决图片水平居中的问题。

HTML+CSS+JS实现图⽚的瀑布流布局的⽰例代码

前⾔

瀑布流布局简⽽⾔之就是类似瀑布流的布局嘛，这么⼀讲⼤家可能还是不是了解的很明⽩，来来来，那现在我给⼤家上⼀个常见的实例:

相信⼤家在百度上搜索图⽚时的时候，⽹页图⽚的布局就是这样⼦的吧，什么？你还是不清楚瀑布流，那咱就再我看⼀个那没关系，淘宝⼤家应该再熟悉不过了吧!

我们可以发现图中每个商品框的⾼度不同的，因此导致我们的商品图⽚的⾼度布局都不在⼀个⾼度上。在百度搜索图⽚的时候我们发现每张图⽚的宽度都是不⼀样的那为什么所⽤图⽚的宽度它能刚刚好

的占满⼀⾏呢?

这就是我今天今天教⼤家的布局⽅式——waterfall 布局，那该怎么实现呢？那我们就不多说啦，直接上⼲货!

⼀、总体效果

瀑布流的搭建完的效果如下：

⼆、HTML+CSS简单布局

⾸先⼤家在⽹上搜索⼀些图⽚或者⽤⼀下⾃⼰喜欢的图⽚均可，⽤html搭建好框架⽹页的框架将图⽚存放好，我们这⾥使⽤的了20张图为例。其次使⽤html+css实现⼀个简单的布局，这有个关键的步

骤：我们对⽐上⾯百度和淘宝页⾯的瀑布流布局就不难发现，要实现瀑布流所有图⽚都得有个相同的⾼度或者⾼度。因此我们这就给所⽤照⽚设置⼀个固定的宽度，但不限定的图⽚的⾼度保证每图⽚都

按其原始⽐例完整展⽰出来。

HTML，CSS代码如下：

css代码

*{

margin: 0;

padding: 0;

}

#container{

position: relative;

}

.box{

float: left;/* 给每个存放照⽚box设置为浮动元素，让所有的图⽚浮动到⽹页的第⼀⾏*/

padding: 5px;

}

.box-img{

width: 150px;

padding: 5px;

border: 1px solid #ccc;

box-shadow: 0 0 5px #ccc;

border-radius: 5px;

}

.box-img img {