<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kaohe</title>
<link rel="stylesheet" href="kaohe.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="fsnav">
<div class="f"><img src="imgs/f.png" alt=""></div>
<div class="searchone">
<div class="imgsearch"><img src="imgs/search.png" alt="" ></div>
<span ><input type="text" placeholder="搜索 Facebook" class="input" ></span>
</div>
</div>
<div class="mainnav">
<span class="imgs1 home">
<img src="imgs/home.png" alt="">
</span>
<span class="imgs1">
<img src="imgs/rennav.png" alt="">
<p class="hop1">好友</p>
</span>
<span class="imgs1">
<img src="imgs/zhuanav.png" alt="">
<p class="hop2">小组</p>
</span>
</div>
<div class="elsenav">
<div ><input type="text" placeholder=" 搜索好友" class="searchtwo fontsearch"></div>
<div class="touliu"><div class="touxiang "><img src="imgs/touxiang.png" alt=""></div>
<p id="liu"> 刘花花</p></div>
<div class="elsefour">
<div class="imgs2"><img src="imgs/navone.png" alt=""></div>
<div class="imgs2"><img src="imgs/navtwo.png" alt=""></div>
<div class="imgs2 father">
<img src="imgs/navthree.png" alt="">
<div class="circle">   1</div>
</div>
<div class="imgs2"><img src="imgs/navfour.png" alt=""></div>
</div>
</div>
</div>
<div class="next">
<ul class="side1">
<li class="box"><img src="imgs/touxiang.png" alt="">
<a href="#"><span class="hezi">刘花花</span></a></li>
<li class="box"><img src="imgs/ren.png" alt="">
<a href="#"><span class="hezi">搜索好友</span></a></li>
<li class="box"><img src="imgs/f.png" alt="">
<a href="#"> <span class="hezi">欢迎来到Facebook</span></a></li>
<li class="box"><img src="imgs/bofang.png" alt="">
<a href="#"></a><span class="hezi">Watch</span></a></li>
<li class="box"><img src="imgs/shizhong.png" alt="">
<a href="#"></a><span class="hezi">那年今天</span></a></li>
<li class="box"><img src="imgs/shoucang.png" alt="">
<a href="#"><span class="hezi">收藏夹</span></a> </li>
<li class="box"><img src="imgs/qizhi.png" alt="">
<a href="#"></a><span class="hezi">公共主页</span></a></li>
<li class="box"><img src="imgs/huodong.png" alt="">
<a href="#"> <span class="hezi">活动</span></a></li>
<li class="box"><img src="imgs/tibao.png" alt="">
<a href="#"> <span class="hezi">招聘求职</span></a></li>
<li class="box"><img src="imgs/dongtai.png" alt="">
<a href="#"></a><span class="hezi">最新动态</span></a></li>
<li class="box"><img src="imgs/zhankai.png" alt="">
<a href="#"></a><span class="hezi">展开</span></a></li>
<li class="bottom fontless">隐私权政策 服务条款 广告 Ad Choices Cookie<br>
更多 Facebook 2021</li>
</ul>
<div class="main">
<div class="one"><img src="imgs/jiahaoblue.png" alt="">
<span class="inline"> <p class="fontdeep">创建快拍</p>分享照片或文字。</span></div>
<div class="two">
<div class="f"><img src="imgs/f.png" alt="" class="f"></div>
<div class="facebook"><img src="imgs/facebook.png" alt="" class="facebook"></div>
<div class="closeone"><img src="imgs/closeone.png" alt=""></div>
<div class="other"><p class="fontdeep memory">记住密码</p>
<div class="emm">下次使用这个浏览器登录时,只需点击头像即可,无需输入密码。</div>
<div>
<input type="submit" value="确定" class="btn sure">
<input type="reset" value="以后再说" class="btn later">
</div>
</div>
</div>
<div class="three">
<div class="huahua"><img src="imgs/touxiang.png" alt="" class="touxiang">
<input type="text" class="share" placeholder="刘花花,分享你的新鲜事吧!">
</div>
<div class="third">
<span class="kong" ><img src="imgs/zhibo.png" >直播视频</span>
<span class="kong"><img src="imgs/zhaopian.png">照片\视频</span>
<span class="kong"><img src="imgs/ganshou.png">感受/活动</span>
</div>
</div>
<div class="four">
<div class="f"><img src="imgs/f.png" alt=""></div>
<div class="huaxiang"><img src="imgs/huaxiang.png" alt=""></div>
<div class="closetwo"><img src="imgs/closetwo.png" alt=""></div>
<p class="fontdeep ba">实时互动好帮手,Messenger聊天室</p>
<div class="bala">刘花花,我们理解你在与亲友两地相隔时,那种无比渴望沟通的心情。Messenger新推出<br>
了便捷聊天室功能,让你与家人好友在线欢聚,实时保持联系。</div>
<div>
<input type="submit" value="详细了解" class="btn more">
<input type="submit" value="创建聊天室" class="btn build">
</div>
</div>
</div>
<div class="side2">
<p class="fontnodeep qunliao">群聊</p>
<div class="talk"><img src="imgs/jiahao.png" alt="">
<p class="hezi2 fontdeep">新建群聊</p></div>
<div class="write"><img src="imgs/write.png" alt=""></div>
</div>
</div>
</div>
</body>
</html>
css部分:
*{
margin: 0px;
padding: 0px;
}
img{border: none;}
ul,li{list-style: none;}
a{text-decoration: none;}
.clearfix:after{
content: "";
height: 0px;
line-height: 0px;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1;
}
.container{
background-color: #f2f3f7;
}
.nav{
position: fixed;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
height: 60px;
background-color: #ffffff;
box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
z-index: 1;
}
.fsnav{
display: flex;
}
.f img{
width: 50px;
}
.searchone{
position: relative;
top: 5px;
width: 220px;
margin-left: 10px;
height: 38px;
border-radius: 50px;
background-color:#f2f3f7 ;
}
.input{
position: absolute;
top: 12px;
left: 30px;
outline: none;
border: 0px;
background-color: #f2f3f7;
}
.imgsearch{
width: 15px;
top: 0px;
left: 50px;
}
.searchtwo{
width: 90px;
height: 38px;
background-color: #f2f3f7;
border-radius: 25px;
border: 1px solid #f2f3f7;
outline: none;
top: 0px;
}
.searchtwo:hover{
background-color: #cbccd1;
}
.fontsearch{
font-size: 16px;
color: #000000;
}
.mainnav{
display: flex;
justify-content: space-between;
width: 390px;
}
.elsenav{
display: flex;
width: 530px;
justify-content: space-around;
align-items: center;
}
.elsefour{
display: flex;
justify-content: space-around;
width: 250px;
}
#liu{
font-weight: 600;
line-height: 60px;
position: absolute;
right: 300px;
top: 3px;
}
.touxiang img{
width: 40px;
}
.touxiang{
position:absolute ;
top: 10px;
right: 350px;
}
.touliu{
display:flex;
width: 100px;
}
.touliu:hover{
background-color: #e5e6eb;
border-radius: 20px;
height: 60px;
}
.home{
border-bottom: 3px solid #1c74ef;
}
.elsefour{
display: flex;
}
.imgs1 img{
width: 50px;
}
.imgs2 img{
width: 50px;
}
.father{
position: relative;
}
.imgs1:hover{
border-bottom: 3px solid #1c74ef;
}
.hop1,.hop2{
width: 64px;
height: 24px;
background-color: rgba(52,52,52,1);
color: white;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
font-weight: 100;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
display: none;
text-align: center;
}
.imgs1:hover .hop2{
display: block;
position: absolute;
top: 80px;
left: 780px;
}
.imgs1:hover .hop1{
display: block;
position: absolute;
top: 80px;
left: 610px;
}
.circle{
position: absolute;
background-color:#f0264c ;
color: white;
width: 22px;
height: 22px;
border-radius: 50%;
top: -4px;
right: -4px;
}
.next .side1{
width: 350px;
padding-left: 30px;
height: 1000px;
background-color:#f2f3f7;
position: relative;
}
.container .next{
width: 100%;
height: 1000px;
display: flex;
flex-wrap: nowrap;
/* padding-left: 35px; */
padding-top: 70px;
}
.main .one .inline{
display: inline-block;
padding-left: 20px;
}
.side1 .box{
position: relative;
width: 350px;
height: 70px;
}
.side1 .box .hezi{
position: absolute;
left: 80px;
top: 20px;
color: black;
}
.side1 .box img{
width: 50px;
}
.side1 .box:hover{
background-color: #e5e6eb;
border-radius: 20px;
}
.next .main{
width: 700px;
height: 1000px;
background-color: #f2f3f7;
}
.main .one{
width: 720px;
height: 60px;
background-color: #ffffff;
border-radius: 10px;
margin: 10px 0;
}
.main .one:hover{
background-color: #e5e6eb;
}
.main .two .f{
position: absolute;
top: 10px;
left: 5px;
}
.two .facebook img{
width: 150px;
}
.main .three .touxiang{
position: absolute;
left: 5px;
top: 5px;
}
.main .three .share{
position: absolute;
left: 80px;
top: 20px;
}
.main .three .third{
position: absolute;
top: 90px;
left: 80px;
}
.main .three .third .kong{
padding-left: 40px;
}
.three .third .kong:hover{
background-color: #e5e6eb;
}
.fontdeep{
font-weight: 900;
font-size: 20px;
}
.two .facebook{
position: absolute;
top: 90px;
left: 150px;
}
.two .other{
position: relative;
top: 150px;
left: 20px;
}
.other .memory{
position: absolute;
left: 0px;
}
.other .sure{
position: absolute;
bottom: -95px;
left: 0px;
}
.other .emm{
position: absolute;
top: 30px;
left: 0px;
}
.other .later{
position: absolute;
right: 55px;
bottom: -95px;
}
.main .two{
width: 720px;
height: 270px;
position: relative;
background-color: #ffffff;
border-radius: 10px;
padding-bottom: 20px;
text-align: center;
}
.main .two .facebook{
text-align: center;
top: 5px;
}
.two .closeone{
position: absolute;
right: 20px;
top: 15px;
}
.closeone img{
width: 20px;
}
.btn{
width: 320px;
height: 30px;
background-color: #e5e6eb;
border: #e5e6eb;
}
.fontless{
color: grey;
font-size: 14px;
}
.btn:hover{
background-color:#e7f4fd ;
color:#3d76ce ;
}
.main .three {
position: relative;
width: 720px;
height: 150px;
background-color: #ffffff;
border-radius: 10px;
margin-top: 10px;
}
.three .huahua{
height: 80px;
border-bottom: 1px solid #e5e6eb ;
}
.kong img{
vertical-align: middle;
}
.three .share{
width: 600px;
height: 30px;
border-radius: 5px;
background-color: #e5e6eb;
border: #e5e6eb;
}
.three .third{
display: flex;
justify-content: space-around;
}
.main .four{
width: 720px;
height: 460px;
background-color: #ffffff;
border-radius: 10px;
margin-top: 10px;
}
.four{
position: relative;
}
.closetwo img{
width: 35px;
}
.four .closetwo{
position: absolute;
top: 10px;
right: 20px;
}
.four .ba{
position: absolute;
top: 280px;
left: 180px;
}
.four .bala{
position: absolute;
top: 310px;
left: 5px;
text-align: center;
}
.four .huaxiang{
position: absolute;
left: 100px;
top: 20px;
}
.four .huaxiang img{
width: 460px;
}
.four .more{
position: absolute;
bottom: 50px;
left: 15px;
}
.four .build{
position: absolute;
bottom: 50px;
right: 25px;
}
.four .btn{
padding-left: 10px;
}
.next .side2{
background-color: #f2f3f7;
width: 280px;
height: 1000px;
position: relative;
/* vertical-align: middle; */
}
.side1 .bottom{
position: absolute;
bottom: 20px;
left: 20px;
}
.fontnodeep{
color: #909195;
font-size: 22px;
}
.qunliao{
position: absolute;
top: 0px;
left: 100px;
}
.talk{
width: 300px;
height: 75px;
position: absolute;
top: 30px;
left: 100px;
}
.talk:hover{
background-color: #e5e6eb;
}
.hezi2{
position: absolute;
right: 120px;
top: 15px;
}
.write{
position: fixed;
bottom: 0px;
right: 0px;
}
.write img{
width: 70px;
}