body{
	background-color:white;
	width:100%;
	height: 100%;
	font-size:16px;
	}
a{
	text-decoration: none;
	color:black;
	display:block;
	  
}
a:link {
  color: black;
}


a:visited {
  color:black ;
}


a:hover {
  color:red;
}


a:active {
  color: black;
}
.navi{
     width: 100%; 
}
.form{
    padding: 0;  
    margin: auto; 
    width:100%;
    position: fixed; 
    top: 2%;   
    left: 1%;  
    } 
.image{
    position: fixed; 
    top: 2%;   
    left: 1%; 
}	
.ul1{
    list-style-type: none; /* 移除列表前的标记 */  
    padding: 0; /* 移除默认的内边距 */  
    margin: 0; /* 移除默认的外边距 */  
    display:Flex; /* 使用Flexbox */  
    justify-content: space-around; /* 列表项之间的空间分布 */  
    width: 100%; /* 列表占满整个屏幕宽度 */  
    position: fixed; /* 列表固定在屏幕上 */  
    top: 10%; /* 顶部对齐 */  
    left: 0; /* 左侧对齐 */  
    background-color:rgb(50,50,180);  	
    z-index: 1000; 
	border-radius:5px;
} 	
.li1{
	flex: 1; /* 这将使得所有列表项宽度相等，并共同填满父容器的宽度 */  
    text-align: center; 
	padding: 10px 0; /* 上下内边距 */
	background-color:rgb(50,50,180);
}
.ul2{
    list-style-type: none; /* 移除列表前的标记 */  
    padding: 0; /* 移除默认的内边距 */  
    margin: 0; /* 移除默认的外边距 */  
    display: Flex; /* 使用Flexbox */  
    justify-content: space-around; /* 列表项之间的空间分布 */  
    width: 100%; /* 列表占满整个屏幕宽度 */  
    position:fixed ; /* 列表固定在屏幕上 */  
    bottom: 0%; /* 顶部对齐 */  
    left: 0; /* 左侧对齐 */  
    background-color:rgb(50,50,180);  /* 背景色，仅为了更明显地看到效果 */  
    z-index: 1000; /* 确保列表在内容之上 */
	border-radius:5px;
} 	
.li2{
	flex: 1; /* 这将使得所有列表项宽度相等，并共同填满父容器的宽度 */  
    text-align: center; /* 如果需要的话，使文本居中 */  
    /* 其他样式 */ 
	padding: 10px 0; /* 上下内边距 */ 
}

.bottom{
	position:adsolute;
    margin-bottom:0%;
	left:0%;
}