div+css居中

最新推荐文章于 2022-04-23 16:18:37 发布

yangactive

最新推荐文章于 2022-04-23 16:18:37 发布

阅读量96

点赞数

分类专栏：网页布局文章标签： css div

网页布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一种使用div和css实现网页元素居中的方法。通过设置特定的样式属性，如margin，来确保登录窗口和logo等元素能够在页面上水平居中显示。此布局技巧适用于前端开发，特别是对于希望提升网页美观性和用户体验的设计者。

摘要由CSDN通过智能技术生成



<!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>div+css居中</title>
<style type="text/css">
<!--


.login_window {
width: 960px;
height: 315px;
background: #D0DEE9;
margin: 0 auto;
margin-top: 5px;
}

.logo {
width: 960px;
height: 80px;
margin: 0 auto;
}
.login_right {
height: 260px;
width: 480px;
float: right;
margin-top: 30px;
background:#009933
}
.login_left {
height: 260px;
width: 480px;
float: left;
margin-top: 30px;
background:#CC0033
}
-->
</style>
</head>

<body>
<div class="logo" >
<div class="login_left">
	此处左边
	</div>
	<div class="login_right">
	此处右边
	</div>

</div>
<div class="login_window" >

	<div class="login_left">
	此处左边
	</div>
	<div class="login_right">
	此处右边
	</div>

</div>
</body>
</html>