小兔鲜css

* {
padding: 0;
margin: 0;
}

a {
text-decoration: none;
font-size: 12px;
}

h3 {
font-weight: normal;
}

ul {
list-style: none;
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.top {
width: 100%;
height: 30px;
background-color: #333333;
}

.grapbg {
width: 100%;
background-color: #f5f5f5;
}

.continer {
width: 70%;
margin: 0 auto;
border: 0px solid red;
}

.bottom {
width: 100%;
background-color: #333333;
}

.nav {
width: 70%;
margin: 0 auto;
text-align: right;
line-height: 30px;
}

.nav span {
padding: 10px;
color: #666656;
}

.nav ul li {
display: inline;
}

.nav a {
color: #dcdcdc;
}

.nav ul li img {
width: 0.7%;
margin-right: 4px;

}

.continer.navbar {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
width: 20%;
height: 70px;
}

.logo img {
width: 100%;
height: 100%;
}

.list {
width: 53%;
height: 70px;
}

.list ul li a {
color: #333333;
}

.list ul {
line-height: 70px;
display: flex;
justify-content: space-between;
}

.list a:hover {
color: #27bb9a;
}

.search {
width: 20%;
height: 30px;
position: relative;
}

.search input {
width: 120px;
height: 25px;
border: none;
border-bottom: 1px solid darkgrey;
font-size: 10px;
text-indent: 2em;
outline-style: none;
}

.search img:nth-child(2) {
width: 10%;
position: absolute;
top: 4px;
left: 0;
}

.search img:nth-child(3) {
width: 11%;
position: absolute;
top: 5px;
right: 35px;
}

.search .amount {
width: 17px;
height: 12px;
border-radius: 45%;
background-color: #e26237;
position: absolute;
top: 2px;
right: 28px;
}

.search .amount font {
font-size: 12px;
color: white;
position: absolute;
top: -2px;
right: 5px;
}

.grapbg.one .continer {
height: 393px;
background-color: #333333;
position: relative;
}

.one .continer img {
width: 100%;
height: 100%;
}

.left {
width: 25%;
height: 393px;
background-color: rgba(61, 61, 61, 0.8);
position: absolute;
top: 0;
left: 0;
}

.left ul li {
padding: 10px 0px 9px 27px;
position: relative;
}

.left ul li a {
color: white;
}

.left ul li span {
font-size: 14px;
}

.left ul li font {
margin-left: 16px;
}

.left ul li i {
position: absolute;
right: 10px;
top: 14px;
}

.left ul li:hover {
background-color: #27bb9a;
}

.title {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
position: relative;
}

h3 {
display: inline-block;
line-height: 70px;
}

.title a {
line-height: 70px;
color: #999999;
}

.title font {
font-size: 12px;
color: #999999;
position: absolute;
top: 29px;
left: 112px;
}

.center {
width: 100%;
display: flex;
justify-content: space-between;
}

.continer.frist .imgs {
width: 24.5%;
height: 300px;
background-color: aliceblue;
}

.imgs img {
width: 100%;
height: 76%;
}

.center h5,
h6 {
text-align: center;
font-weight: normal;
line-height: 30px;
}

.center h6 {
color: #9a2e1f;
font-weight: bold;
}

.lost {
width: 35%;
height: 30px;
position: absolute;
top: 20px;
right: 100px;
}

.lost ul li {
font-size: 12px;
line-height: 30px;
display: inline;
margin: 4px;
padding: 3px;
}

.lost ul li:nth-child(1) {
background-color: #27ba9b;
color: white;
}

.center {
width: 100%;
}

.wine {
width: 20%;
height: 544px;
float: left;
}

.wine img {
width: 100%;
height: 100%;
}

.text {
width: 78%;
height: 576px;
float: right;
background-color: white;
}

.text ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.text ul li {
width: 23%;
height: 238px;
padding-top: 24px;
}

.text ul li img {
width: 100%;
height: 62%;
}

.center p {
font-size: 12px;
}

.center h4 {
font-weight: normal;
color: #9a2e1f;
margin-top: 5px;
}

.loss ul {
display: flex;
justify-content: space-between;
}

.loss ul li {
width: 33%;
height: 253px;
background-color: white;
}

.grapbg.two {
height: 350px;
padding: 10px 0px;
}

.loss img {
width: 100%;
height: 82%;
}

.loss ul li {
position: relative;
}

.loss ul li .Like,
.loss ul li .View,
.loss ul li .voice {
position: absolute;
top: 220px;
}

.loss ul li .Like {
left: 10px;
}

.loss ul li .View {
left: 70px;
}

.loss ul li .voice {
right: 10px;
}

.Like i:after {
content: "1220";
font-size: 12px;
}

.View i:after {
content: "1800";
font-size: 12px;
}

.voice i:after {
content: "246";
font-size: 12px;
}

.continer.contact ul {
display: flex;
justify-content: space-around;
align-items: center;
height: 250px;
}

.continer.contact ul li {
width: 21%;
height: 180px;
position: relative;
}

.continer.contact h4 {
text-align: center;
font-weight: normal;
color: #999999;
margin-bottom: 15px;
}

.continer.contact .arrange {
width: 40%;
height: 80px;
border: 1px solid #A9A9A9;
float: left;
margin: 8px;
}
.arrange svg{
width: 60px;
height: 60px;
display: block;
margin: auto;
}
.arrange h5 {
text-align: center;
font-weight: normal;
color: #999999;
}

.code {
width: 82px;
height: 82px;
border: 1px solid #eeeeee;
float: left;
}

.code img {
width: 99%;
height: 99%;
}

.scan {
width: 82px;
height: 82px;
float: right;
}

.scan p {
font-size: 14px;
color: #999999;
}

.down {
width: 83px;
height: 28px;
background-color: #26b99a;
line-height: 28px;
}

.down p {
font-size: 14px;
color: white;
text-align: center;
}

.contact ul li:nth-child(4) h4 {
color: #999999;
text-align: center;
}

.grapbg.twelve {
height: 250px;
background-color: #333333;
padding-top: 30px;
}

.grapbg.twelve .continer {
height: 125px;
display: flex;
justify-content: space-around;
}

.pro {
width: 20%;
height: 100px;
padding: 20px;
display: flex;
align-items: center;
}

.pro svg {
width: 40px;
height: 40px;
margin: 5px;
}

.pro h3 {
font-weight: normal;
color: white;
}

.ispn {
width: 100%;
height: 125px;
}

.grapbg.twelve .ispn h5 {
text-align: center;
color: #999999;
font-weight: normal;
margin-top: 20px;
}

小兔鲜css

原文：https://www.cnblogs.com/qq1561942060/p/15268118.html