导航:首页 > 万维百科 > 网页设计图片往下移

网页设计图片往下移

 发布时间：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>

与网页设计图片往下移相关的知识