網頁設計div浮動_網頁製作div浮動/間距怎麼弄

1、我想在我設計好的網頁中添加一個浮動框，怎麼弄啊？？？

在百度查找浮動框代碼，加到網頁中即可！

2、網頁製作，div浮動/間距怎麼弄

第一種方法：設置標題float：left；more的float：right。
第二種方法調整more的margin-left屬性

3、html如何讓其中一個div浮在另一個div上面

1、設置div樣式 z-index:auto，auto可定義為一個值(整數數字)，越大代表越置前，如可定義為： z-index:999。前提是div是定位元素。

2、可以使用float元素進行實現該效果。代碼實例如下：

效果如下：

例子代碼：

重疊樣式需要主要CSS樣式解釋

1、z-index 重疊順序屬性。
2、position:relative和position:absolute設置對象屬性為可定位（可重疊）。
3、left right top bottom絕對定位具體位置設置。

配合的樣式
1、css width
2、css height
3、background 為了觀察效果，我們對不同DIV設置不同背景顏色進行區別。

(3)網頁設計div浮動擴展資料：

z-index的值為正整數值，數字越大對應對象層越浮上層越靠前。

以上實例默認順序是「.div-c」浮在最上層（藍色背景層）、「.div-b」浮在中層（黃色背景層）、「.div-a」排最底層（紅色背景層）。我們接下來使用z-index樣式在不改變html代碼情況下實現順序顛覆。

「.div-b」浮在中層（黃色背景層）排序不變，實現「.div-a」浮在最上層（紅色背景層）、「.div-c」排最底層（藍色背景層）。

4、網頁設計浮動的問題

把你的背景圖片加引號background-image:url("images/header.jpg");

另外content層高度你可以不設,現在你裡面只放了一個left層,如果內容多的話它可以自動撐開的.

5、網頁設計，DIV+CSS問題，浮動問題

浮動最直接　最根本的原因就是兩個float的寬度和　大於總寬度。注意　IE下的偏移和margin在浮動下值的變化

6、html中浮動窗口怎麼做啊？就是一個小窗口飄在在頁面上那種

浮動窗口可以用js實現。帶關閉窗口的簡單全屏浮動代碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>帶關閉按鈕的浮動窗口</title>
</head>
<style type="text/css">
#fdck {border:1px solid #c0c0c0;margin:0 auto;padding:5px;background:#f0f0f0}
</style>
<body>
<div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<span style="CURSOR:hand;color:red;font-weight:bold;font-size:12px" onclick="clearInterval(interval);img.style.visibility = 'hidden'">關閉</span>
<div id="fdck">
浮動測試TEST
</div>
</div>
<script language=javascript>
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
</script>
</body>
</html>

粘貼到本地一個記事本，保存為HTML格式打開即可看見。

如果只是固定在一個位置不動，可以在div的style設置『position:fixed;』即可。

7、html(網頁)浮動窗口，如何製作html(網頁)浮動窗口？

浮動窗口可以很簡單的弄個，就是一個div 樣式<div style=" position:fixed; top:50%; left:50%; width:100px; height:50px; margin:-25px 0 0 -50px; ">內容</div>

8、div+css設計頁面的時候不清楚浮動會有什麼影響？請大俠詳細講一下，謝謝

浮動了那元素就不佔文抄檔流（普通流），不清除浮動布局會錯位或其他。問題挺多（你試下不同瀏覽器，如火狐），div1（沒設高度，有高度……即有布局，另論） div2（垂直排列，浮動div1不清除,即div1不佔文檔）
那麼div2是在div2它該在的位置，它不受div1內容的影響，當然如果你的主容器用了浮動（或overflow屬性）那裡面的div浮動是可以不清除的。

一般是用overflow屬性,用clear不好，因為要清除的東西太多，這樣有用到clear的太多，用clear還要做相應處理，不處理clear還要佔地盤。overflow比如你子要在content里用了就行了，裡面東西偶配合clear就行了，overflow在主元素里基本要設的。

9、怎樣製作網頁中的浮動層效果？

1.首先在<head>和</head>之間插入下列代碼
<br>
<style type="text/css">
#floater {
position: absolute;
left: 500;
top: 146;
width: 176;
visibility: visible;
z-index: 10;
}
-->
</style>
<br>

<br>
2.在body中的任意位置插入下列代碼

<div ID="floater" style="left: 590px; top: 158px">
<p align="center">
<img src="http://cfan.net.cn/tutu/200406301.jpg" width="127" height="150"><br>
<font color="#FF8040">歡迎光臨</font></p>
</div><script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;

function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}


function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}

if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br>
<p></p>

導航:首頁 > 萬維百科 > 網頁設計div浮動

網頁設計div浮動

與網頁設計div浮動相關的知識