哈哈...做点小玩意儿

哈哈...做点小玩意儿_第1张图片

在网上无意中看到的图片,觉得不错,就模仿了一个。。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>3D效果图</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{position: relative;margin: 0 auto;padding: 15px;}
        a{color: #00f000;list-style-type: none;text-decoration: none;}
        .p2 .p3 .p6 .p7 a{color: #000000;;}
        a:hover{color: #ff1013;}
        .container{width: 1000px;height: 660px;margin: 0 auto;position: relative;background-color: #009900;}
        .p1{width: 450px;height: 500px;color: #00fa00;position: absolute;left: 500px;top: 140px;-webkit-transform: skew(60deg,-30deg);}
        .p2{width: 140px;height: 95px;position: absolute;left: 350px;top: 130px;-webkit-transform: skew(60deg,-30deg);}
        .p2_1{width: 140px;height: 95px;color: #999999;font-size: 17px;line-height: 13px;position: absolute;background-color: #ffffff;}
        .p2_2{text-align: center;width: 80px;height: 15px;font-size: 10px;border: 1px solid #bababa;position: absolute;z-index: 1;left: 30px;top: 40px;background-color: #f0f0f0;}
        .p2_2 a:hover{background-color: #aecfff;color: #ff1318;}
        .p3{width: 140px;height: 210px;position: absolute;left: 432px;top: 224px;background-color: #cccccc;-webkit-transform: skew(0deg,-30deg);}
        .p3_1{width: 140px;height: 210px;color: #999999;font-size: 18px;position: absolute;background-color: #cccccc;}
        .p3_2{text-align: center;width: 100px;height: 20px;font-size: 14px;border: 1px solid #bababa; position: absolute;z-index: 1;left: 20px;top: 95px;background-color: #f3f3f3;}
        .p4{height: 210px;width: 165px;position: absolute;left: 267px;top: 217px;background-color: #999999;-webkit-transform: skew(0deg,30deg);}
        .p4_1{width: 165px;height: 150px;overflow: hidden;background-color: #ffffff;margin: 30px 0;}
        .p5{width: 180px;height: 95px;background-color: rgba(40,55,42,0.7);position: absolute;left: 170px; top: 431px;-webkit-transform: skew(60deg,-30deg);}
        .p6{width: 93px;height: 55px;background-color: #fff;position: absolute;left: 620px;top: 385px;font-size: 4px;color: #999999;line-height: 11px;-webkit-transform: skew(60deg,-30deg);}
        .p6_2{width: 70px;height: 10px;background-color: #f0f0f0;border: 1px solid #babbba;position: absolute;top: 22px;left: 10px;}
        .p7{width: 93px;height: 130px;position: absolute;left: 667px;top: 440px;color: #999999;background-color: #cccccc;-webkit-transform: skew(0deg,-30deg);}
        .p7_1{font-size: 12px;}
        .p7_2{text-align: center;width: 70px;height: 13px;font-size: 2px;border: 1px solid #bababa;position: absolute;z-index: 1;left: 10px;top: 55px;background-color: #f3f3f3;}
        .p8{height: 130px;width: 95px;position: absolute;left: 572px;top: 439px;background-color: #999999;/*background-color: rgba(44,45,45,0.2);*/-webkit-transform: skew(0deg,30deg);}
        .p8_1{width: 85px;height: 120px;margin: 5px 5px;border-radius: 10px;background: -webkit-linear-gradient(bottom,#ffffff,black);}
            </style>
</head>
<body>
<div class="container">
    <div class="p1">
        <p> <a href="#">Zachstronaut...</a>
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
            isocube isocube isocube isocube isocube
        </p>
    </div>
    <div class="p2">
        <div class="p2_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube
            </p>
        </div>
        <div class="p2_2">
            <a href="#">HTML Buttom</a>
        </div>
    </div>
    <div class="p3">
        <div class="p3_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
            </p>
        </div>
        <div class="p3_2">
            <a href="#">HTML Buttom</a>
        </div>
    </div>
    <div class="p4">
        <div class="p4_1">
            <a href="#"><img src="xxy.jpg" alt="图片"></a>
        </div>
        <div class="p4_2"></div>
    </div>
    <div class="p5"></div>
    <div class="p6">
        <div class="p6_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube
            </p>
        </div>
        <div class="p6_2"><a href="#">HTML Buttom</a></div>
    </div>
    <div class="p7">
        <div class="p7_1">
            <p>
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube isocube isocube
                isocube isocube
            </p>
        </div>
        <div class="p7_2">
            <a href="#">HTML Buttom</a>
        </div>
    </div>
<div class="p8">
    <div class="p8_1"></div>
    <div></div>
</div>
<div class="p9"></div>
</div>
</body>
</html>


你可能感兴趣的:(哈哈...做点小玩意儿)