蒙德里安三原色詹尼佛

来源：互联网发布：java token 登陆验证编辑：程序博客网时间：2024/04/28 07:03

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;
}

0 0