`
JYY282
  • 浏览: 24593 次
  • 性别: Icon_minigender_2
  • 来自: 无锡
社区版块
存档分类
最新评论

css图片定位,注释(定义摘录)

    博客分类:
  • CSS
 
阅读更多

 

<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 属性的值。

 

分享到:
评论

相关推荐

    Css Sprite Tools(CST CSS图片拼合定位工具) 1.0 

    CST CSS图片拼合定位工具就是专门针对这一技术而设计的辅助工具,它可以帮助开发者更方便地进行图片拼合和精确定位。 **1. CSS Sprite原理** CSS Sprite的基本思想是将网页中的一些背景图像整合到一张大图(Sprite...

    CSS样式风格定义

    下面提供的是系统默认提供的CSS样式风格定义,里面有详细的定义注释,注释标记为:/* ...... */。 友情提醒:修改风格设置必须具备一定网页css样式设计知识,建议您找些这方面的书看一下,在定义中也不能使用单引号...

    纯css图片无缝走马灯效果源码

    总结,纯CSS图片无缝走马灯效果源码通过CSS3的`@keyframes`定义动画,结合选择器和样式实现图片的平滑切换。通过适当调整动画时间和过渡效果,我们可以创建出各种吸引人的视觉体验。提供的源码应包含类似上述的CSS...

    纯CSS3鼠标点击图片叠加浮动层注释信息

    "纯CSS3鼠标点击图片叠加浮动层注释信息"这一主题涉及到的技术点主要包括CSS3的选择器、过渡效果、伪类以及相对定位等。 首先,我们需要理解CSS3中的选择器。选择器是CSS3中用来指定需要应用样式的HTML元素的方式。...

    css特效 DIV_CSS图片滚动效果

    在本教程中,我们将探讨“CSS特效:DIV+CSS图片滚动效果”。 1. **什么是DIV?** - `div`是HTML中的一个块级元素,全称为Division,意为分隔或分区。它通常用来组织网页内容,通过CSS来控制其样式和布局。 2. **...

    JS,ASPX,CSS文件内注释删除工具

    **JS、ASPX、CSS文件内注释删除工具** 该工具专门设计用于高效地从JavaScript(JS)、ASP.NET(ASPx)和Cascading Style Sheets(CSS)文件中删除所有的注释,以优化代码,提高文件加载速度或保护源代码隐私。在...

    js、css 注释清理工具 (yuicompressor)

    1. **注释清理**:工具会识别并移除JavaScript和CSS文件中的注释内容。这在生产环境中尤为重要,因为注释主要是为了方便开发者的理解和维护,并不会对浏览器执行代码产生影响。 2. **代码混淆**:`yuicompressor`还...

    CSS_样式定位图

    CSS_样式定位图

    纯div+css轮播图片切换图片

    - `css`:CSS文件则负责定义元素样式,包括图片的布局、动画效果、以及交互反馈的样式。 总结来说,纯div+css实现的图片轮播图片、电子相册功能,结合了CSS的布局和动画特性,以及JavaScript的交互处理,可以创建出...

    管理css css注释写法的例子

    在CSS(层叠样式表)编码中,注释是一种非常重要的工具,它允许开发者在代码中插入人类可读的说明,以帮助理解代码的功能、结构或目的。这尤其在维护和团队协作时非常有用。本篇文章将深入探讨CSS注释的写法,并通过...

    CSS元素定位详解与实战应用

    首先介绍了各个定位类型的定义和特点,在此基础上讨论了不同定位方式的操作方法、具体实例以及相互之间的区别。还重点讲解了使用z-index属性管理页面元素层级的方法。最后提供了实战演练帮助理解和掌握相关内容。...

    dreamweaver 【CSS样式规则对话框详解】& CSS定位详解之绝对定位和相对定位

    在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个CSS样式的时候,不需要对每一个项都进行设置,需要什么效果,选择相应的项...

    鼠标触发图片放大效果CSS方法

    此外,如果希望图片在放大时不改变其在页面中的位置,可以为其父容器设置相对定位,并将图片设置为绝对定位: ```css .parent-container { position: relative; /* 设置为相对定位 */ } #zoomable-image { ...

    DIV+CSS网页代码注释.docx

    例如,我们可以用`background=url`来设置背景图片,`color`、`bgcolor`等属性来定义颜色,`text-align`来调整文本对齐方式。 HTML还提供了多种文本修饰元素,如`&lt;b&gt;`用于粗体,`&lt;i&gt;`用于斜体,`&lt;u&gt;`用于下划线,`...

    html/javascript/css 注释表达式详解

    此外,还有基于CSS注释的hack,例如,将CSS属性写在注释中,某些浏览器会忽略注释内的样式,但某些不会: ```css /*\*/ property: value; /* 这个规则可能对某些浏览器生效 */ /*/*/ ``` 在阅读Jason Green的博客...

    css布局定位.zip

    在网页设计领域,CSS(Cascading Style Sheets)布局定位是构建页面结构的关键技术。它允许开发者精确控制元素的位置和尺寸,实现丰富的视觉效果。本资料包“css布局定位.zip”可能包含了一系列有关CSS布局定位的...

    CSS3注释叠加效果.zip

    在前端开发中,CSS3(层叠样式表第三版)为网页设计提供了许多新的特性和功能,其中之一就是注释叠加效果。这个效果通常用于增强用户体验,通过动态改变或展示注释来实现信息提示或者交互反馈。在这个名为"CSS3注释...

    normalize.css (中文注释)

    Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。1、保留有用的默认值,不同于许多 CSS 的重置2、标准化的样式,适用范围广的元素。3、纠正错误和常见的浏览器的不一致性...

    CSS 图片水平垂直居中于DIV

    总之,实现CSS中的图片水平垂直居中是一个常见的挑战,但通过理解不同的布局模式和定位方式,我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中,这些技巧都将大有裨益。

    CSS自定义图片热区示例

    在“CSS自定义图片热区”示例中,我们将学习如何利用CSS的伪元素(`:before`和`:after`)和定位技术来创建和美化这些热区。首先,我们需要在HTML中为图片和热区设置ID或类名,以便在CSS中进行选择和操作。例如: ``...

Global site tag (gtag.js) - Google Analytics