/*通用样式*/ /* *{ margin: 0;padding: 0 } body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' } .wp{ width: 960px;margin: 0 auto; } .z{ float: left;} .y{ float: right;} .cl{ clear: both; } .mr_0{ margin: 0 } img{ border: none } */ .grid-container { display: grid; grid-template-columns: 50px 300px 1fr 50px ; /* 第一列宽度为第二列的一半 */ grid-gap: 10px; /* 行列间距 */ border: 1px solid rgba(63, 175, 169, 1.50); background: #bdc3c7; /* fallback for old browsers */ /* background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7); background: linear-gradient(to bottom, #2c3e50, #bdc3c7); */ /* background: -webkit-linear-gradient(to bottom, #29EAC4, #4284DB); background: linear-gradient(to bottom, #29EAC4, #4284DB); */ } .left-container { grid-column: 2; /* 第一列 */ } .right-container { grid-column: 3; /* 第一列 */ } .firster { bottom: 50px; top: 50px; height: auto; width: auto; margin: 0% auto 0; background-color: white; } .container { bottom: 30px; top: 30px; height: auto; margin: 0% auto 0; background-color: #f0f0f0; } .left { float:left; width: auto; height: 100%; padding:50px 10px 100px 150px; } .videocontainer { background: white; margin-top: 10px; max-width: 100%; width: auto; border-radius: 5px; } .imgcontainer { background: white; width: 75%; padding: auto; margin: auto; align-items: center; border: 1px solid rgba(63, 175, 169, 1.50); border-radius: 5px; } .columncentercontainer { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; } .columnleftcontainer { display: flex; flex-direction: column; align-items: start; margin: 0 auto; } .columnrightcontainer { display: block; flex-direction: column; align-items: end; margin: 0 auto; } .rowcentercontainer { display: flex; flex-direction: row; justify-content: center; align-items: center; } .rowleftcontainer { display: block; align-items: start; margin: 0 0 0 50px; } .dropdown-content { display: none; position: absolute; /* 默认相对于进行绝对定位 */ background-color: #f9f9f9; min-width: 100px; } .dropdown-content a { color: black; display: block; /* 因为标签不是块元素，min-width:100px不会生效 */ } .dropdown-content a:hover { background-color: #f1f1f1; color: deepskyblue; } .dropdown:hover .dropdown-content { display: block; } /* Style the tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 13px; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ div.tab button.active { background-color: #648cad; -webkit-text-stroke-color: #648cad; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .topelement { position: relative; top: 0; left: 0; height: 60px; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; /* background: #44A08D; background: -webkit-linear-gradient(to bottom, #093637, #44A08D); background: linear-gradient(to bottom, #093637, #44A08D); */ } .bottomelement { position: relative; bottom: 0; left: 0; height: 50px; width: 100%; text-align: center; } /* 导航条 */ .topnav { overflow: hidden; background-color: #333; } /* 导航条链接 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 链接颜色修改 */ .topnav a:hover { background-color: #ddd; color: black; } /* span样式*/ .bigspan { color: #0b4056; } /*边框样式*/ .box1 { margin: auto; width: 880px; height: 800px; border: 1px solid #bdc3c7; border-radius: 10px; /* background-color: rgba(200, 203, 204, 0.5); */ /* background: #abbaab; background: -webkit-linear-gradient(to right, #ffffff, #abbaab); background: linear-gradient(to right, #ffffff, #abbaab); */ /* background: #2C3E50; background: -webkit-linear-gradient(to right, hsla(188, 39%, 49%, 0.5), rgba(43, 61, 79, 0.5)); background: linear-gradient(to right, hsla(188, 39%, 49%, 0.5), hsla(210, 29%, 24%, 0.5)); */ background: -webkit-linear-gradient(to bottom, #29EAC4, #4284DB); background: linear-gradient(to bottom, #29EAC4, #4284DB); } .containerbox { /* background: #3fada8; background: linear-gradient(to right, rgba(63, 175, 169, 0.10), hsla(0, 0%, 50%, 0.1)); background: #4284DB; */ background: -webkit-linear-gradient(to bottom, #29EAC4, #4284DB); background: linear-gradient(to bottom, #29EAC4, #4284DB); } .button1 { background-color: rgb(0, 128, 192); /* Green */ border: 1px solid white; width: 180px; height: 50px; border-radius: 10px; color: white; padding: 8px 35px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; cursor: pointer; /*float: left;*/ margin: 10px 10px; } .button1:hover { /* box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); */ background-color: rgb(0, 128, 255); } .slider { width: auto; height: auto; position: relative; margin: auto; } .slider img { width: auto; height: auto; position: absolute; opacity: 0; transition: opacity 1s; } .slider img.active { opacity: 1; } /* 默认样式 */ * { margin: 0; padding: 0; a { text-decoration: none; } li { list-style: none; } } /* 轮播图盒子 */ .box { width: 1300px; height: 800px; margin: 30px auto; position: relative; overflow: hidden; /* border: 10px solid rgba(63, 175, 169, 0.50); */ /* 上、下一页 */ .prev, .next { opacity: 0; display: inline-block; cursor: pointer; width: 50px; height: 50px; position: absolute; top: 50%; color: #d2d0d0; z-index: 33; text-align: center; font-size: 40px; transform: translateY(-25px); } /* 上一页不同的属性 */ .prev { left: 0; border-radius: 0 25% 25% 0; } /* 下一页不同的属性 */ .next { right: 0; border-radius: 25% 0 0 25%; } /* 图片容器 */ .images { position: absolute; top: 0; left: 0; width: 1000%; /* 图片 */ li { list-style: none; float: left; img { width: 1300px; height: 800px; } } } /* 小圆点盒子 */ .dots { position: absolute; bottom: 10px; left: 50%; height: 30px; transform: translateX(-50%); /* background: rgba(255, 255, 255, .3); */ background: rgb(0, 128, 192, 0.5); border-radius: 10px; display: flex; /* 小圆点 */ li { width: 15px; height: 15px; border-radius: 50%; border-color: white; background-color: rgb(0, 0, 0, 0.2); margin: 8px; cursor: pointer; } /* 选择的小圆点 */ .active { background-color: rgb(247, 243, 243); } } } /* 鼠标移入盒子显示上、下按钮 */ .box:hover .prev, .box:hover .next { opacity: 1; } /* 鼠标移入上、下按钮，背景模糊 */ .box .prev:hover, .box .next:hover { background-color: rgba(0, 0, 0, 0.5); }