html+css 微信界面（续二之css）

直接整代码，没有废话！！

css–index

.top .topl{
	font-size: 0.8vmin;
	margin-left: 0;
	/* margin-top: 1vh; */
}
.topr{
	margin-right: 0vw;
	width: 8vw;
	height: 3vh;
	/* border: 1px solid black; */
	font-size: 0.8vmin;
	margin-top: 0.5vh;
	display: flex;
	justify-content: flex-end;
}
.topr p{
	font-size: 0.8vmin;
	
	
}
/* head */
.head{
	display: flex;
	justify-content: space-around;
}
.head .headl{
	margin-left: 0;
	margin-top: 1.5vh;
	font-size: 2vmin;
}
.head .headr{
	margin-right: 1vw;
	margin-top:1.5vh ;
	display: flex;
	justify-content: space-around;
}
.head .headr>p{
	margin-left: 1vw;
	font-size: 2vmin;
}
/* 主体 */
.chat{
	height: 7vh;
	/* border: 1px solid red; */
	/* overflow: scroll; */
	display: flex;
	justify-content: flex-start;
}
.chatphoto{
	width: 4vw;
	height: 7vh;
	font-size: 1vmin;
	/* border: 1px solid black; */
}
.chatphoto>img{
	width: 2vw;
	height: 4vh;
	margin-top: 1vh;
	margin-left: 1vh;
	border-radius: 20%;
	box-shadow: 2px 2px 10px wheat;
}
.newchat{
	width: 16vw;
	height: 7vh;
	border-bottom: 0.1vh solid #dcdcdc;
/* 	border: 1px solid gold; */
}
.newchat>p{
	font-size: 0.5vmin;
	margin-top: 0.5vh;
	color: #bdbdbd;
}
.chatrt{
	display: flex;
	justify-content: space-around;
}
.chatrt>p:nth-child(1){
	margin-left: -16vw;
	font-size: 4vmin;
	font-weight: 500;
	margin-top: 1.5vh;
	
}
.chatrt>p:nth-child(2){
	margin-top: 1vh;
	font-size: 2vmin;
	color: #bdbdbd;
	margin-top: 1.5vh;
	margin-right: 1vw;
}
/* menu */
.menu{
	height: 6vh;
	background-color: darkgray;
/* 	border: 1px solid red; */
	display: flex;
	justify-content: space-between;
}
.menu>div{
	display: flex;align-items: center;
}
.menu>div>a{
	display: flex;flex-direction: column;
	font-size: 2vmin;
}

css–friend

#friendmain {
	background-color: #EDEDED;
	display: flex;
	justify-content: flex-start;
}
.contact{
	height: 6vh;
	background-color: white;
	display: flex;
	justify-content: space-around;
}
.contact>img {
	width: 2vw;
	height: 4vh;
	margin-left: 1vw;
	margin-top: 1vh;
	border-radius: 20%;
}
.contact>p{
	width: 15vw;
	margin-left: 1vw;
	margin-top: 1.5vh;
	font-size: 1.5vmin;
	border-bottom: 0.1vh solid #EDEDED;
}
.mainml{
	width: 19vw;
	
	/* border: 1px solid black; */
}
.mainmr{
	width: 0.5vw;
	background-color: transparent;
	/* border: 1px solid red; */
	margin-top: 5vh;
	
}
.mainmr>ul{
	position: fixed;
}
ul,li{
	
	list-style: none;
	font-size: 0.4vmin;
	color: #A9A9A9;
}

css–find

#main{
	background-color: #EDEDED
}
.find{
	height: 6vh;
	/* border: 1px solid red; */
	background-color: white
	
}
.find>a{
	display: flex;
	justify-content: space-around;
}
.find>a>img{
	width: 1.5vw;
	height: 3vh;
	margin-top: 1.5vh;
	margin-left: 1vw;
	
	/* font-size: 0.5vmin; */
}
.prompt{
	width: 15vw;
	display: flex;
	justify-content: space-around;
}
.prompt .promptl{
	margin-left: 1vw;
	margin-top: 1.5vh;
	font-size: 2vmin;
}
.prompt .fa{
	margin-right: 1vw;
	margin-top: 1.5vh;
}
.prompt>p:nth-child(2){
	font-size: 2vmin;
}

css–me

.mainnews{
	height: 10vh;
/* 	border: 1px solid red; */
	background-color: white;
	display: flex;
	justify-content: space-around;
}
.mainnews>img{
	width: 3.5vw;
	height: 7vh;
	margin-left: 1vw;
	margin-top: 1.5vh;
	border-radius: 20%;
}
.headnew{
	display: flex;
	flex-direction: column;
	width: 15vw;
/* 	border: 1px solid blueviolet; */
	font-size: 2vmin;
	margin-left: 0;
	
	}
.headnew>#name{
	margin-left: 1vw;
	margin-top: 2vh;
	font-size: 2vmin;
}	

.number{
	
	font-size: 1vmin;
     margin-left: 1vw;
	width: 12vw;
	height: 2vh;
/* 	border: 1px solid red; */
	display: flex;
	justify-content: space-around;
}
.num{
/* 	font-size: 0.5vmin;
	margin-left: 1vw; */
	width: 15vw;
	height: 2vh;
/* 	border: 1px solid black; */
}
.erwei{
 /*  margin-right: -2vw; */
width: 5vw;
display: flex;
justify-content: space-between;
}
.erwei>img{
	width: 1vw;
	height: 2vh;
}

html–pengyouquan

.mainpyq{
	height: 75vh;
	overflow: scroll;
	overflow-x: hidden;
}
.maintou{
	width: 20vw;
	height: 25vh;
}
.head0 {
	width: 6vw;
	height: 2vh;
	border: 1px solid red;
}
.topphoto {
	width: 20vw;
	height: 8vh;
	/* border: 0.1vh solid red; */
	/* margin-top: -6vh; */
/* 	background-color: #000000; */
	display: flex;
	justify-content: flex-end;
}
.topphoto>#topphoto{
	width: 12vw;
	height: 8vh;
    margin-right: 1vw;
	margin-top: -5vh;
/* 	border: 0.1vh solid red; */
	display: flex;
	justify-content: space-around;
}

.topphoto>#topphoto>p{
	font-size: 2vmin;
	margin-top: 2vh;
	color: white;
}
.topphoto>#topphoto>img{
	width: 4vw;
	height: 7vh;
	border-radius: 20%;
}
.pyqnews{
	margin-top: -5vh;
	width: 20vw;
	height: 10vh;
/* 	border: 0.1vh solid red; */
	border-bottom: 0.1vh solid #d9d9d9;
	display: flex;
	justify-content: space-between;
}
.pyqtou{
	width: 4vw;
	height: 6vh;
	/* border: 0.1vh solid #00FFFF; */
	display: flex;
	justify-content: flex-start;
}
.pyqtou>img{
	width: 3vw;
	height: 6vh;
	border-radius: 20%;
}
.new{
	width: 15vw;
	height: 10vh;
/* 	border: 0.1vh solid #FF0000; */
}
.new>p:nth-child(1){
	font-size: 1.5vmin;
	color: blue;
}
.new>p:nth-child(2){
	font-size: 1.5vmin;
}
.newtime{
	width: 20vw;
	height: 1.5vh;
	margin-top: 3vh;
	/* border: 0.1vh solid aqua; */
	display: flex;
	justify-content: space-between;
}
.newtime>p:nth-child(1){
	font-size: 0.5vmin;
	color: #838383;
	margin-left: 0;
}
.newtime>p:nth-child(2){
	font-size: 2.5vmin;
	line-height: 1.5vh;
	margin-right: 8vw;
	color: #586c9f;
	background-color: #f8f8f8;
	
}