css入门教程:CSS Position 教程

随着知识的CSS定位,你将能够操纵的确切位置的HTML元素。设计,以前需要使用JavaScript或HTML图片地图现在可以这样做完全是在CSS 。它不仅是容易的代码,但它也加载更快!

相对位置
相对定位变化的立场HTML元素相对的地方通常会出现。如果我们有一个标题,出现在我们上方的网页,我们可以使用相对定位,将它移到有点权,并减少了几个像素。下面就是一个例子。

h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: -10px;
}

您可能注意到,您确定了四种可能的方向(左,右,上,下)只用两个(左边和顶部) 。这里有一个快速移动时参考HTML元素在CSS 。

向左移动-使用负值离开。
向右移动-使用一种积极的价值了。
向上移动-使用负值顶端。
下移-使用一种积极的价值最高。

绝对位置
绝对定位,你定义的确切像素值在指定的HTML元素就会出现。起点是最左边的浏览器的可视面积,因此请务必衡量你是从这一点。

注意:火狐目前没有解释绝对正确的定位。但是这两个6.0 +和Opera 8.0 +做。

h3 {
position: absolute;
top: 50px;
left: 45px;
}
p{
position: absolute;
top: 75px;
left: 75px;
}
好了教程就OK了.

时间: 2024-10-25 06:17:48

css入门教程:CSS Position 教程的相关文章

CSS入门:css选择符

css 一.选择符模式模式/含义/内容描述 * 匹配任意元素.(通用选择器) E 匹配任意元素 E (例如一个类型为 E 的元素).(类型选择器) E F 匹配元素 E 的任意后代元素 F .(后代选择器) E > F 匹配元素 E 的任意子元素 F .(子选择器) E:first-child 当元素 E 是它的父元素中的第一个子元素时,匹配元素 E .(:first-child 伪类) E:link E:visited 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visit

CSS标签切换代码实例教程 比较漂亮_经验交流

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,

CSS入门教程:网页首字下沉

CSS入门教程:网页首字下沉 :first-letter 版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此伪对象仅作用于块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block . 在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下

web标准建站:CSS入门教程

css|web|web标准|教程|入门教程 原创教程,转载请注明出处:网页教学网 CSS是"Cascading Style Sheets"的简称,中文翻译为"串接样式表",也有人翻译 为"样式表".CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用 是相当重要的一个内容.CSS的作用是弥补HTML的不足,让网页的设计更为灵活. 这个文章只是为您介绍CSS的基础应用,指引您的一个入门的基础教程,主要目的是为 推进web标准

CSS入门教程

css|教程|入门教程 CSS是"Cascading Style Sheets"的简称,中文翻译为"串接样式表",也有人翻译为"样式表".CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用是相当重要的一个内容.CSS的作用是弥补HTML的不足,让网页的设计更为灵活. 这个文章只是为您介绍CSS的基础应用,指引您的一个入门的基础教程,主要目的是为推进web标准贡献自己的微薄之力. 说点我自己的体会,现在有好多人都在推广WE

css 入门教程:css控制input与bottn样式

哈哈今天我们来看看,css 入门教程:css控制文本输入框与按钮的css样式,好了我们先来看看效果图. 现在看到了我的文本输入框是不是淡色的背景与边框哦.现在来看看我们下面是怎么实现的吧.  <p align="center"><input name="" type="submit" class="btn" value="提交"></p>     <p align=

css入门教程:如何控制li div标签不换行

css入门教程:如何控制li div标签不换行,好了在css文档布局中,很多了东西可以去用,也有很多的细节是值得我们研究的,下面我们就来看看我用css来对li div 进行控制吧. index | aboutme | company | product 看上面这个导航栏吧,从左到右吧,当然我们可以直接定义a 标题也行,但本教程要讲到的是用li 或div 来进行控制哦,下面们来看看上面的代码. <div id=nav> <li>index</li> <li>a

【DIV+CSS入门教程】CSS如何控制页面

本节主要讲解,两个内容, 第一:CSS如何控制页面样式,有几种方式: 第二:这些方式出现在同一个页面时的优先级. 使用xHTML+CSS布局页面,其中有个很重要的特点就是内容与表象相分离,内容指HTML页面代码,表象就是CSS代码了,如果把页面看成穿着衣服的人的话,人就是HTML,是内容,而衣服呢就是CSS,是表 象,现在出现的问题是,如何让CSS去控制页面?或者说,如何让衣服穿在人身上,好体现出人得风格特点:不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现

Dreamweaver教程-CSS定位(positon)教程

 DIV+CSS网页布局中必不可少的就是定位,这一节的知识要和CSS盒子模型知识点结果起来理解. 1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动. -- <style type="text/css"> .dingwei{ position:relative; left:50px; } </style> -- <p>我是一段正常的文本</p> <p class="dingwei"&g

第9天:第一个CSS布局实例_基础教程

接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好