Home

Welcome to the html.css wiki!

*{ padding: 0px; margin: 0px; }

ul{ list-style: none; }

.header{ width: 100%; height: 60px; background-color: rgb(169,250,176); }

.header>div{ width: 72%; height: 100%; margin: 0px auto;

display: flex;
justify-content: space-between;
align-items: center;

}

.header img:nth-of-type(2){ display: none; }

.header>div>ul{ width: 65%; height: 100%;

display: flex;
align-items: center;

}

.header>div>ul>li{ width: 20%; height: 100%;

display: flex;
justify-content: center;
align-items: center;

color: rgb(131,155,215);

}

.header>div>ul>li:hover{ color: white; background-color: rgb(93,110,214); font-size: 18px; }

.tool{ width: 72%; height: 100px; margin: 0px auto;

display: flex;
justify-content: space-between;
align-items: center;

}

.tool>img{ width: 100px; height: 100px; border-radius: 50%; box-shadow: 3px 0px 5px 5px rgb(119,119,119); }

@keyframes ani{ 100%{ transform: rotate(360deg); } }

.tool>img:hover{ animation: ani 2s linear 0s infinite; }

.tool>input{ width: 120px; height: 40px; border:3px solid rgb(74,182,214); border-radius: 20px; box-sizing: border-box; }

.tool>input:hover{ width: 220px; background-image: url(../images/search.png); background-repeat: no-repeat; background-position: right;

transition: width 600ms 0s;

}

.tab{ width: 72%; height: 80px; margin: 0px auto; }

.tab>div{ width: 240px; height: 100%; background-color: rgb(170,255,255); border-radius: 0px 40px 40px 0px;

display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: rgb(74,182,214);

}

.content{ width: 72%; margin: 0px auto;

display: flex;
align-items: center;
flex-wrap: wrap;

}

.content>dl{ width: 25%; height: 350px;

border:4px solid #F9F8E2;
box-sizing: border-box;

}

.content>dl>dt{ width: 100%; height: 75%;

display: flex;
align-items: center;
justify-content: center;

}

.content>dl>dt>img{ width: 90%; height: 90%; }

.content>dl>dt>img:hover{ transform: scale(1.3); transition: all 600ms 0s; }

.content>dl>dd{ width: 100%; height: 7%; }

.content>dl>dd:nth-of-type(3){ display: flex; align-items: center; justify-content: space-between; }

.content>dl>dd:nth-of-type(3)>input{ width: 70px; height: 34px; background-color: #4AB6D6; color: #fff; border-radius: 10px; border:0px; }