DIV教程之css教程:DIV垂直居中的举措

只看该作者 · 发表于 2015-1-16 00:07:33

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

更好的控制页面布局。不用多说。
　　经由明天一翻改善，终究找出懂得决DIV垂直居中的举措。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>CSS结构技能：未知高度div垂直居中的成绩</title>
<styletype="text/css">
html,body
{
height:100%;
padding:0;
margin:0;
}
body
{
min-height:200px;
text-align:center;
min-width:402px
}
.FirstDIV
{
margin-top:-100px;/*SecondDIV高度的一半*/
float:left;
width:100%;
height:50%;
}
.SecondDIV
{
clear:both;
border:silver1pxsolid;
background:#666;
margin-left:auto;
overflow:auto;
width:400px;
margin-right:auto;
height:200px;
text-align:left
}
</style>
</head>
<body>
<divclass="FirstDIV"></div>
<divclass="SecondDIV">
<p>看看，这不就居中了。呵呵。并且没有成绩哦。www.Webjx.com</p>
<p>body{background-color:#FFF5F0}<br>
div{position:absolute;top:50%;left:50%;margin:-100px00-200px;
width:400px;height:200px;border:1px#CCCC00solid;font-family:Arial,
Helvetica,sans-serif;color:#666666}</p>
</div>
</body>
</html>
演示代码：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>CSS结构技能：未知高度div垂直居中的成绩</title><styletype="text/css">html,body{height:100%;padding:0;margin:0;}body{min-height:200px;text-align:center;min-width:402px}.FirstDIV{margin-top:-100px;/*SecondDIV高度的一半*/float:left;width:100%;height:50%;}.SecondDIV{clear:both;border:silver1pxsolid;background:#666;margin-left:auto;overflow:auto;width:400px;margin-right:auto;height:200px;text-align:left}</style></head><body><divclass="FirstDIV"></div><divclass="SecondDIV"><p>看看，这不就居中了。呵呵。并且没有成绩哦。www.Webjx.com</p><p>body{background-color:#FFF5F0}<br>div{position:absolute;top:50%;left:50%;margin:-100px00-200px;width:400px;height:200px;border:1px#CCCC00solid;font-family:Arial,Helvetica,sans-serif;color:#666666}</p></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

只看该作者 · 发表于 2015-1-18 05:22:25

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-2-1 13:39:03

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-7 08:04:50

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-2-21 06:17:21

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-3-6 19:58:40

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-3-13 09:07:21

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-3-20 18:26:00

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之css教程:DIV垂直居中的举措

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子