固定div的位置
1
/7
新建一个html文件,命名为test.html,用于讲解html中怎么用CSS固定一个div模块位置不变。
2
/7
在test.html页面中,创建一个div模块,并在div内写上测试的文字,用于测试。
3
/7
在test.html页面中,使用css设置div的宽度为100%,高度为100px。 代码如下:
4
/7
在test.html页面中,使用css设置div内的文字垂直、水平居中,并设置文字的大小为30px。代码如下:
5
/7
在test.html页面中,使用css设置div内的文字颜色为白色,同时设置div的背景颜色为红色。代码如下:
6
/7
最后,在test.html页面中,使用css设置div的位置属性为absolute,即在页面中固定位置,并使用bottom设置div固定在页面的底部。
7
/7
在浏览器打开test.html页面,可见,div成功固定在页面的底部。
div 设置位置
1,div的上移指的是将div的位置相对当前位置向上移动;可以通过设置定位 margin、padding来实现;
2,给div设置position:absolute(同时需要给它的父元素设置position:relative),然后top设置负值,即可实现;margin、padding设置负值,也可以让div向上移动,移动的距离根据具体的值来定;
html设置div的位置
第一种方式是image 作为背景图片,即:background:url(".......");
例如如下代码块:
<div >添加文字...添加文字...添加文字...</div>
第二种方式是将img块与文字块(文字块采用span标签显示)放在同一个div 中,然后设置他们之间的位置,例如如下代码块:
<div >
< img src="loading.gif" width="170" height="89" alt="">
<span >添加文字...添加文字...添加文字...</span>
</div>
第三种方式是将img块与文字块(文本块存放在div中)放在同一个div 中,然后设置他们之间的位置,例如如下代码块:
<div >
< img src="loading.gif" />
<div >添加文字...添加文字...添加文字...</div>
</div>
怎么设置div的位置
要想显示网页中隐藏的内容你就需要知道他是怎么隐藏的,在一个网页上隐藏内容有无数的方法。一下介绍几种:
1.颜色,将文字颜色和背景颜色设置一样,比如白色。这样文字内容就看不见了。
2.css的display属性,将要隐藏的内容元素设置css属性为display:none;就隐藏了。
3.位置,将要隐藏的元素的位置设置到网页可见范围之外即可隐藏。
4.更多的方法,比如用js... 楼主需要先了解隐藏的方法,然后对症下药!
设置div的位置居中
因为“text-align:center”控制的是文本居中,div居中可以用外边距margin来实现。
1、新建html文件,在body标签中添加div标签,div标签中的内容为“演示文本”,添加题目中的css样式,为了方便演示,给div标签添加灰色背景,这时可以发现div靠近浏览器的左侧,文字在div中居中:
怎么调div的位置
简单来说,就是锚点导致的。当你的锚点标记后面没有跟其他字符表示要跳转到页面或者其他页面的某个位置时,那么就是直接到页面顶部,也就是你的问题“为什么会跳到最上边”。
简单来说:
linxz/caniuse
这是一个带锚点的链接,点击进去之后会到这个页面的指定位置。
linxz/caniuse
这是一个正常的没有锚点的链接,点击进去后不会到页面的某个位置。
js设置div的位置
JS语言是不能够直接修改DIV的位置的,因为位置属于该控件的样式,若想用JS这种脚本语言调整DIV的位置,需要调用DIV的style属性进行设置,也就是需要调整DIV的CSS样式表。修改分步骤:
1、获取到需要修改样式的元素;
2、设置调整。修改的示例代码如下: var div1 = document.getElementById('baiduSearch'); div1.style.marginTop = '225px'; 通常position的属性没有设置或设了默认值absolute,所以使用的都是静态属性,这样就可以直接通过给位置属性数值来更改元素位置。在js调用时,含‘-’的样式属性调用时需要先去掉‘-’并将下一个字母大写,下面列一下css样式表中常用到的位置属性:top right left bottom margin paddingmargin-top margin-right margin-left margin-bottompadding-top padding-right padding-left padding-bottom
设置div的位置靠右
不定宽布局:
不定宽布局分为一边不定宽和两边不定宽两种形式,在实际运用中第二种情况是不会采用的,我们具体来分析一下一边不定宽的左右布局方法,有以下两种情况:
1、左边定宽,右边不定宽,左在上,右在下;( 左边在右边div的上边)
遇到这种情况时,要将两个div进行左右布局,与左右定宽布局的方法基本相同,只需要将左边的div向左浮动{float:left;},并清除浮动,右边的div就会跟在已浮动的“div左”后面,即已经实现左右两列布局了。
2、左边定宽,右边不定宽,左在下,右在上;
将右边div写在上方,通常是希望在加载网站内容时先显示右边的内容,这种情况在“左边为菜单,右边是内容”的左右布局中经常用到。
设置div的位置固定
1、打开dw,新建一个html页面,进入html页面编辑。
2、在代码的body中间编写一个div层。
3、将这个新建好的html页面跟编写好的div利用快捷键“ctrl+s”另保存到知道的目录下。
4、点击dw的文件按钮,在弹出的下拉框中,选择“新建”。
5、在新建的窗口中,找到“css”这一栏,点击“css”新建一个css样式。
6、写样式用".pingmu{}"开始写,给它固定宽高,再添加背景色,让div自适应宽高,超过部分显示滚动条。
7、将这个css样式保存到同级目录下,如ceshi.html在c盘,css样式也保存在c盘。
8、保存好样式后,双击这个ceshi.html页面,用浏览器打开后看到100像素宽高的黑块。
如何设置div的位置
吸使用以下几种方式获取:
1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
3.screenX/screenY:鼠标在屏幕上的位置,从屏幕左上角开始(w3c标准)
4.offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
5.
layerX/layerY:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点
chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)
下面这个是获取相对于屏幕的坐标
document.onmousemove=function(e){e=e? e:window.event;document.writeln("X:"+e.screenX+"Y:"+e.screenY);}