蒙德里安三原色詹尼佛

html页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>蒙德里安</title>
        <link rel="stylesheet" href=css/mondrian.css>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/mondrian.js"></script>
    </head>
    <body id="mondrian">
        <div id="container">
            <div id="title">选择一种颜色然后涂上画布</div>
            <div id="sapcer_container">
                <div id="workspace">
                    <div id="color_palette">
                        <div class="color" id="red"></div>
                        <div class="color" id="yellow"></div>
                        <div class="color" id="blue"></div>
                        <div class="color" id="white"></div>
                    </div>
                    <div id="painting">
                        <div id="row_1">
                            <div class="row" id="row_1_box1"></div>
                            <div class="row" id="row_1_box2"></div>
                            <div class="row" id="row_1_box3"></div>
                            <div class="row" id="row_1_box4"></div>
                        </div>
                        <div id="row_2">
                            <div class="row" id="row_2_box1"></div>
                            <div class="row" id="row_2_box2"></div>
                            <div class="row" id="row_2_box3"></div>
                            <div class="row" id="row_2_box4"></div>
                        </div>
                        <div id="row_3">
                            <div class="row" id="row_3_box1"></div>
                            <div class="row" id="row_3_box2"></div>
                            <div class="row" id="row_3_box3"></div>
                            <div class="row" id="row_3_box4"></div>
                        </div>
                        <div id="row_4">
                            <div class="row" id="row_4_box1"></div>
                            <div class="row" id="row_4_box2"></div>
                            <div class="row" id="row_4_box3"></div>
                            <div class="row" id="row_4_box4"></div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </body>
</html>

CSS代码:body {
    height: 100%;
    background-color: #aaa;
}
#container
{
    min-height: 100%;
    position: relative;
}
#title
{
    text-align: center;
    color: #333;
    padding: 30px 0;
    font-family: "Century Gothic";
    font-size: 38px;
    text-shadow: -1px -1px 0 rgba(255,255,255,0.5),1px 1px 0 rgba(0,0,0,0.5);
}
#sapcer_container
{
    padding-bottom: 60px;
}
#workspace
{
    background: #ffffe0;
    width:850px;
    height:480px;
    margin: 0 auto;
    padding: 40px 40px;
    box-shadow: 0 0 8px black;
}
#painting
{
    float: left;
    height: 500px;
    width: 700px;
    border: 1px solid #333;
}
#color_palette
{
    float: left;
}
.color
{
    height: 50px;
    width: 50px;
    border:1px solid #aaa;
    margin-bottom: 20px;
    cursor: pointer;
}
#red
{
    background-color:#cc0000;
}
#yellow
{
    background-color: #ffec00;
}
#blue
{
    background-color: #0000cc;
}
#white
{
    background-color: white;
}
#row_1
{
    height: 100px;
    border-bottom: 10px solid black;
}
#row_2
{
    height: 170px;
    border-bottom: 10px solid black;
}
#row_3
{
    height: 80px;
    border-bottom: 10px solid black;
}
#row_4
{
    height: 150px;
}
#row_1_box1
{
    float: left;
    width: 130px;
    height: 100px;
    border-right: 10px solid black;
    background-color: white;
}
#row_1_box2
{
    float: left;
    width: 300px;
    height: 100px;
    border-right: 10px solid black;
    background-color: white;
}
#row_1_box3
{
    float: left;
    width: 90px;
    height: 100px;
    border-right: 10px solid black;
    background-color: white;
}#row_1_box4
{
    float: right;
    width: 150px;
    height: 100px;
    background-color: white;
}
#row_2_box1
{
    float: left;
    width: 130px;
    height: 170px;
    border-right: 10px solid black;
    background-color: white;
}
#row_2_box2
{
    float: left;
    width: 300px;
    height: 170px;
    border-right: 10px solid black;
    background-color: white;
}
#row_2_box3
{
    float: left;
    width: 90px;
    height: 170px;
    border-right: 10px solid black;
    background-color: white;
}#row_2_box4
{
    float: right;
    width: 150px;
    height: 170px;
    background-color: white;
}
#row_3_box1
{
    float: left;
    width: 130px;
    height: 80px;
    border-right: 10px solid black;
    background-color: white;
}
#row_3_box2
{
    float: left;
    width: 300px;
    height: 80px;
    border-right: 10px solid black;
    background-color: white;
}
#row_3_box3
{
    float: left;
    width: 90px;
    height: 80px;
    border-right: 10px solid black;
    background-color: white;
}#row_3_box4
{
    float: right;
    width: 150px;
    height: 80px;
    background-color: white;
}
#row_4_box1
{
    float: left;
    width: 130px;
    height: 120px;
    border-right: 10px solid black;
    background-color: white;
}
#row_4_box2
{
    float: left;
    width: 300px;
    height: 120px;
    border-right: 10px solid black;
    background-color: white;
}
#row_4_box3
{
    float: left;
    width: 90px;
    height: 120px;
    border-right: 10px solid black;
    background-color: white;
}#row_4_box4
{
    float: right;
    width: 150px;
    height: 120px;
    background-color: white;
}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值