css 布局

最新推荐文章于 2024-09-04 13:37:44 发布

zwhfyy

最新推荐文章于 2024-09-04 13:37:44 发布

阅读量165

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zwhfyy/article/details/107093861

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
<style type="text/css">
.header {
  z-index:-1;
  border : 1px;
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100px;
  background-color:#33ff66;
}
.menu {
  border : 1px;
  position:absolute;
  left:0px;
  top:100px;
  width:300px;
  bottom: 0px;
  background-color:#ff0066;
}
.content {
  z-index:-1;
  animation: myfirst 5s;
  -webkit-animation: myfirst 5s; 
  border : 1px;
  position:absolute;
  left:300px;
  top:100px;
  right:0px;
  bottom: 0px;
  background-color:#ffff00;
}
.content-tab {
  z-index:-1;
  border : 1px;
  position:absolute;
  left:0px;
  top:0px;
  height:30px;
  right:0px;
  background-color:#993300;
}
.absolute-ad {
  border : 1px;
  position:absolute;
  left:400px;
  top:500px;
  height:300px;
  width:300px;
  background-color:#fff;
}
.float-right {
  border : 1px;
  z-index:1000;
  float: right;
  height:300px;
  width:300px;
  background-color:#fff;
}

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: 
</style>
 </head>

 <body>
  <div class="header">
	header
  </div>
  <div class="menu">
	menu
  </div>
  <div class="content">
	<div class="content-tab">
		tab
	</div>
	content
  </div>
  <div class="absolute-ad">
	float-ad
  </div>
  <div class="float-right">
	float-right
  </div>
 </body>
</html>

div水平垂直居中

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    background-color:yellow;
    border:1px solid black;
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

</body>
</html>