HTML5 + CSS3-robot cat, html5css3-why? /A> html5css3-
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> robot cat </title>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
. Whole {
Width: 800px;
Margin: 20px auto;
/* Border: 2px solid yellow ;*/
Background-color: white;
Position: relative;
}
. Head {
Margin: 0 auto;
Position: relative;
Width: 500px;
Height: pixel PX;
Background-color: #00b7e7;
Border-radius: 220px;
Border: 1px solid red;
}
. Eye. left_eye,
. Eye. right_eye {
Width: 100px;
Height: 130px;
Background-color: white;
Border: 2px solid black;
Border-radius: 50px;
Position: absolute;
Top: 50px;
Z-index: 3;
}
. Eye. LeyeBall,
. Eye. ReyeBall {
Width: 20px;
Height: 20px;
Background: black;
Border-radius: 10px;
Position: absolute;
Top: 65px;
}
. Eye. left_eye {
Left: 146px;
}
. Eye. right_eye {
Left: 250px;
}
. Eye. LeyeBall {
Right: 10px;
}
. Eye. ReyeBall {
Left: 10px;
}
. Face {
Position: relative;
Z-index: 2;
}
. Face. feature {
Width: 400px;
Height: 320px;
Border-radius: 160px;
Position: absolute;
Top: 100px;
Left: 50px;
Background: white;
}
. Face. nose {
Width: 45px;
Height: 50px;
Border-radius: 23px;
Background-color: # cf3318;
Border: 2px solid black;
Position: absolute;
Top: 165px;
Left: 225px;
Z-index: 3;
}
. Face. Nline {
Width: 3px;
Height: 160px;
Background: black;
Position: absolute;
Top: 218px;
Left: 248px;
Z-index: 3;
}
. Face. mouth {
Width: 280px;
Height: 280px;
Border-bottom: 5px solid black;
Border-radius: 140px;
Position: absolute;
Top: 98px;
Left: 105px;
}
. Face. mustache. MutR_higher {
Width: 80px;
Height: 2px;
Background: black;
Position: absolute;
Top: 220px;
Left: 295px;
Z-index: 2;
}
. Face. mustache. MutR_middle {
Width: 80px;
Height: 2px;
Background: black;
Position: absolute;
Top: 240px;
Left: 295px;
Z-index: 2;
}
. Face. mustache. MutR_lower {
Width: 80px;
Height: 2px;
Background: black;
Position: absolute;
Top: 260px;
Left: 295px;
Z-index: 2;
}
. Face. mustache. MutL_top {
Width: 80px;
Height: 2px;
Background: black;
Position: absolute;
Top: 220px;
Left: 115px;
Z-index: 2;
}
. Face. mustache. MutL_center {
Width: 80px;
Height: 2px;
Background: black;
Position: absolute;
Top: 240px;
Left: 115px;
Z-index: 2;
}
. Face. mustache. MutL_bottom {
Width: 80px;
Height: 2px;
Background: black;
Position: absolute;
Top: 260px;
Left: 115px;
Z-index: 2;
}
. Face. mustache. MutL_bottom,
. Face. mustache. MutR_higher {
Transform: rotate (160deg );
}
. Face. mustache. MutL_top,
. Face. mustache. MutR_lower {
Transform: rotate (200deg );
}
. Neck {
Width: 300px;
Height: 30px;
Background-color: # a31f12;
Border: 2px solid black;
Border-radius: 15px;
Position: relative;
Top: 0px;
Left: 250px;
Z-index: 4;
}
. Neck. bell {
Width: 60px;
Height: 60px;
Overflow: hidden;
Border: 2px solid black;
Border-radius: 60px;
Background-color: # cfcb3c;
Position: absolute;
Top: 5px;
Left: 120px;
}
. Bell. Bline {
Width: 60px;
Height: 2px;
Background-color: # cfcb3c;
Border: 2px solid black;
Border-radius: 3px 3px 0 0;
Position: absolute;
Top: 15px;
}
. Bell. Bcircle {
Width: 20px;
Height: 16px;
Background: black;
Border-radius: 8px;
Position: absolute;
Top: 25px;
Left: 20px;
}
. Bell. Bunderpart {
Width: 3px;
Height: 20px;
Background-color: black;
Position: absolute;
Left: 28px;
Top: 40px;
}
. Body {
Position: relative;
Top:-300px;
Z-index: 1;
}
. Body. tummy {
Width: 280px;
Height: 240px;
Background-color: #00b1e1;
Border: 2px solid black;
Position: absolute;
Top: 267px;
Left: 260px;
}
. Body. bellyband {
Width: 220px;
Height: 220px;
Background-color: white;
Border: 2px solid black;
Border-radius: 110px;
Position: absolute;
Left: 290px;
Top: 267px;
}
. Body. pocket {
Width: 160px;
Height: 160px;
Border-radius: 80px;
Background-color: white;
Border: 2px solid black;
Position: absolute;
Top: 305px;
Left: 320px;
}
. Cover {
Width: 164px;
Height: 80px;
Background-color: white;
Border-bottom: 2px solid black;
/* Border: 5px solid orange ;*/
Position: absolute;
Top: 300px;
Left: 320px;
}
. Left_hand,
. Right_hand {
Height: 100px;
Width: 100px;
Position: absolute;
Top: 272px;
Left: 248px;
}
. Left_hand {
Left:-10px;
}
. Left_hand. Larm {
Width: 70px;
Height: 100px;
Background-color: #00bee8;
Border: 1px solid black;
Position: relative;
Top: 200px;
Left: 535px;
Transform: rotateZ (135deg );
/* Z-index:-1 ;*/
}
. Right_hand {
Left:-10px;
}
. Right_hand. Rarm {
Width: 70px;
Height: 100px;
Background-color: #00bee8;
Border: 1px solid black;
/* Z-index:-1 ;*/
Position: relative;
Top: 200px;
Left: 215px;
Transform: rotateZ (45deg );
}
. Left_hand. Lpalm,
. Right_hand. Rpalm {
Width: 80px;
Height: 80px;
Border-radius: 40px;
Border: 2px solid black;
Background-color: white;
Position: absolute;
}
. Right_hand. Rpalm {
Left: 580px;
Top: 260px;
Z-index: 1;
}
. Left_hand. Lpalm {
Left: 160px;
Top: 260px;
Z-index: 1;
}
. Foot. left_foot,
. Foot. right_foot {
Width: 150px;
Height: 40px;
Background-color: white;
Border: 2px solid black;
Border-radius: 80px 60px 60px 40px;
Position: relative;
}
. Foot. left_foot {
Left: 240px;
Top: 210px;
}
. Foot. right_foot {
Top: 165px;
Left: pixel PX;
}
. Foot. crotch {
Width: 40px;
Height: 20px;
Background-color: white;
Border: 2px solid black;
Border-bottom: none;
Border-radius: 40px 40px 0 0;
Position: relative;
Top: 103px;
Left: 382px;
Z-index: 2
}
</Style>
</Head>
<Body>
<Div class = "wrap">
<Div class = "whole">
<! -- Header -->
<Div class = "head">
<! -- Eye -->
<Div class = "eye">
<! -- Left eye -->
<Div class = "left_eye">
<! -- Left eye -->
<Div class = "LeyeBall"> </div>
</Div>
<! -- Right eye -->
<Div class = "right_eye">
<! -- Right eye -->
<Div class = "ReyeBall"> </div>
</Div>
</Div>
<! -- Face -->
<Div class = "face">
<! -- Face -->
<Div class = "feature"> </div>
<! -- Nose -->
<Div class = "nose"> </div>
<! -- Nose line -->
<Div class = "Nline"> </div>
<! -- Mouth -->
<Div class = "mouth"> </div>
<! -- Beard -->
<Div class = "mustache">
<Div class = "MutL_top"> </div>
<Div class = "MutL_center"> </div>
<Div class = "MutL_bottom"> </div>
<Div class = "MutR_higher"> </div>
<Div class = "MutR_middle"> </div>
<Div class = "MutR_lower"> </div>
</Div>
</Div>
</Div>
<! -- Neck -->
<Div class = "neck">
<! -- Bell -->
<Div class = "bell">
<Div class = "Bline"> </div>
<Div class = "Bcircle"> </div>
<Div class = "Bunderpart"> </div>
</Div>
</Div>
<! -- Body -->
<Div class = "body">
<! -- Belly -->
<Div class = "tummy"> </div>
<! -- Pouch -->
<Div class = "bellyband"> </div>
<! -- Pocket -->
<Div class = "pocket"> </div>
<Div class = "cover"> </div>
</Div>
<! -- Left-hand -->
<Div class = "left_hand">
<! -- Arm -->
<Div class = "Larm"> </div>
<! -- Palm -->
<Div class = "Lpalm"> </div>
</Div>
<! -- Right Hand -->
<Div class = "right_hand">
<! -- Arm -->
<Div class = "Rarm"> </div>
<! -- Palm -->
<Div class = "Rpalm"> </div>
</Div>
<! -- Foot -->
<Div class = "foot">
<! -- Left -->
<Div class = "left_foot"> </div>
<! -- Right -->
<Div class = "right_foot"> </div>
<Div class = "crotch"> </div>
</Div>
</Div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
