网页CSS代码提交

Author: code1303009

guide.css

@@ -29,11 +29,21 @@ a:hover{
     color: #c81623;
 }
 
+#wrap{
+    background: url("./img/home.webp") no-repeat;
+    background-position: center center;
+    background-attachment: fixed;
+    background-size: cover;
+    /* font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue"; */
+}
 
 .header{
+    line-height: 50px;
+}
+
+.header nav{
     height: 50px;
     background-color: #ccc;
-    line-height: 50px;
 }
 
 nav ul li{
@@ -51,4 +61,253 @@ nav ul li{
     color: #fff;
     font-weight: 700;
     letter-spacing: 2px;
+}
+
+.banner{
+    margin: auto;
+    height: 600px;
+    background: rgba(0, 0, 0, 0.4);
+}
+
+.banner .inner{
+    position: relative;
+    margin: 0 auto;
+    max-width: 300px;
+    top: 160px;
+    text-align: center;
+    color: #fff;
+}
+
+.line{
+    width: 60%;
+    height: 2px;
+    margin: 0 auto;
+    background-color: #fff;
+    margin-bottom: 10px;
+}
+
+.inner h1{
+    margin-bottom: 10px;
+}
+
+.banner .inner p{
+    line-height: 30px;
+    font-size: 18px;
+    letter-spacing: 1px;
+}
+
+.banner .inner button{
+    margin-top: 20px;
+    padding: 10px 20px;
+    border-radius: 5px;
+    background-color: rgb(31, 194, 139);
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    outline: none;
+}
+
+.banner .inner .more{
+    margin-top: 140px;
+}
+
+.content{
+    opacity: .9;
+}
+
+.part_one{
+    background-color: rgb(67,178,165,1);
+    text-align: center;
+    color: #fff;
+    padding-top: 65px;
+    opacity: 0.95;
+    width: 100%;
+}
+
+.wraper{
+    margin: 0 auto;
+    max-width: 1080px;
+}
+.wraper h2{
+    padding: 15px 0;
+    font-size: 27px;
+}
+.wraper .line{
+    margin: 15px auto;
+    background-color: darkgray;
+    width: 40%;
+}
+
+.wraper p{
+    padding: 15px 0;
+    font-size: 18px;
+    letter-spacing: 1px;
+}
+
+.icon{
+    margin: 30px auto;
+    padding-bottom: 50px;
+    margin-bottom: 0px;
+}
+.icon .item{
+    border: 2px solid green;
+    display: inline-block;
+    margin-right: 50px;
+    width: 80px;
+    height: 80px;
+    transform: rotate(45deg);
+}
+
+.icon .item img{
+    width: 100%;
+    height: 100%;
+    /* transform: rotate(-45deg); */
+}
+
+.part_two{
+    background: rgb(33, 41, 50);
+    opacity: 0.95;
+}
+
+.part_two:nth-child(odd){
+    background: rgba(33, 41, 50,0.9);
+}
+
+.first>div{
+    float: left;
+}
+ 
+.clear_fix:after{
+    content: '';
+    display: block;
+    clear: both;
+}
+
+.first_left{
+    width: 45%;
+}
+
+.first_left img{
+    width: 100%;
+}
+
+.first_text{
+    position: relative;
+    width: 55%;
+    top: 30px;
+    left: 30px;
+    color: white;
+}
+.first_text>*{
+    max-width: 90%;
+    letter-spacing: 1px;
+}
+
+.first_text h2{
+    font-size: 24px;
+    margin-bottom: 12px;
+}
+
+.first_text .first_title{
+    margin-bottom: 15px;
+    font-size: 20px;
+}
+
+.first_text p{
+    font-size: 18px;
+}
+
+
+.part_three{
+    background: #3f3965;
+    opacity: 0.9;
+    color: #fff;
+}
+
+.three_wrap{
+    margin: 0 auto;
+    padding-top: 65px;
+    width: 80%;
+}
+
+.three_wrap .three_text{
+    width: 60%;
+}
+
+.three_text{
+    margin: 0 auto;
+}
+
+.three_text h2{
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.three_text .line{
+    background: #1a0973;
+    width: 55%;
+    margin-bottom: 20px;
+}
+
+.card_group{
+    margin: 0 auto;
+}
+
+.card{
+    width: 50%;
+    min-height: 300px;
+    padding: 50px;
+    float: left;
+    max-width: 461px;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    margin-top: 20px;
+}
+
+.card h2{
+    text-align: center;
+}
+
+.card:nth-child(1){
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.card:nth-child(2){
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.card:nth-child(3){
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.card:nth-child(4){
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.card:nth-child(5){
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+.card:nth-child(6){
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.footer{
+    background: #333;
+    color: #fff;
+    min-height: 200px;
+    text-align: center;
+}
+
+.share_group{
+    display: block;
+    margin: 0 auto;
+    width: 1080px;
+    padding: 45px;
+}
+
+.share_group li{
+    display: inline-block;
+    padding: 10px;
 }