前端静态facebook网页制作

最新推荐文章于 2022-02-24 17:43:09 发布
最新推荐文章于 2022-02-24 17:43:09 发布
阅读量729 收藏
点赞数 1
分类专栏： 前端入门练习 文章标签： 前端 facebook html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62414003/article/details/121443161
版权 

<!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"> &nbsp 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;
}

希矣a
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用flex布局的前端静态网页.zip
10-21
使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip
52个超级漂亮的免费的html/css模板下载
weixin_30687051的博客
11-15 2487
今天分享给大家一些美丽的和有吸引力免费的HTML和CSS网站模板。这些模板有不同的布局和设计,看起来总是那么的具有吸引力。如果你正在为你的项目设计，你可以参考一下，　　　 1) Free Website Template- Web Design Studio 免费下载 2) Free CSS Templates – Buzz 免费下载 3) Free CSS Templates ...
设计和编码集成的Facebook应用程序：HTML + CSS
Web design 教程小屋
06-23 399
欢迎回来！ 在本教程的这一部分中，我们将把我们的设计编码为HTML，并说明一些FacebookCSS样式属性，这些属性将使它具有原生的感觉。 所以，请坚持我，让自己喝杯茶，享受快乐的编码！ 介绍 欢迎来到我们设计的第2部分，并对本机Facebook应用进行编码。 在上一篇文章中，我们在幕后回顾了创建本地外观Facebook应用程序涉及的一些思维过程。 尽管我们没有在Photoshop中...
三个步骤教你使用CSS绘制Facebook图标
前端仙人的博客
12-08 848
CSS能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。添加一个宽度和高度，你将拥有所需的确切大小的矩形。添加border-radius，你可以对该形状进行倒圆，并且足够多的形状可以将这些矩形变成圆形和椭圆形。 我们还在CSS中获得了::before和::after伪元素，这使我们有可能再添加两个形状到原始元素中。通过巧妙地定位，变换和许多其他技巧，我们只需一个HTML元素即可在CSS中制作许多形状。 在本教程中，我将向你展示如何使用纯CSS创建Facebook图标。在开始之前，我假设你可以创
为新的Facebook.com重建我们的技术栈
web前端开发
05-11 9515
英文 |https://engineering.fb.com/web/facebook-redesign/译文 | https://www.yuque.com/docs/share/6...
前端接入facebook jsSDK，实现登录授权功能
技术前端，忠于热爱 @回忆哆啦没有A梦
02-24 6557
前端网页接入facebook登录、登出功能；vue的facebook 部分功能实现逻辑
大学生静态网页设计期末作业源码前端静态网页大作业源码.zip
06-18
大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js 代码，期末作业必过，高分必备。 大学生静态网页设计期末作业源码前端静态网页大作业源码，使用的是原生的 html，css，js ...
静态网页制作课程设计
01-07
包含首页以及商城源代码，一共两千多行，欢迎下载一起交流
大学生Web前端静态网页设计期末大作业（高分必看）.zip
06-09
大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业（高分必看）大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页...
PC静态网页制作总结.md
08-17
PC端静态网站制作过过程，一些小总结
facebook注册工具_Facebook工具提示HTML和CSS
culuo8053的博客
07-31 161
facebook注册工具 Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to...
HTML5如何使用SVG
热门推荐
聚风阁
01-05 4万+
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情...
社区讨论：Facebook反思HTML5技术
cpongo5
10-14 126
最近，Facebook掌门人扎克伯格表示，Facebook在过去几年中的最大错误在于对HTML5押注过多，忽视了原生应用，同时他对HTML5的长期趋势依然看好。针对扎克伯格的言论，国内开发社区对此展开了广泛的讨论，其中不乏真知灼见。\张克军认为HTML5非常适合移动互联网，但是Facebook的用户量太大，难以支持各种移动设备：\\HTML5用于移动互联网的解决方案无疑是最理想的，但问题在于当前...
html制作免费体验登录页面,Html制作简单而漂亮的登录页面
weixin_35171603的博客
06-03 5024
先来看看样子。html源码：LoginLogin登录css代码：html{width: %;height: %;overflow: hidden;font-style: sans-serif;}body{width: %;height: %;font-family: 'Open Sans',sans-serif;margin: ;background-color: #4A374A;}#login{...
Facebook引发的HTML5危机
编程猫的专栏
08-31 1265
Facebook引发的HTML5危机 2012-8-31 09:53| 发布者: html5cn |来自: donews| 评论: 0 摘要: Facebook的iOS放弃HTML5。幸灾乐祸也好，沮丧也罢。变的只是一个应用，HTML5的势头和趋势不是一个企业可以逆转的。         这个原生版本是由一个独立的团队开发，产品经理
web网页动态分享facebook和twitter
陈灬大灬海
07-08 7079
介绍 facebook分享 http://www.facebook.com/sharer.php?t=${text}u=encodeURIComponent('静态html') twitter分享 https://twitter.com/share?text=${text}&url=静态html 原理，通过调用第三方的分享地址，第三方回调你传的url，解析里面的meta信息，来显......
html、js实现facebook、twitter分享
xiaobing_hope的专栏
12-24 1万+
html、js实现facebook、twitter分享 分享到facebook: href="http://www.facebook.com/share.php?u=" onclick="fbs_share" target="_blank">class="facebook"> 分享到twitter： href="javascript:void(window.open('ht
前端使用facebook login SDK
eno的博客
09-07 5754
前端使用facebook login SDK 因为项目中需要使用facebook账号的第三方登录, 所以看了一下facebook的开发文档 一开始以为可以直接引入那个facebook JS SDK的js文件就可以 结果引入之后报错, 因为那份js文件使用了with语句, 而ES5的严格模式是不支持的 然后看了一下可以使用js动态引入 第一步, 引入登录SDK (function(d, s, i...
html静态音乐网页制作
最新发布
09-21
HTML静态音乐网页制作可以通过以下几个步骤来完成： 1. 创建HTML文件：首先，创建一个新的HTML文件，并将其命名为你想要的名称。 2. 链接CSS和JS文件：在HTML文件的标签中，使用标签和标签来链接你的CSS和JS文件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值