web16

yibei首页
手机访问WAP.INBAI.COM





登录

















亿贝CALL


了解有关选项卡和选项卡快捷方式、加速器和 InPrivate 浏览的更多信息加速器和 InPrivate 浏览的更多信息






>>了解详情








亿贝CALL


了解有关选项卡和选项卡快捷方式、加速器和 InPrivate 浏览的更多信息加速器和 InPrivate 浏览的更多信息






>>了解祥情









  最新动态








  客服中心












.

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", sans-serif;
    }

body {
background: #fff;
font-size: 14px;
color: #333;
}

/* 顶部头部栏 */

.top-header {
background: #111;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 40px;
}

.logo-wrap {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
}

.logo-text h1 {
font-size: 24px;
letter-spacing: 2px;
}

.logo-text small {
font-size: 10px;
opacity: 0.7;
}

.mobile-tip {
background: #f7a020;
color: #000;
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
}

/* 导航栏 */

.nav-bar {
background: #222;
display: flex;
padding: 0 40px;
}

.nav-bar a {
color: #ccc;
text-decoration: none;
padding: 10px 22px;
display: block;
border-right: 1px solid #333;
}

.nav-bar a:hover {
background: #444;
color: #fff;
}

/* 横幅banner */

.banner {
background: linear-gradient(90deg, #ff9500, #ffb740);
display: flex;
align-items: center;
padding: 18px 40px;
gap: 20px;
}

.banner-phone {
width: 60px;
}

.banner-text h2 {
color: #fff;
font-size: 22px;
font-weight: normal;
}

.banner-text p {
color: #fff;
font-size: 12px;
letter-spacing: 1px;
}

/* 面包屑 */

.crumb {
text-align: right;
padding: 8px 40px;
font-size: 12px;
color: #666;
}

/* 主内容容器 */

.container {
display: flex;
padding: 0 40px 30px;
gap: 30px;
}

/* 左侧主内容 */

.main-left {
flex: 7;
}

.page-title {
font-size: 18px;
margin-bottom: 16px;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}

.download-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}

.download-desc {
flex: 1;
font-size: 12px;
color: #555;
line-height: 1.6;
}

.download-btn {
background: #d03000;
color: #fff;
border: none;
padding: 8px 18px;
font-weight: bold;
cursor: pointer;
}

/* 功能列表项 */

.func-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 18px 0;
}

.func-icon {
width: 36px;
height: 36px;
background: #803000;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}

.func-text h4 {
font-size: 14px;
margin-bottom: 4px;
color: #444;
}

.func-text p {
font-size: 12px;
color: #666;
line-height: 1.5;
}

/* 右侧侧边栏 */

.side-right {
flex: 3;
}

.side-box {
border: 1px solid #eee;
margin-bottom: 16px;
}

.side-box h4 {
background: #f7a020;
color: #fff;
padding: 6px 10px;
font-size: 14px;
}

.side-body {
padding: 12px;
font-size: 12px;
line-height: 1.7;
color: #444;
}

.tel-num {
font-size: 20px;
color: #c02000;
font-weight: bold;
margin: 8px 0;
}

.faq-list {
margin-top: 10px;
}

.faq-list li {
list-style: none;
margin: 4px 0;
color: #666;
}

.more-link {
text-align: right;
margin-top: 8px;
color: #0066cc;
}

/* 底部页脚 */

footer {
border-top: 1px solid #eee;
padding: 12px 40px;
display: flex;
justify-content: space-between;
font-size: 11px;
color: #777;
}

.footer-left a {
color: #777;
margin-right: 10px;
text-decoration: none;
}

/* 全局样式：给所有元素去掉默认的边距和内边距 */
{margin: 0; padding: 0;}
‌
/ 网页整体样式 */
body{
font-family: "微软雅黑","arial, helvetica, sans-serif";
background-color: #909090;
background-image: url(../img/bg3.jpg);
background-repeat: repeat-x;
background-position: left bottom;
background-attachment: fixed;
font-size: 12px;
color: #ffffff;
}

/* 清除浮动专用类，解决浮动导致的父盒子高度塌陷 /
.clear{
clear: both;
width: 100%;
height: 0;
overflow: hidden;
}
‌
/ 顶部最外层大盒子（固定高度，不会塌陷空白） /
.top{
width: 100%;
height: 118px;
background-color: #909090;
background-image: url(../img/bg1.jpg);
/ 最小高度兜底，图片丢失也不会空白 */
min-height: 118px;
}

/* 顶部内容栏，居中显示 /
.top_bar{
margin: 0 auto;
width: 1000px;
overflow: hidden; / 内部浮动自动撑开高度 */
}

/* 同时设置 top_bar 和 导航栏ul 样式：居中、宽度1000 */
.top_bar,.nav ul{
margin: 0 auto;
width: 1000px;
}

/* logo图片盒子 /
.logo{
float: left;
width: 241px;
height: 79px;
background-image: url(../img/logo.png);
/ 兜底底色，图片丢失也能看到盒子，不会空白 */
background-color: #666;
}

/* 右上角手机访问文字 */
.at1{
float: right;
margin-top: 18px;
width: 209px;
height: 30px;
line-height: 30px;
background-image: url(../img/bg1.png);
text-indent: 50px;
}

/* 导航栏整体 */
.nav{
background-image: url(../img/bg2.jpg);
height: 40px;
line-height: 40px;
background-color: #555;
}

/* 导航里的每一项 li /
.nav ul li{
float: left;
width: 166px;
background-image: url(../img/nav_s.jpg);
background-repeat: no-repeat;
background-position: left 2px;
list-style-type: none;
color: #fff;
font-size: 14px;
text-align: center;
}
/ 导航里的链接 a */
.nav ul li a{
width: 166px;
height: 40px;
display: inline-block;
color: #fff;
text-decoration: none;
}

/* 鼠标放到导航上的效果 /
.nav ul li a:hover{
background-image: url(../img/nav_h.jpg);
background-repeat: no-repeat;
background-position: center 1px;
}
/ 背景盒子 bg5 /
.bg5{
background-image: url(../img/bg5.jpg); / 背景图 /
width: 100%; / 铺满屏幕 /
height: 261px; / 高度261 */
}

/* 主要内容大盒子 /
.main{
height: 261px; / 高261 /
margin: 0 auto; / 水平居中 /
width: 1000px; / 宽1000 /
background-image: url(../img/banner4.jpg); / 轮播图背景 /
position: relative; / 相对定位 → 给子元素定位用 */
}

/* 蓝色数字小盒子（没用上，备用） /
.number{
position: absolute; / 绝对定位 /
left: 20px; / 距离左边20 /
bottom:20px ; / 距离底部20 /
width: 200px; / 宽200 /
height: 25px; / 高25 /
background-color: blue; / 蓝色背景 */
}

/* 蓝色右侧盒子（没用上，备用） /
.right{
position: absolute; / 绝对定位 /
right: 20px; / 距离右边20 /
bottom:20px ; / 距离底部20 /
width: 200px; / 宽200 /
height: 200px; / 高200 /
background-color: blue; / 蓝色背景 */
}

/* 网页主体内容背景 */

content{

background-color: #939393; /* 灰色背景 /
background-image: url(../img/bg5.jpg); / 背景图 /
background-repeat: repeat-x; / 横向重复 */
}

/* 白色主体内容盒子 */

main{

background-color: #F0F0F0; /* 浅灰色背景 /
width: 1000px; / 宽1000 /
margin-top: 0px; / 距上0 /
margin-right: auto; / 右自动 /
margin-bottom: 0px; / 距下0 /
margin-left: auto; / 左自动 → 居中 /
padding-top: 0px; / 内上边距0 /
padding-right: 0px; / 内右边距0 /
padding-bottom: 18px; / 内下边距18 /
padding-left: 0px; / 内左边距0 /
/height: 1000px;*/
overflow: hidden;
}

/* 轮播图外层容器 /
.container{
background-image: url(../img/bg.jpg); / 底部背景图 /
background-repeat: no-repeat; / 不重复 /
background-position: left bottom; / 左下 /
height: 264px; / 高264 /
width: 1000px; / 宽1000 /
margin-top: 0; / 距上0 /
margin-right: 0px; / 距右0 /
margin-bottom: 35px; / 距下35 /
margin-left: 0px; / 距左0 */
overflow: hidden;
}

/* 轮播图片盒子（父盒子） */

img_switch{

height: 216px; /* 高216 /
position: relative; / 相对定位 → 给子元素定位用 */
}

/* 轮播文字说明盒子 */

img_switch_text{

width: 262px; /* 宽262 /
position: absolute; / 绝对定位 /
bottom: 5px; / 距离底部5px /
left: 10px; / 距离左边10px /
height: 15px; / 高15 */
}

/* 轮播数字导航 12345678 */

number_nav{

position: relative; /* 相对定位 → 正常排版，不飘 /
left: 10px; / 整体往右挪10px /
bottom: 30px; / 往上挪30px /
margin-top: 5px; / 距离上面图片5px */
}

/* 数字导航里的 ul */

number_nav ul{

font: 12px arial, helvetica, sans-serif; /* 字体 /
padding: 0px; / 内边距0 /
margin: 0px; / 外边距0 /
list-style-type: none; / 去掉小圆点 /
color: #fff; / 文字白色 */
}

/* 数字导航里的每一个小方块 */

number_nav ul li{

float: left; /* 左浮动 → 横着排 /
font-weight: bold; / 文字加粗 /
background: #000; / 黑色背景 /
margin-right: 8px; / 右边间距8px /
width: 23px; / 宽23 /
cursor: pointer; / 鼠标变小手 /
line-height: 17px; / 行高17 → 文字垂直居中 /
height: 17px; / 高17 /
text-align: center; / 文字水平居中 /
}
.denglu1{
float: left;
width: 107px;
height: 34px;
line-height: 34px;
text-align: center;
background: url(../img/lib1.png) no-repeat left;
color: #fff;
}
.denglu2{
float: left;
width: 107px;
height: 34px;
line-height: 34px;
text-align: center;
background: url(../img/lib2.png) no-repeat left;
color: #fff;
}
table{
float: right;
/position: relative;
bottom: 250px;
right: 100px;/
position: absolute;
/bottom:0px;*/
top: 20px;
right: 100px;
}
.red{
background-color: red;
}
.trans{
background-color: transparent;
}

number_nav ul li a{

color: #FFFFFF;
text-decoration: none;
display: inline-block;
width: 20px;
text-align: center;
}
input{
/display: block;/
}
td{
width: 283px;
height: 192px;
}
.box1{
float: left;
width: 403px;
/height: 70px;/
/* background-color: orange;/
margin:10px 0px 0px 70px ;
padding-bottom: 18px;
overflow: hidden;
}
.img1{
float: left;
width: 112px;
height: 152px;
/background-color: #0000FF;/
/margin-right:20px ;/
/margin: 15px 5px 5px 5px;*/

}
.txt{
float: left;
width: 262px;
margin-left: 17px;
/* height: 152px;/
/background-color: #0000FF;/
/margin: 15px 5px 5px 5px;/
}
.txt p{
color: #000000;
}
.txt h2 a{
margin-bottom: 12px;
color: #3A0C00;
font-size: 15px;
text-decoration: none;
}
.txt2{
margin:30px 0px 0px 0px;
height: 68px;
margin-bottom: 6px;
text-align: justify;
float: left;
}
.at2{
padding-top: 45px;
float: right;
height: 39px;
line-height: 39px;
position: relative;
bottom: 0px;
white-space: nowrap;
}
.at2 a{
color: #af4f02;
text-decoration: none;
}
.at2 span{
position: absolute;
right: 0;
bottom: 0;.
color: #000000;
}
.shuiping{
background-image: url(../img/bg6.jpg);
height: 2px;
width: 100%;
margin-bottom: 18px;
margin-top: 0;
overflow: hidden;
}
.box2{
width: 435px;
/height: 200px;/
/background-color: blue;/
background: url(../img/bg7.jpg) repeat-y right center;
/background-color: red;/
margin-left: 25px;
padding-right: 20px;
float: left;
}
h2.title1{
height: 30px;
line-height: 30px;
color: #3a0300;
font-size: 16px;
}
/文字相对于图片垂居中/
.title1{
vertical-align: middle;
}
.menu1{
margin-bottom: 5px;
}
.menu1 li{
/左侧自定义icon图标/
background:url(../img/icon6.jpg) no-repeat left center;
height:24px;
line-height: 24px;
position: relative;
}
.menu1 li a{
margin-left: 15px;
text-decoration: none;
}
.menu1 li span{
position:absolute;
right: 0;
top: 0;
color: black;
}
.box3{
width: 435px;
height: 200px;
padding-left: 32px ;
margin-left: 25px;
float: left;
}
.title2{
height: 30px;
line-height: 30px;
display: block;
color: #3A0C00;
font-size: 16px;
}
.title2*{
vertical-align: middle
}
.txt3{
width: 200px;
float: left;
margin: 0 46px 0 0;
display: inline;
}
.img2{
float: left;
width:161px;
}
.bottom{
overflow: hidden;
}

posted @ 2026-06-26 09:17  我老爱吃沙琪玛le  阅读(8)  评论(0)    收藏  举报