效果图
CSS
<style>
* {
margin: 0;
padding: 0;
}
header {
width: 1200px;
height: 300px;
margin: 0 auto;
display: flex;
}
header>article:nth-of-type(1) {
width: 700px;
}
header>article:nth-of-type(2) {
width: 500px;
}
header>article>div {
height: 200px;
border: 1px solid;
}
header h1 {
text-align: center;
margin: 20px 0;
}
header h1:nth-of-type(1) {
color: #f00;
}
header h1:nth-of-type(2) {
color: #00f;
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
ul>li {
margin: 10px 0 0 10px;
width: 50px;
height: 50px;
border: 1px solid gainsboro;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
font-weight: bold;
}
.btn {
display: block;
width: 140px;
height: 50px;
font-style: 20px;
margin: 20px auto 0;
border: 1px solid gainsboro;
background: #fff;
border-radius: 10px;
color: #000;
font-weight: bold;
cursor: pointer;
outline: none;
}
.btn:hover {
color: #f00;
}
.foot {
width: 700px;
margin: 20px auto 0;
}
.foott {
margin-bottom: 40px;
}
.foott1,
.foott2 {
height: 60px;
display: flex;
margin: 30px 0;
align-items: center;
}
.foott1_1,
.foott2_1 {
margin-right: 100px;
}
.foott1_2>li,
.foott2_2>li {
border: 1px solid #f00;
color: #f00;
}
.foott1_3,
.foott2_3 {
margin: 10px 0 0 10px;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
cursor: pointer;
font-weight: bold;
color: #00f;
}
.footb {
font-size: 30px;
font-weight: 500;
}
.red_s {
background: #f00;
color: #fff;
}
.blue_s {
background: #00f;
color: #fff;
}
</sty