body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family:"Arial Black" } body,td,th {font-size: 1rem;} a:hover {text-decoration: none;} .ziti_bai { color: #FFFFFF; text-decoration: none; } .ziti_cu {font-weight: bold;} .ziti_14 { font-size:14px} .jianju_20 {line-height: 20px;} .link_B_Menu{font-size:16px;text-decoration: none;color:#FFFFFF;font-weight:bold; line-height:30px} .nei_biaoti{font-size:16px; color:58847b; text-decoration:none } /*===顶部布局===========================================================================================================================================*/ #top_1{width:100%; height:10px; text-align:center;} #top_1 img{margin-top:5px} #top_menu{width:100%; background-color:#FFFFFF; display:flex ; justify-content:center;}/*overflow:hidden 隐藏溢出。 display:flex 竖列布局 ///divheight:100px;*/ #top_menu_1{width:300px; margin-left:50px; text-align:center; margin-top:10px } #top_menu_2{width:1000px; margin-left:50px; } #top_menu_3{width:400px; margin-left:50px;} /*=== #top_menu_3{width:250px; height:90px; font-size:14px; margin-top:10px} #top_menu_3 a{color: #ffffff;font-weight:bold;text-decoration: none;} #top_menu_3 a:hover{color: #58847b;font-weight:bold}===*/ /*===icon 页的布局===========================================================================================================================================*/ #icon_1{width:100%; height:15rem; margin-top:7em; display:flex;justify-content:center;}/*display:flex 竖列布局div,justify-content:center;让div内的div居中，属性参考www.jianshu.com/p/d9373a86b748*/ .icon_2 {width:150px; text-align:center; position:relative; } .icon_2 .iconfont { font-size: 4rem; color: #58847b;transition: .5s;} .iconWeChat:hover {color: rgb(92, 207, 64);} .iconbzhan:hover {color: rgb(251, 114, 153);} .iconjingdong:hover {color: rgb(223, 35, 33);} .iconyouzancopy:hover {color: rgb(78, 110, 242);} .iconweibo-fill:hover {color: rgb(248, 93, 0);} .icondouyin:hover {color: rgb(28, 11, 27);} .iconjiaqiangban:hover {color: rgb(255, 40, 64);} .iconzhihu-circle-fill:hover {color: rgb(15, 91, 246);} .icon_2:hover .icon_3 { height: 140px; } .icon_3 {position:absolute; width: 140px;height: 0;background-color: #F2F2F2;transition: .5s; margin-left:10px} .icon-p {margin: 0rem 0;font-size: 1rem;letter-spacing: 0.2em;font-weight: bold;color: rgba(88, 132, 123, 1);line-height: 1.88rem;} .icon-p span {font-size: .8rem;font-weight: 400;color: rgba(77, 84, 90, 1);line-height: 4.57rem;} .icon_link{text-decoration: none;text-decoration: none;text-decoration: none;text-decoration: none;} /*=====首页 内容的布局=========================================================================================================================================*/ #index_title{ color:#515151; font-size:25px; font-weight:bold} #index_title_line{border-bottom-width: 3px;border-top-style: none;border-right-style: none;border-left-style: none;border-bottom-color: #0a419a;border-bottom-style: solid;} #index_title_line1{border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-left-style: none;border-bottom-color:#dddddd;border-bottom-style: solid;} #index_about a{text-decoration:none } #index_about a:hover{color:#0b9f9c;cursor: pointer;transition: all 0.4s; } #index_pro{ width:1200px;height:100px;margin-left:auto; margin-right:auto;margin-top:20px; } #index_pro_1{width:100%;justify-content:center; background-color:#CC0000}/*justify-content:center;让div内的div居中*/ #index_pro_2{width:180px;height:40px;line-height:40px; text-align:center;background-color:#333333; color:#FFFFFF;font-weight:bold; } #index_pro_2:hover{background-color:#0065bb;cursor: pointer;transition: all 0.4s;} #index_pro_title {width:100%; margin-top:100px;} #index_pro_title_1{font-size:60px; font-weight:bold; color:#004d8f; width:1200px; height:150px;margin-left:auto; margin-right:auto; } /*首页的 关于我们 、 工程案例，共用这个样式*/ #index_about_title { width:100%;height:200px;margin-top:80px; background-color:#F3F3F3; padding-top:20px } #index_about_title_n{ width:70%; height:200px;margin-left:auto;margin-right:auto} #index_about_title_1{text-transform: uppercase; font-family:Arial; letter-spacing:4px; color:#004d8f}/*text-transform: uppercase; 强制字母全变大写 lowercase这是小写 letter-spacing字间距*/ #index_about_title_2{text-transform: uppercase; font-size:36px; line-height:80px} #index_about_title_3{text-transform: uppercase; font-family:Arial;font-size:16px } #index_about_title_4{ width:150px; height:5px; background-color:#004d8f; margin-top:30px} /* #idnex_pro{ color:#515151; font-size:24px; font-weight:bold; width:100%; text-align:left; line-height:40px; margin-top:0px; margin-left:0px; } #idnex_pro ul { margin:0px; padding:0px}/*ul居左 #idnex_pro ul li{display:block; }/*去掉li前面的 点 #idnex_pro ul li a{color:#515151;text-decoration:none } #idnex_pro ul li a:hover{color:#0b9f9c;cursor: pointer;transition: all 0.4s; } #idnex_pro_c{ color:#515151; font-size:14px; font-weight:bold; width:390px; text-align:left; line-height:20px; margin-top:10px; } #idnex_pro_c ul {margin:0px; padding:0px}/*ul居左 #idnex_pro_c ul li{display:block; }/*去掉li前面的 点 #idnex_pro_c ul li a{color:#515151;text-decoration:none } #idnex_pro_c ul li a:hover{color:#0b9f9c;cursor: pointer;transition: all 0.4s; } */ #index_dian1{width:100%; text-align:center; margin-top:60px} #index_dian2{width:100%; text-align:center; margin-top:60px} #idnex_ZhuM{width:100%; height:500px; background-color:#154a7b; display:flex;justify-content:center; }/*display:flex 竖列布局div,justify-content:center;让div内的div居中，属性参考www.jianshu.com/p/d9373a86b748*/ #idnex_ZhuM1{width:500px; height:500px; } #idnex_ZhuM2{width:500px; height:500px;background-color:#58847b; } #idnex_ZhuM3{width:500px; height:500px; } #idnex_ZhuM_title{ font-size:36px; text-align:center; line-height:80px; color:#FFFFFF} #idnex_ZhuM_title1 a{line-height:40px; font-size:18px; color:#FFFFFF; text-decoration:none} #idnex_ZhuM_title1 img{ vertical-align:middle}/*图片与文字在同一行 居中*/ #idnex_ZhuM_title1 li{ display:block}/*去掉li前面的 点*/ #index_faq{width:100%; margin-top:60px;text-align:center}/*text-align:center设置div内居中，然后在内部div加入margin:0 auto; 实现 div中的div居中 */ #index_faq1{width:95%; height:800px;border: 5px solid #53b865;margin:0 auto;} #index_faq2{ text-align:left; margin-top:40px; margin-left:80px} #index_link{width:100%; height:160px; margin-top:60px}/*background-color:#58847b;*/ #index_link_title{width:100%; height:40px; text-align:center; font-size:30px; font-weight:bold; color:#58847b; margin-top:40px } #index_link_title1{margin:0 auto;width:400px} /*=====底部的布局=========================================================================================================================================*/ #index_bottom_title { width:100%;height:200px;margin-top:80px; } #index_bottom_title_n{ width:70%; height:200px;margin-left:auto; margin-right:auto} #index_bottom_title_1{} #index_bottom_title_2{} #index_bottom_title_3{} #index_bottom_title_4{ width:100%; height:1px; background-color:#CCCCCC; } #index_bottom_title_5{} #index_bottom_title_shulie{display:flex;justify-content:center; margin-top:30px}/*display:flex 竖列布局div,justify-content:center;让div内的div居中，属性参考www.jianshu.com/p/d9373a86b748*/ .bottom_font1{ font-family:"Arial Black"; font-size:24px;} .bottom_font2{ font-family:"Arial"; font-size:18px;} #bottom{width:100%; height:200px; background-color:#212120; margin-top:2px; display:flex;justify-content:center;align-items:center; margin-top:10px } /*display:flex 竖列布局div,justify-content:center;让div内的div水平居中，align-items:center;上下居中，属性参考www.jianshu.com/p/d9373a86b748*/ #bottom_1{width:700px; height:200px;} #bottom_1 ul{display: inline-block; vertical-align:top;}/*display: inline-block; 让所有li平行一行,vertical-align:top 文字居顶*/ #bottom_1 ul li a{text-decoration: none; color:#FFFFFF; font-size:14px;} #bottom_1 ul li{display:block; text-align:right; line-height:25px}/*去掉li前面的黑点*/ #bottom_2{} /*======内页左侧引用文件的 布局==================================================================================================================================*/ #nei_left{ width:250px; height:auto; line-height:35px; background-color:#0065bb; color:#FFFFFF; font-size:16px;word-wrap:break-word; font-family:Arial} /*word-wrap:break-word 单词自动换行*/ #nei_left a{ color:#FFFFFF; text-decoration:none} #nei_left:hover{background-color:#999999;cursor: pointer;transition: all 0.4s;} #nei_left_1{ width:230px;margin-top:2px; height:auto;margin-left:20px;font-size:16px; font-weight:bold;} #nei_left_1 ul{ padding:0px; margin:0px} /*去掉 ul 与li之间的空隙*/ #nei_left_1 ul li{ height:auto; background-color:#58847b; margin-top:2px;list-style-type:none;line-height:40px; padding-left:20px; word-wrap:break-word} #nei_left_1 ul li a{ color:#FFFFFF; text-decoration:none} #nei_left_1 ul li:hover{ background-color:#50b766;cursor: pointer;transition: all 0.4s;} /*======内页面的 布局==================================================================================================================================*/ #nei_banner_1{ width:100%; margin-top:40px; height:520px; background:url(banner/b_1.jpg) no-repeat 0px center;background-size: cover; }/*background:url(banner/b_1.jpg) no-repeat 0px center; 背景居中 不重复*/ #nei_banner_2{ width:100%; margin-top:40px; height:520px; background:url(banner/b_2.jpg) no-repeat 0px center;background-size: cover; }/*background-size: cover 背景拉伸平铺*/ #nei_banner_3{ width:100%; margin-top:40px; height:520px; background:url(banner/b_3.jpg) no-repeat 0px center;background-size: cover; }/*background-size: cover 背景拉伸平铺*/ #nei_banner_4{ width:100%; margin-top:40px; height:520px; background:url(banner/b_4.jpg) no-repeat 0px center;background-size: cover; }/*background-size: cover 背景拉伸平铺*/ #nei_banner_title1{width:70%; height:200px;margin-left:auto; margin-right:auto; display:flex;align-items: flex-end; font-size:36px; color:#FFFFFF}/* display:flex;align-items: flex-end文字居底显示*/ #nei_banner_title2{width:70%;margin-left:auto; margin-right:auto; font-family:Arial; color:#FFFFFF; line-height:50px;font-size:10px;} #nei_content_dandu{ width:80%;margin-left:auto; margin-right:auto;height:auto; margin-top:60px;} #nei_ziti1{ font-family:Arial Black; font-size:16px;} #nei_ziti2{ font-family:Arial; font-size:16px;text-decoration:none} #nei_ziti2 a{ text-decoration:none;color:#58847b; } #nei_title{ color:#154a7b; font-size:36px; font-weight:bold; width:100%; text-align:center; margin-top:60px; } #nei_title_pro{ color:#58847b; font-size:24px; font-weight:bold; width:100%; text-align:left; } #nei_title_pro ul{ margin-top:0px} #nei_title_pro ul li{display:block;}/*去掉li前面的 点*/ #nei_title_pro ul li a{font-size:18px;color:#58847b;text-decoration:none } #nei_title_pro ul li a:hover{color:#0b9f9c;cursor: pointer;transition: all 0.4s; } #nei_title_ziti{color:#58847b; font-size:18px; font-weight:bold;} .nei_Search{border: thin none; width:300px; height:30px;font-family:"微软雅黑"; font-size:20px; color:rgba(105,187,181,0.6)}/*设置字体颜色并设置透明度*/ #nei_title_pro1{width:500px;height:40px;display:flex;justify-content:space-between;}/*display:flex 竖列布局div,justify-content:space-between;让div内的div两头对齐居中，属性参考www.jianshu.com/p/d9373a86b748*/ #nei_title_pro1_1{width:200px;height:40px; background-color:#154a7b; font-size:20px; font-weight:bold; text-align:center; line-height:40px } #nei_title_pro1_1 a{ color:#FFFFFF; text-decoration:none } #nei_title_faq{color:#58847b; font-size:20px;font-weight:bold; line-height:30px; margin-left:50px} #nei_title_faq1{color:#999999;font-size:14px;font-weight:bold; line-height:30px; margin-left:50px} #nei_content{ width:100%;margin-top:40px; display:flex;justify-content:center; aling-items:flex-start}/*display:flex 竖列布局div,justify-content:center;让div内的div水平居中，align-items:flex-start;居上对齐，属性参考www.jianshu.com/p/d9373a86b748*/ #nei_content_1{width:1200px; height:auto; margin-left:40px} #nei_content_2{ } /*无用的开始. #top_1_1 ul{margin:0; padding:0px; list-style:none; float:left;} /*ul 居左代码 *//*cursor:pointer 是鼠标放上去 显示小手的效果 #index_about_R{width:750px;height:auto;float:right;line-height:30px;word-wrap:break-word; font-size:18px; font-family:"黑体"; font-weight:bold; color:#4a4a4a;} /*word-wrap:break-word 是 DIV内超出DIV宽度，自动换行 #index_pro_2:hover{background-color:#333333;cursor: pointer;transition: all 0.4s;} #content_1{overflow:hidden; }/*overflow:hidden 隐藏溢出。让子元素用float后能撑开父元素,下面的div位置也会准确* /*#top_center div{display:inline;、、用这个设置div平行，不能设置div的高度和宽度 } ======控制product.asp页中 的图片大小 ================================================================ #pro_small img { max-width: 160px;max-height: 110px;} * html #pro_small img { width: expression(this.width > 160 && this.width > this.height ? 160 : auto); height: expression(this.height > 110 ? 110 : auto);} /*======控制product_show.asp页中 的图片大小 ================================================================ #pro_big img { max-width: 620px;} * html #pro_big img { width: expression(this.width > 620 && this.width > this.height ? 620 : auto); } /*====== =============================================================== 无用的结束*/