最近一直遇到布局的问题,我一直觉得这个东西就是慢慢写,慢慢调整,哪里有什么技巧。可是在遇到几次之后我就觉得,这个是有技巧的。终于被我发现了我笔试为什么挂了,因为我真的太傻了。
呵呵,这是我2天前写的草稿,昨天笔试又忘记了。累。
关于布局首先最先“想到”的是div,但是还有tabled的实现方法,昂。。。。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div{
width: 100%;
height: 500px;
}
.div1{
float: left;
width: 33.3%;
height: 500px;
background-color: blue;
}
.div2{
float: left;
width: 33.4%;
height: 500px;
background-color: green;
}
.div3{
float: right;
width: 33.3%;
height: 500px;
background-color: yellow;
}
.box{
/*overflow: hidden;*/
width: 100%;
height: 500px;
}
.box1{
float: left;
width: 200px;
height: 500px;
background-color: orange;
}
.box2{
height: 500px;
background-color: red;
position: relative;
overflow: hidden;
/*margin-right: 400px;*/
}
.box3{
float: right;
width: 200px;
height: 500px;
background-color: green;
}
.full{
z-index: -1;
width: 100%;
/* //height: 100%;*/
min-height: 200px;
background-color: blue;
}
table{
text-align: center;
width: 100%;
height: 200px;
}
tr:nth-of-type(1)>td:nth-of-type(1){
width: 200px;
background-color: red;
}
tr:nth-of-type(1)>td:nth-of-type(2){
background-color: yellow;
}
tr:nth-of-type(1)>td:nth-of-type(3){
width: 200px;
background-color: orange;
}
tr:nth-of-type(2)>td:nth-of-type(1){
width: 200px;
background-color: yellow;
}
tr:nth-of-type(2)>td:nth-of-type(2){
background-color: green;
}
tr>td{
}
/*.child{
border: 1px solid blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: blue;
background-image: url('./排序.jpg');
}*/
.child{
top: 50%;
left: 50%;
position: absolute;
background-color: blue;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<!-- <div class="box"> -->
<div class="box1"></div>
<div class="box3">
</div>
<div class="box2">
<!-- <img class="child" src="./排序.jpg"> -->
<div class="child">
<img class="child" src="./排序.jpg" width="200px" height="130px">
</div>
</div>
<!-- </div> -->
<div class="full">
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
123333</br>
</div>
<table cellspacing="0">
<tr><td>yes</td><td>ok</td><td>no</td></tr>
<tr><td>1</td><td colspan="2">2</td></tr>
</table>
</body>
</html>
各种,现在都用的到的布局吧。