巩义网站制作专业品牌! 宇程网络-巩义企业网站专业服务商 加入收藏
巩义网站制作会员登录
注册
巩义市宇程网络有限公司巩义做网站,找宇程网络! 巩义网站设计热线 巩义网页设计在线咨询
技术交流
网站建设
服务器
网站安全维护
域名注册
虚拟主机
站长之家
网站推广
企业邮局
数据库
 
巩义做网站,找宇程网络!
巩义市宇程网络成立于二零零四年,是家专业提供巩义网站制作巩义网页设计巩义网页制作巩义网站设计巩义网站开发、域名注册、虚拟主机、企业邮箱等服务的正规巩义做网站的公司,迄今已累积客户逾千家,在业界具有相当的知名度,在巩义网站建设市场上树立了良好的口碑。
业精于专,值得您的信赖!
销售热线:13949060853
查看更多联系方式
css知识
制作网站如何让div层在视野屏幕里相对居中?如何让div层满屏幕显示?

巩义做网站公司宇程网络这两天在给客户纳德顾问思品堂做网站的时候,遇到了以下几个问题,河洛渔人特在此作出总结,希望对朋友有所帮助!

 

高度 怎么设置全屏?如何让div层满屏幕显示?

这个其实很简单,在样式里加上position:fixed;再结合height就可以100%的高度了。

.test{
width:100%;

height:100%;
position:fixed;
}

position,有三个属性值fixed,absolute,relative
fixed是浮动,absolute是绝对定位,relative是相对定位.
自己加上这属性再每个值设置过去体会一下就知道了.

如何让div层在视野屏幕里相对居中?

没有研究过这个问题的朋友觉得很难,实际上原理很简单,主要记住以下3点就OK了。

1、先让position:fixed;.
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了;

记住以上3个要点,来看个例子

以下是代码片段:
<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;margin-top:-150px;margin-left:-175px;border:solid #000 5px;">
</div>

代码分析
符合第一点要求:position:fixed;
符合第二点要求:left:50%;top:50%;
符合第三点要求:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)];


这样就很简单的使div在视野屏幕居中了.

 

下面是个完整的例子:

<!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=gb2312" />
<title>宇程网络</title>

<style>
.black_overlay{  display: none; position:fixed;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);  } 
.white_content { 
display:none;
position:fixed;
top:50%;
left:50%;
margin-left:-475px;
margin-top:-240px;
width:950px;
height:480px;
padding: 16px; 
border: 16px solid orange; 
background-color: white; 
z-index:1002; 
overflow: none;  } 
</style>
</head>


<body>
<a href="javascript:void(0)" class="hei" onClick="document.getElementById('sptfw').style.display='block';document.getElementById('fade').style.display='block'">思品堂服务</a>
<a href="javascript:void(0)" class="hei" onClick="document.getElementById('ndgwfw').style.display='block';document.getElementById('fade').style.display='block'">纳德顾问服务</a>
              <!--弹出层-->
              <div id="sptfw" class="white_content">
                <iframe src="/nade/21.html" width="100%" height="450" marginheight="0" marginwidth="0" frameborder="0"></iframe>
                <a style="height:30px; line-height:30px; text-align:right" href="javascript:void(0)" onClick="document.getElementById('sptfw').style.display='none';document.getElementById('fade').style.display='none'">关闭窗口</a>
            </div>
            <div id="ndgwfw" class="white_content">
                <iframe src="/nade/62.html" width="100%" height="450" marginheight="0" marginwidth="0" frameborder="0"></iframe>
                <a style="height:30px; line-height:30px; text-align:right" href="javascript:void(0)" onClick="document.getElementById('ndgwfw').style.display='none';document.getElementById('fade').style.display='none'">关闭窗口</a>
            </div>
            <div id="fade" class="black_overlay"></div>
            <!--弹出层-->
            </div>
        </div>
        </div>
</div>

</body>
</html>


  • 下一个技术中心: 没有了


  • 技术交流 网站模板上线
    开发微网站平台遇到:模板不存在[./t…
    如何取消网站服务器/主机空间目录脚本…
    网站备案注销 网站备案号怎么注销
    制作网站如何让div层在视野屏幕里相对…
    用js判断网站制作中的固定电话-手机号…
    畅味园
    婚纱摄影公司网站
    婚庆服务公司网站
    婚庆公司网站
    婚庆公司网站
     

    巩义做网站1500元优惠专题 | 网站首页 | 公司简介 | 新闻动态 | 超值套餐 | 经典案例 | 技术支持 | 联系方式 | 虚拟主机
    Copyright @ 2004-2013 巩义宇程网络 www.5ctx.com All Rights Reserved. 豫ICP备09044223号
    联系电话:13949060853 (QQ:383298229)
    宇程网络: 巩义网站制作公司 | 巩义网页设计公司 | 巩义网页制作公司 | 巩义网站设计公司 | 巩义网站建设公司 | 巩义网站开发公司 | 巩义做网站的公司