css部分如下:
img{width:120px; height:80px;float:left;margin-right:16px;}
.img3{margin-right:0;}html部分如下：
<img src="images/001.jpg" /> <img src="images/002.jpg" /> <img src="images/003.jpg" /> <img src="images/004.jpg" /> <img src="images/005.jpg" /> <img src="images/006.jpg" class="img3" />
说明：
图片总宽度 120×6=720
剩余间距 800－720=80
6张图5个间距，每个80÷5=16
样式中img将6张图均设置右边距(margin-right)16px，总间距16×6=96
总间距超出剩余间距16，故单独在第6张图上加样式margin-right:0;清除右间距
电商节双十一、双十二经常需要搞促销，今天我们就来介绍几款通过css实现的促销banner样式，如下图所示：<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https…
2022/11/24 12:06:35
苹果IOS系统的界面很漂亮，今天我们就用css实现漂亮的类似苹果风格的组件效果。如下图所示：<html><head> <meta charset="UTF-8"><style data-styles="">ion-icon{visibility:hidden}.hydrated{visibility:inherit}</st…
2022/11/24 10:36:42
我们曾经介绍过很多种图片滑动的效果，今天我们使用css实现一个图片和背景同时滑动的酷炫效果，如下图所示：<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href…
2022/11/22 21:57:11
Flash虽然已被淘汰了，但它所实现的一些效果还是非常棒的，今天我们就用css实现一个酷炫的Flash文字跳动的经典动画效果，如下图所示：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon…
2022/11/22 21:39:50
设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法 text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…
2021/7/14 20:35:17
只让页面显示横滚动条，不显示竖滚动条的方法其实很简单，主要用到body的两个css属性 overflow和 overflow-y，如下所示：body { overflow:scroll; overflow-y:hidden;}
2021/2/28 21:45:25
网页的滚动条样式可以修改的，主要是使用css来控制那如何修改呢？如下代码：<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…
2021/2/28 21:15:24