我正在尝试编写我之前在 photoshop 中制作的设计，但我觉得我没有以“正确”的方式做事，应该有另一种更好的方式来实现我想要的。
为了旋转 div 并保持它与 100% 宽度 a href 属性的链接，我使用了转换。但是这样一来，get 里面的所有东西也都变成了 45 度。有没有更好的方法来实现它？因为我想稍后添加 Jquery，而且不必旋转我在这些 div 中添加的每一个小东西会很好。
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
我真的希望网站能够响应，但由于某种原因，高度不想与其他百分比一起加入。例如，我希望 div#midden 为高度的 24%，但保持正方形。我无法弄清楚如何做到这一点。 http://jsfiddle.net/AeFcY/1/
最后，定位。我希望整个事情都在页面的中心，但我想出的唯一方法是使用边距：0 自动和绝对定位。但是，这给将 div 彼此相邻定位带来了一项艰巨的工作......现在我已经通过将 'right' 属性从 855px 更改为 -855px 来定位它们。
HTML代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>imandragrafie</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="links" class="zijden draai"><a href="#"></a></div>
<div id="midden" class="draai"><a href="#"></a></div>
<div id="rechts" class="zijden draai"><a href="#"></a></div>
</div>
</body>
</html>
CSS：
html, body, div#wrapper{
background-color:#1b1b1b;
width:100%;
height:100%;
margin:0;
padding:0;
}
div.draai{
display:inline;
padding:0;
overflow:hidden;
position:absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-size: cover;
}
div#midden{
width:333px;
height:333px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
background-image:url('../images/home_midden.png');
}
div.zijden{
width:241px;
height:241px;
top: 0;
bottom: 0;
margin:auto;
background-color:blue;
}
div#links{
background-image:url('../images/home_links.png');
left: 0;
right: 855px;
}
div#rechts{
background-image:url('../images/home_rechts.png');
left: 0;
right: -855px;
}
a{
width:100%;
height:100%;
padding:0;
margin:0;
position:absolute;
right:0;
}
我想出了如何做到这一点！
我使用过这些来源：http : //www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/如何为所有浏览器垂直居中一个 div？
我不得不应用多个包装器，并通过使用 padding-bottom 我设法获得了响应方块。JSfiddle：http : //jsfiddle.net/ZC9et/
HTML：
<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->
<div class="box side left"><!-- Open .box -->
<a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
</a><!-- Close .boxInner -->
</div><!-- Close .box -->
<div class="box"><!-- Open .box -->
<a href="#" class="boxInner innerMiddle"><!-- Open .boxInner -->
</a><!-- Close .boxInner -->
</div><!-- Close .box -->
<div class="box side right"><!-- Open .box -->
<a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
</a><!-- Close .boxInner -->
</div><!-- Close .box -->
</div></div></div><!-- Close .wrap -->
CSS：
body {
margin: 0;
padding: 0;
background-color:#1b1b1b;
}
.outer{
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle{
display: table-cell;
vertical-align: middle;
}
.wrap {
margin: 10px;
margin-left: auto;
margin-right: auto;
height:100%;
overflow: hidden;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-webkit-box;
}
.box {
float: left;
position: relative;
width: 24.45%;
padding-bottom: 24.45%;
margin:auto;
top:0;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.side {
width: 17.57%;
padding-bottom: 17.57%;
}
.left{
left:-8%;
}
.right{
left:8%;
}
.boxInner {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
background-size: cover;
background-repeat:no-repeat;
}
.innerLeft{
background-color:blue;
}
.innerMiddle{
background-color:blue;
}
.innerRight{
background-color:blue;
}
| 归档时间： |
|
| 查看次数： |
2450 次 |
| 最近记录： |