创建博文尚学网页

最新推荐文章于 2022-11-18 19:26:06 发布

VIP文章 Sayers-denb

最新推荐文章于 2022-11-18 19:26:06 发布

阅读量159

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_70990872/article/details/126085082

版权

文章目录

一、源代码
- 1.1html
- 1.2css
二、网页

一、源代码

1.1html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{
     position: relative;}
        #banner .banner_list{
     width: 100%;height: 469px;position: relative;}
        #banner .banner_list li{
     width: 100%;height: 100%;background: center 0 no-repeat;position: absolute;left: 0;top: 0;opacity: 0;
        z-index: 1;}
        #banner .banner_list li.active{
     opacity: 1;z-index: 10;}
        #banner .banner_list a{
     display: block;width: 100%;height: 100%;}
        #banner .banner_btn{
     width: 100%;position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
        #banner .banner_btn li{
     display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;
        box-sizing: border-box;margin: 0 6px;cursor: pointer;}
        #banner .banner_btn li.active{
     background: white;}

        
        #service{
     overflow: hidden;min-height: 407px;}   
        #service .service_list{
     text-align: center;margin-top: 34px;}
        #service .service_list li{
     float: left;width: 250px;margin: 0 10px;}
        #service .service_list div{
     width: 102px;height: 102px;margin:0 auto;}
        #service .service_list li:nth-of-type(1) div{
     background-image:url(./images/web1.png);}
        #service .service_list li:nth-of-type(2) div{
     background-image:url(./images/mail1.png);}
        #service .service_list li:nth-of-type(3) div{
     background-image:url(./images/e-bussiness1.png);}
        #service .service_list li:nth-of-type(4) div{
     background-image:url(./images/graphic1.png);}
        #service .service_list h3{
     font-size: 18px;color: #434343;line-height: 36px;margin-top: 25px;}
        #service .service_list p{
     font-size: 14px;color: #6d6d6d;line-height: 22px;} 

        #case{
     background: #f8f8f8;}
        #case .container{
     min-height: 460px;overflow: hidden;}
        #case .area_title{
     margin-top: 55px;}
        #case .area_title h2{
     color: #66C5B4;}
        #case .case_list{
     margin-top: 28px;}
        #case .case_list li{