<div class="goleft"><a href="#">上一张</a></div> <div class="goright"><a href="#">下一张</a></div>
.gundong .goleft{ width:35px; height:80px; background:url(../images/minjt.gif) 0 0 no-repeat; text-indent:-999px;overflow:hidden; position:absolute; left:-35px;top:300px;} .gundong .goright{ width:35px; height:80px; background:url(../images/minjt.gif) 0 -100px no-repeat; text-indent:-999px;overflow:hidden; position:absolute; left:1000px;top:300px;}
1.width
定义和用法
width 属性设置元素的宽度。
说明
这个属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距。
2.background
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
实例
如何在一个声明中设置所有背景属性:
body
{
background
: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
3.text-indent
定义
text-indent 属性规定文本块中首行文本的缩进。
注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。
4.overflow
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
5.position
定义和用法
position 属性规定元素的定位类型。
实例
定位 h2 元素:
h2
{
position:absolute;
left:100px;
top:150px;
}
可能的值
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
相关推荐
CST CSS图片拼合定位工具就是专门针对这一技术而设计的辅助工具,它可以帮助开发者更方便地进行图片拼合和精确定位。 **1. CSS Sprite原理** CSS Sprite的基本思想是将网页中的一些背景图像整合到一张大图(Sprite...
下面提供的是系统默认提供的CSS样式风格定义,里面有详细的定义注释,注释标记为:/* ...... */。 友情提醒:修改风格设置必须具备一定网页css样式设计知识,建议您找些这方面的书看一下,在定义中也不能使用单引号...
总结,纯CSS图片无缝走马灯效果源码通过CSS3的`@keyframes`定义动画,结合选择器和样式实现图片的平滑切换。通过适当调整动画时间和过渡效果,我们可以创建出各种吸引人的视觉体验。提供的源码应包含类似上述的CSS...
"纯CSS3鼠标点击图片叠加浮动层注释信息"这一主题涉及到的技术点主要包括CSS3的选择器、过渡效果、伪类以及相对定位等。 首先,我们需要理解CSS3中的选择器。选择器是CSS3中用来指定需要应用样式的HTML元素的方式。...
在本教程中,我们将探讨“CSS特效:DIV+CSS图片滚动效果”。 1. **什么是DIV?** - `div`是HTML中的一个块级元素,全称为Division,意为分隔或分区。它通常用来组织网页内容,通过CSS来控制其样式和布局。 2. **...
**JS、ASPX、CSS文件内注释删除工具** 该工具专门设计用于高效地从JavaScript(JS)、ASP.NET(ASPx)和Cascading Style Sheets(CSS)文件中删除所有的注释,以优化代码,提高文件加载速度或保护源代码隐私。在...
1. **注释清理**:工具会识别并移除JavaScript和CSS文件中的注释内容。这在生产环境中尤为重要,因为注释主要是为了方便开发者的理解和维护,并不会对浏览器执行代码产生影响。 2. **代码混淆**:`yuicompressor`还...
CSS_样式定位图
- `css`:CSS文件则负责定义元素样式,包括图片的布局、动画效果、以及交互反馈的样式。 总结来说,纯div+css实现的图片轮播图片、电子相册功能,结合了CSS的布局和动画特性,以及JavaScript的交互处理,可以创建出...
在CSS(层叠样式表)编码中,注释是一种非常重要的工具,它允许开发者在代码中插入人类可读的说明,以帮助理解代码的功能、结构或目的。这尤其在维护和团队协作时非常有用。本篇文章将深入探讨CSS注释的写法,并通过...
首先介绍了各个定位类型的定义和特点,在此基础上讨论了不同定位方式的操作方法、具体实例以及相互之间的区别。还重点讲解了使用z-index属性管理页面元素层级的方法。最后提供了实战演练帮助理解和掌握相关内容。...
在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个CSS样式的时候,不需要对每一个项都进行设置,需要什么效果,选择相应的项...
此外,如果希望图片在放大时不改变其在页面中的位置,可以为其父容器设置相对定位,并将图片设置为绝对定位: ```css .parent-container { position: relative; /* 设置为相对定位 */ } #zoomable-image { ...
例如,我们可以用`background=url`来设置背景图片,`color`、`bgcolor`等属性来定义颜色,`text-align`来调整文本对齐方式。 HTML还提供了多种文本修饰元素,如`<b>`用于粗体,`<i>`用于斜体,`<u>`用于下划线,`...
此外,还有基于CSS注释的hack,例如,将CSS属性写在注释中,某些浏览器会忽略注释内的样式,但某些不会: ```css /*\*/ property: value; /* 这个规则可能对某些浏览器生效 */ /*/*/ ``` 在阅读Jason Green的博客...
在网页设计领域,CSS(Cascading Style Sheets)布局定位是构建页面结构的关键技术。它允许开发者精确控制元素的位置和尺寸,实现丰富的视觉效果。本资料包“css布局定位.zip”可能包含了一系列有关CSS布局定位的...
在前端开发中,CSS3(层叠样式表第三版)为网页设计提供了许多新的特性和功能,其中之一就是注释叠加效果。这个效果通常用于增强用户体验,通过动态改变或展示注释来实现信息提示或者交互反馈。在这个名为"CSS3注释...
Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。1、保留有用的默认值,不同于许多 CSS 的重置2、标准化的样式,适用范围广的元素。3、纠正错误和常见的浏览器的不一致性...
总之,实现CSS中的图片水平垂直居中是一个常见的挑战,但通过理解不同的布局模式和定位方式,我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中,这些技巧都将大有裨益。
在“CSS自定义图片热区”示例中,我们将学习如何利用CSS的伪元素(`:before`和`:after`)和定位技术来创建和美化这些热区。首先,我们需要在HTML中为图片和热区设置ID或类名,以便在CSS中进行选择和操作。例如: ``...