@charset "utf-8";
/* CSS Document */
/* 基础样式重置 */

/*body和*区别，一个是继承属性，一个是设置成属性*/
* {
     margin: 0;
     padding: 0;
	 /*确保元素的总宽度和高度中包括内边距（填充）和边框*/
     box-sizing: border-box;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
html { 
     font-size: 16px; 
		}		

body {
	/*background-color: #f5f5f5; /*背景颜色*/
	/*background-color: #F6F6F6;/*背景颜色*/
	background-color: #F0F0F0; /*背景颜色*/
	color: #333;  /*文字颜色*/
	/*color: #666;/*文字颜色*/
	line-height: 1.6; /*文字行高是字体大小的1.6倍 */
        }
/*========================================公用部分====================================================*/		
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1rem;
	font-weight: bold;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: normal;
	color: #4285f4;
}


/*========================================对齐====================================================*/

.text-right {
	text-align: right; /* 文本右对齐 */
}

.text-center {
	text-align: center;/* 文本水平居中对齐 */
}

.text-left {
	text-align: left; /* 文本左对齐 */
}

/*========================================常用参数====================================================*/


.容器左右居中对齐 {
	display: flex;
	justify-self: end;/*右对齐*/
	justify-items: end; /* 所有子项自动右对齐（容器属性） */
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	justify-self: start; /* 左对齐 */
	justify-items: start; /* 所有网格项内容自动左对齐 */
	height: 100px; /* 或者你需要的任何高度 */
	border: 2px solid #0C6;
	padding: 0px;
	width: 600px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.容器水平垂直居中 {
	display: grid;
	place-content: center; /* 同时实现水平和垂直居中 */
	height: 300px; /* 或者你需要的任何高度 */
	width: 600px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border: 1px solid #F00;
}


/*主体宽度响应式设计自适应缩放适合不同尺寸显示器*/
.xiangyingshi {
	/*最大宽度*/
    max-width: 1000px;
	/*外边距上下0px 左右自动*/
    margin: 0 auto;
	border: 1px solid #F00;
        }
/*搜索框和logo 宽度响应式设计自适应缩放适合不同尺寸显示器*/
.zishiying {
	/*最大宽度*/
    max-width: 653px;
	/*外边距上下0px 左右自动*/
    margin: 0 auto;
	border: 1px solid #F00;
       }
/*========================================常用参数====================================================*/
    /*背景颜色透明度调整代码*/
	
	
	/*background-color: #FF000080; */
    /* 8位：#FF0000（红色） + 80（16进制，对应0.5透明度） */
    /* 4位简写：#F00（红色） + 8（对应0.5） */
    /* background-color: #F008; */
    /* background-color: #00b77780;*/
	
	
	/*红 / 绿 / 蓝：取值 0~255（或百分比）*/
	/*透明度：0（全透）~ 1（不透），如 0.5 是 50% 透明*/
	/*background-color: rgba(红, 绿, 蓝, 透明度);*/
	 /*background-color: rgba(0, 0, 255, 0.5); */

/*========================================网页开始====================================================*/
 /* 头部 */
.header {
	border-bottom: 1px dashed #CCC;
	padding: 0;  /*内填充上0xp右0px下0px左0px*/
	/*隐藏鼠标点击这些元素时出现的光标 */
	caret-color: transparent;
	/*margin: 0px auto 0px auto;/*外填充上0xp,右自动下,0px,左自动*/
	margin: 0 auto;  /*外边距上下0px 左右自动*/
	height: 38px;/*div高度*/
        }
		
.text-header {
	/*根据DIV的宽度自动设置子DIV宽度 填满*/
	display: grid;
	
	/*分成2列，第一列宽度是75%，第二列宽度是25%*/
	grid-template-columns: 75% 25%;
	
	/* 两列，宽度比例为 3:1 宽度平均分4份，第一列宽度是3份，第二列宽度是1份，也就是第一列是75%第二列是25%*/
	/*grid-template-columns: 3fr 1fr;*/
	
	/* 3列宽度比例为 1:2:1（总份数4，分别占1/4、2/4、1/4） */
    /*grid-template-columns: 1fr 2fr 1fr;*/
	
	/* 第1列固定200px，剩余宽度分成2等份 */
    /*grid-template-columns: 200px repeat(2, 1fr);*/
	
	/*分3列，宽度分成3等份*/
	/*grid-template-columns: repeat(3, 1fr)*/
	
	padding: 0px;/*内边距*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	/*justify-content: center;/*水平居中*/
	/*align-items: center;/*垂直居中*/
	    }
		
.weather-header {
	display: grid; 
	/*margin-top: 8px;/*外边距上*/
    padding: 8px 0px 0px 0px; /*内填充上8xp右0px下0px左0px*/
	align-items: center; /* 垂直居中 */
	 
	    }
		
.home-header {
	display: grid; 
	/*margin-top: 8px;/*外边距上*/
    padding: 4px 4px 0px 0px;  /*内填充上4xp右4px下0px左0px*/
	align-items: center; /* 垂直居中 */
	
	    }

.img-size {
	height: 128px;
	width: 500px;	
}

/*如果将 max-width 属性设置为 100％，则图像将按需缩小，但绝不会放大到大于其原始大小*/
.img-logo {
    max-width: 100%;
    height: auto; /* 保持宽高比 */
	object-fit: cover;/*配合容器尺寸*/
}

img {
	/* 隐藏鼠标点击这些元素时出现的光标 */
    caret-color: transparent;
}

/*========================================分割线====================================================*/
/*以下是带下拉菜单跌的搜索框效果代码*/
 .search-container {
	       /*根据DIV的宽度自动设置子DIV宽度 填满*/
           display: grid;
           height: 50px;/*div高度*/
	       width: 100%;
		   /*每列的尺寸(几列，每列的宽度)*/
	       grid-template-columns: 19% 61% 20%;
           /*每行的尺寸（几行，每行的高度）*/
	       /*grid-template-rows: 80px 200px;*/
	       /*grid-template-rows: auto auto auto auto;*/
	       grid-template-rows: 45px; /*子div 仅1行，行高45px */
		   /*grid-template-columns: 100px 200px; /*子div 搭配列定义：2列，宽度分别100px/200px */
        }
        
.search-selector {
	       /*CSS搜索框圆角*/
	       border-radius: 4px 0px 0px 4px;
	       /*2px边框*/
	       border: 2px solid #CCC;
	       /*左边框宽度0px*/
	       border-right-width: 0;
          /*内填充上0xp右0px下0px左10px*/
           padding: 0px 0px 0px 10px;   
           background-color: #F0F0F0;
	       /*鼠标变手型*/
           cursor: pointer;
	       /*消除默认点击后黑色或蓝色边框效果 */
           outline: none;
		   /*过渡边线颜色时间延时0.3秒淡进淡出*/
		   transition: border-color 0.3s;
		   font-size: 1rem;	
         }
        
.search-input {
	       /*自动填充所有剩余空间*/
            /*flex-grow: 1;*/
			/*内填充上0px右0px下0px左10px*/
            padding: 0px 0px 0px 10px;
            /*2px边框*/
	        border: 2px solid #CCC;
			 /*左边框宽度0px*/
			border-left-width: 0;
            /*消除默认点击后黑色或蓝色边框效果 */
            outline: none;
			background-color: #F0F0F0;
			/*过渡边线颜色时间延时0.3秒淡进淡出*/
			transition: border-color 0.3s;
			font-size: 1rem;	
        }
        
.search-button {
	         /*CSS搜索框圆角*/
	        border-radius:0px 4px 4px 0px;
			/*内填充上0px右0px下0px左0px*/
            padding: 0px 0px 0px 0px;
            background-color: #3e8e41;
			/*文字白色*/
            color: white;
            border: none;
			/*消除默认点击后黑色或蓝色边框效果 */
            outline: none;
			/*鼠标变手型*/
            cursor: pointer;
			/*过渡背景颜色时间延时0.3秒淡进淡出*/
            transition: background-color 0.3s;
			font-size: 1rem;	
        }
        
.search-button:hover {
	        /*搜索按钮渐变色*/
            background-color: green;
        }
		
/*.search-input:focus {
	        /*搜索框点击渐变色*/
            /*border-color: #3e8e41;
            /*消除默认点击后黑色或蓝色边框效果 */
            /*outline: none;
        }*/
		
.active-state {
	       /*点击搜索框下拉菜单边框跟着变色*/
           border-color: #3e8e41;
	       /*消除默认点击后黑色或蓝色边框效果 */
           outline: none;
  }
	
 
/*========================================分割线====================================================*/

/*搜索下边框边距*/
.search-bottom {
	height: 36px;
	/*隐藏鼠标点击这些元素时出现的光标 */
    caret-color: transparent;    
}



.fenlei-title {
	display: grid;
	text-indent: 1em;/* 文字左侧缩进，文字大小16px  等价于 32px，字号变化时自动适配 */
	/*text-indent: 20px;/*文字左侧缩进，单位像素*/
	/*text-indent: 10%;/*文字左侧缩进，单位百分比*/
	height: 40px;
	align-items: center; /* 垂直居中 */
	/* 先给所有边设置颜色样式，再重置底部为无 */
	border: 1px solid #CCC;
	border-bottom: none; 
}


.content {
	
	 border: 1px solid #CCC;
}

.fenlei-xiao-title {
	display: grid;
	text-indent: 1em;/* 文字大小16px  等价于 32px，字号变化时自动适配 */
	/*text-indent: 20px;/*文字左侧缩进单位像素*/
	/*text-indent: 10%;/*文字左侧缩进单位百分比*/
	height: 30px;
	align-items: center; /* 垂直居中 */
}

 /* 网格布局 */
.biaoge-daohang {
    display: grid;
    /*根据网页宽度自动换行同时填充空白处  auto-fill：尽可能多地创建列，即使某些列可能为空  minmax(200px, 1fr)：每列最小宽度为 200px，最大为 1fr（等分剩余空间），控制几列*/
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    text-align: center; /*文本水平居中对齐 */
	font-size: 1rem;
}

.biaoge-daohang div {
	 
}

/*==============================================常用参数============================================================================*/


.daohangwz {
	/*根据DIV的宽度自动设置子DIV宽度 填满*/
	display: grid;
	/*grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));   自动换行同时自动填充空白处  100px是每个小盒子的宽度，因为下边已经设置了检测换行所以这个标签暂时没用*/
	
    /*grid-row-gap: 10px;   行间隙*/
    /*grid-column-gap: 50px;  列间隙*/ /* 列间距默认0（未设置时） */
	/*grid-gap: 2px 0; /* 第一个值=行间距，第二个值=列间距 */ /* 写法1：grid-gap（兼容旧版） */
    /*grid-gap: 2px; 行间隙和列间隙设置成相同值*/ /* 写法1：grid-gap（兼容旧版） */
	
    /*grid-template-columns: auto auto auto;   设置几列（固定值，百分比，自动）*/
    /*grid-template-rows: 80px 200px;    每行的高度*/ 
    /*grid-template-rows: 80px;    每行的高度设置成相同值*/ 
	
    /*gap: 20px 10px;   行间距20px，列间距10px*/ /* 写法2：gap（新版标准，更简洁） */
	gap: 2px; /* 行间距和列间距都是2px */ /* 若行/列间距相同，可省略第二个值 */


    /* 或单独设置 */
    /* row-gap: 20px; */    /*行间距*/
    /* column-gap: 10px; */ /*列间距*/
}
/*====================================*/
.daohangwz div {
	display: grid;
	height: 26px;
	place-items: center;    /* 同时水平和垂直居中 */
	/*align-items: center;   垂直居中*/
    /*justify-content: center;   水平居中*/
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
}
/*====================================*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等分 */
  grid-template-rows: repeat(2, 150px); /* 2行，每行150px */
  width: 600px;
  height: 400px; /* 容器固定高度，方便看垂直居中 */
  place-items: center; /* 网格项水平+垂直都居中 */
  border: 1px solid #ccc;
}
.grid-item {
  width: 100px;
  height: 80px; /* 项的尺寸小于单元格，居中效果明显 */
  background: #f0f0f0;
}
/*====================================*/
.flex-container {
  display: flex;
  width: 600px;
  height: 300px; /* 容器固定高度 */
  place-items: center; /* Flex项水平+垂直居中 */
  border: 1px solid #ccc;
  
  /*除了 center，还可使用 start（靠左 / 上）、end（靠右 / 下）、stretch（拉伸占满，默认值）*/
  place-items: start end; /* 垂直靠上，水平靠右 */
  place-items: stretch center; /* 垂直拉伸占满，水平居中 */
}
.flex-item {
  width: 100px;
  height: 80px;
  background: #f0f0f0;
  margin: 0 10px;
}
/*====================================*/

.text-container {
  column-count: 2; /* 文本分成2列 */
  column-gap: 10px; /* 两列文本之间的水平间距 */
}


/*====================================*/
/*====================================*/
/*====================================*/
/*以下是搜索框效果代码*/
.searh_form {
	/*根据DIV的宽度自动设置子DIV宽度 填满*/
	display: grid;
	width: 100%;
	height: 50px;
	/*每列的尺寸(几列，每列的宽度)*/
	grid-template-columns: 75% 25%;
	/*每列的尺寸(4列，每列的宽度自动)*/
	/*grid-template-columns: auto auto auto auto;*/
	
	/*每行的尺寸（几行，每行的高度）*/
	/*grid-template-rows: 80px 200px;*/
	/*grid-template-rows: auto auto auto auto;*//*四行，自动*/
	/*grid-template-rows: auto;*//*一行，自动*/
	grid-template-rows: 45px;		
}
.input_text {
	/*CSS搜索框圆角*/
	border-radius: 4px 0px 0px 4px;
	/*2px边框*/
	border: 2px solid #CCC;
	/*清除掉默认的内边距*/
	/*padding: 0px;*/
	/*提示字首行缩进*/
	text-indent: 10px;
	/*消除默认点击后黑色或蓝色边框效果 */
	outline: none;
	background-color: #F6F6F6;	
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 10px;
    padding-bottom: 10px;
	
	
	/*请注意，我们已添加 CSS 过渡属性以设置边框颜色的动画（改变颜色需 0.5 秒）*/
	/*把代码放到外部CSS文件时，0.5秒淡进淡出效果，会造成有些浏览器打开网站瞬间搜索框移位，解决方法就是去掉0.5秒淡进淡出效果*/
    /* -webkit-transition: 0.5s; */
    /* transition: 0.5s; */	
}
/*我们使用了 :focus 选择器，在文本字段获得焦点时（被点击）为其添加绿色边框：*/
/*input[type=text]:focus {
	border: 2px solid green;
}*/
.input_sub {
	/*CSS搜索框圆角*/
	border-radius: 0px 4px 4px 0px;
	background-color: green;
	/*消除默认点击后黑色或蓝色边框效果 */
	outline: none;
	/*2px边框*/
	border: 2px solid green;
	/*去掉submit默认边框*/
	/*border: none;*/
	/*border: 0px;*/
	color: white;/*搜索的字体改成白色*/
	cursor: pointer;/*鼠标变为小手*/
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 10px;
    padding-bottom: 10px;
}
/*====================================*/
/*====================================*/
/*====================================*/


/*=====================================================页尾部分=====================================================================*/

footer {
	display: grid;
	justify-content: center;/*DIV标签水平居中*/
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	/*先给所有边设置绿色样式，再重置上部为无 */
	border: 1px solid #CCC;
	border-top: none;
	text-align: center;/*文本水平居中*/
}

.footer-daohang {
	/*根据DIV里的DIV标签在一个行内排列*/
	/*display: inline-grid;*/
	display: grid;
	/*DIV形成3列，宽度自动调整平均33.33%*/
	grid-template-columns: auto auto auto;
	/*grid-template-columns: 100px 100px 100px; /* 3列，每列100px */
    /*grid-template-rows: 80px 80px; /* 2行，每行80px */
	
	/*grid-gap: 0px 20px; /* 行间距0，列间距20px */
	
	/*center 值将 flex 项目在容器的中心对齐*/
	/*justify-content: center;/*水平居中*/
	/*flex-start 值将 flex 项目在容器的开头对齐（默认）*/
	/*justify-content: flex-start;*/
	/*flex-end 值将 flex 项目在容器的末端对齐：*/
	/*justify-content: flex-end;*/
	
	/*align-items 属性用于垂直对齐 flex 项目*/
	/*align-items: center;*/
	/*flex-start 值将 flex 项目在容器顶部对齐：*/
	/*align-items: flex-start;*/
	/*flex-end 值将弹性项目在容器底部对齐*/
	/*align-items: flex-end;*/
	
	/*完美上下左右居中*/
	/*place-items: center; /* Flex项水平+垂直居中 */
	/*justify-content: center;*/
    /*align-items: center;*/
	
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 6px;/*内边距上*/
}

.footer-daohang div {
	display: grid;
	height: 30px;
	align-items: center; /* 垂直居中 */
	/*CSS搜索框圆角*/
	border-radius: 4px 4px 4px 4px;
}

.footer-daohang .beijing {
	/* 8位：#FF0000（红色） + 80（16进制，对应0.5透明度） */
    background-color: #4285f420;	
}


footer img {
	margin-bottom: -3px;	
}
/*========================================链接属性====================================================*/



/*链接效果*/
a:link {
	color: #666;
}

a:visited {
	color: #666;
}

a {
	text-decoration: none;
}

.lanshe a:link {
	color: #4285f4;
}

.lanshe a:visited {
	color: #4285f4;
}

/*========================================媒体查询使用说明====================================================*/

/*用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面*/

/*@media screen and (min-width: 600px) and (max-width:900px) {说明：宽度是600到900px}*/

/*========================================媒体查询代码====================================================*/

/*不同的设备页面宽度是搜索宽度 1.53倍,设备小于700px 时搜索宽度和页面宽度相同 */


/* 针对1209像素及以上的显示设备） */
@media only screen and (min-width: 1209px) {
.Responsive {
    width: 1100px; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
        }
		
/*搜索框和logo 宽度响应式设计自适应缩放适合不同尺寸显示器*/
.self-adaption {
    width: 718.95px; /*最大宽度 */
    margin: 0 auto;  /*外边距上下0px 左右自动*/
       }        
}

/* 针对1208像素及以下的显示设备） */
@media only screen and (max-width: 1208px) {
.Responsive {
    width: 91.06%; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
        }
		
/*搜索框和logo 宽度响应式设计自适应缩放适合不同尺寸显示器*/
.self-adaption {
    width: 59.51%; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
       }        
}

/* 针对700像素及以下的显示设备） */
@media only screen and (max-width: 700px) {
.Responsive {
    width: 98%; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
        }
		
/*搜索框和logo 宽度响应式设计自适应缩放适合不同尺寸显示器*/
.self-adaption {
    width: 98%; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
       }   
}

/* 针对475像素及以下的显示设备） */
@media only screen and (max-width: 475px) {
.Responsive {
    width: 98%; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
        }
		
/*搜索框和logo 宽度响应式设计自适应缩放适合不同尺寸显示器*/
.self-adaption {
    width: 98%; /*最大宽度*/
    margin: 0 auto;  /*外边距上下0px 左右自动*/
       }  
	   
.biaoge-daohang {
	/* 响应式调整 控制几列*/
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
       }      
}
/*========================================分割线====================================================*/