導航:首頁 > 萬維百科 > 網頁設計圖片往下移

網頁設計圖片往下移

 發布時間：2020-12-26 02:10:35

1、web網頁設計問題，怎麼設計出下圖的效果，就是滑鼠移上去就切換內容

我給你簡單的寫了例子，至於具體樣式，你自己來寫吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
function meun(mun) {
var tab_name = document.getElementsByName("li");
for(var j=1;j<tab_name.length+1;j++){
for ( var i=1; i<=j; i++){
if ( i==mun ){
document.getElementById("right"+i).style.display="block";
document.getElementById("li"+i).style.color="#0ff";
}
else {
document.getElementById("right"+i).style.display="none";
document.getElementById("li"+i).style.color="#000";
}
}
}
}
</script>
<style>
.left_ul { float:left; width:200px;}
.left_ul li { height:30px; line-height:30px; text-align:center;}
.right1 { display:block; width:400px; float:left; height:200px; background:#999999;}
.right2 { display:none; width:400px; float:left; height:200px; background:#af6439;}
.right3 { display:none; width:400px; float:left; height:200px; background:#0ff;}
.right4 { display:none; width:400px; float:left; height:200px; background:#00f;}</style>
</head>
<body>
<ul class="left_ul">
<li name="li"><a href="#" onmousemove="meun(1)" id="li1">欄目1</a></li>
<li name="li"><a href="#" onmousemove="meun(2)" id="li2">欄目1</a></li>
<li name="li"><a href="#" onmousemove="meun(3)" id="li3">欄目1</a></li>
<li name="li"><a href="#" onmousemove="meun(4)" id="li4">欄目1</a></li>
</ul>
<div class="right1" id="right1">11111111111111111111111</div>
<div class="right2" id="right2">222222222222222222222</div>
<div class="right3" id="right3">3333333333333333333333</div>
<div class="right4" id="right4">44444444444444444444444444</div>
</body>
</html>

2、在用htlm製作網頁的時候怎麼將圖片下移，就是放在字的下面

上圖是效果

代碼如下：

<style type="text/css">
dl{width:200px;float:left;margin:0;padding:0;}
dl dd{width:200px;margin:0;text-align:center;padding-bottom:10px;}
dl dd img{height:180px;width:180px;}
dl dt{height:25px;line-height:25px;text-align:center;width:100%;}

</style>
<dl>
<dd><img src="xx.png"/></dd>
<dt>標題</dt>
<dt>描述</dt>
</dl>
<dl>
<dd><img src="xx.png"/></dd>
<dt>標題</dt>
<dt>描述</dt>
</dl>

3、網頁製作，這個效果是怎麼實現的，點擊一圖片在下面彈出這個，原本的內容往下移

這個應該是js特效，建議網上搜一下吧。

4、網頁製作中怎樣將div的位置下移

實現的方法和詳細的操作步驟如下：

1、第一步，如果要向下移動div，則可以使用位置屬性進行調整。
 具體方法是先打開編輯器，創建一個新的html文件，然後編寫基本的html結構。
 在這里，設置兩個div並分別命名其類屬性Parent和child，並為父子div設置寬度和高度以及不同的顏色，如下圖所示，然後進入下一步。

2、其次，完成上述步驟後，打開瀏覽器，可以在綠色的parent div中看到黃色的child，如下圖所示，然後進入下一步。

3、接著，完成上述步驟後，將position屬性添加到child屬性並將其設置為absolute。
 top，left，bottom和right值分別代表top，left，bottom和right的位置。 在此，只能將top屬性設置為向下移動，其他設置為0，如下圖所示，然後進入下一步。

4、最後，完成上述步驟後，再次打開瀏覽器，會發現child已下移，如下圖所示。這樣，問題就解決了。

5、網頁設計中如何移動圖片位置，如圖我的那張廬山地圖圖要移到右下角怎麼辦？

padding是不行的，你可以採用絕對定回位！答
<style type="text/css">
.css{ position: absolute; z-index: 999; bottom: 0px; right: 0px;}
</style>

與網頁設計圖片往下移相關的知識