“花瓣网”首页静态页面(仅供参考)

代码块：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0px;padding: 0px;}body {text-align: center;}.header_top {width: 100%;height: 50px;position: relative;}.d1 {margin-right: -50px;}.logo1 {display: inline-block;position: absolute;margin-left: -80px;}.logo1 img {width: 60px;height: 30px;margin-top: 10px;}a {position: relative;display: inline-block;height: 41px;padding: 0px 5px;font-size: 14px;text-decoration: none;color: #000;line-height: 50px;}.header_input {display: inline-block;margin-left: 50px;}input {width: 450px;height: 30px;}.login {height: 30px;width: 40px;margin-left: 30px;background-color: red;color: #fff;}.rigister {height: 30px;width: 40px;margin-left: 10px;}.box1 {padding-top: 100px;width: 100%;height: 250px;background-size: 100% 100%;background-image: url(images/11.jpg);}.box2 {position: relative;width: 345px;height: 100px;color: #fff;margin: 0px auto;position: relative;line-height: 40px;}.line-though {display: flex;flex-direction: row;color: #fff;}.line-though:before,.line-though:after {content: "";flex: 1 1;border-bottom: 2px solid #fff;margin: 20px;}.images {width: 345px;height: 40px;margin: 30px auto;}.img1 {width: 50px;height: 50px;background-image: url(images/img1.jpg);border-radius: 50%;background-size: 100% 100%;float: left;margin-left: 10px;}.img2 {width: 50px;height: 50px;background-image: url(images/img2.jpg);border-radius: 50%;float: left;background-size: 100% 100%;margin-left: 18px;}.img3 {width: 50px;height: 50px;background-image: url(images/img3.jpg);border-radius: 50%;float: left;background-size: 100% 100%;margin-left: 18px;}.img4 {width: 50px;height: 50px;background-image: url(images/img4.jpg);border-radius: 50%;float: left;background-size: 100% 100%;margin-left: 18px;}.img5 {width: 50px;height: 50px;background-image: url(images/img5.jpg);border-radius: 50%;background-size: 100% 100%;float: left;background-size: 100% 100%;margin-left: 18px;}.more_find {width: 908px;height: 100px;margin: 0 auto;}/*修改中间部分的公共标题样式 */.find_title {width: 400px;color: gray;font-size: 18px;text-align: center;line-height: 20px;margin: 30px auto;}/* 标题前面的横线 */.find_title:before {content: "";width: 40%;height: 10px;border-bottom: 2px solid #ddd;float: left;}/* 标题后面的横线 */.find_title:after {content: "";width: 40%;height: 10px;border-bottom: 2px solid #ddd;float: right;}/* 中间部分的五个分类 */.content_icon {display: flex;justify-content: space-between;}.content_icon div {width: 17%;text-align: center;height: 80px;line-height: 80px;border-radius: 8px;color: #FFFFFF;font-size: 18px;background-size: 100% 100%;}.content_icon_one {background: url("images/icon1.jpg");}.content_icon_two {background: url("images/icon2.jpg");}.content_icon_three {background: url("images/icon3.jpg");}.content_icon_four {background: url("images/icon4.jpg");}.content_icon_five {background: url("images/icon5.jpg");}.content {width: 908px;height: 640px;margin: 0 auto;position: relative;}.content1 {position: relative;width: 908px;height: 280px;margin-top: 70px;float: left;}.p1 {position: relative;width: 140px;height: 236px;float: left;margin-left: 13.6px;}.p1 img {width: 140px;height: 180px;}.touxiang {position: absolute;width: 30px;height: 30px;}.touxiang img {border-radius: 50%;width: 30px;height: 30px;margin-top: 10px;margin-left: 2px;}span {position: a;font-size: 1px;display: inline-block;margin-top: 0px;}.s2 {color: red;}.title2 {position: absolute;margin-left: 31px;width: 110px;height: 30px;margin-top: 7px;}p {font-size: 1px;}#p1 {margin-left: 0px;}.content2 {position: relative;width: 908px;height: 280px;margin-top: 50px;float: left;}.yema{margin-top: 0px;color:silver;}#Footer {width: 100%;height: 210px;background-color: #000;padding-left: 275px;text-align: left;font-size: 12px;margin-top: 20px;}#Footer a {color: #fff;}#Footer div {float: left;margin: 20px 30px;}#footer_box1 {width: 100px;}#footer_box2 {width: 150px;}#footer_box3 {width: 150px;}#Footer div img {width: 80px;height: 80px;margin-top: 40px; }#Footer .p1 {margin-top: 75px;color: #fff;}</style>
</head><body><!-- 导航栏部分 --><div class="header_top"><div class="d1"><div class="logo1"><img src="data:images/01.png"></div><a href="#">发现</a></li><a href="#">最新</a></li><a href="#">美思</a></li><a href="#">活动</a></li><a href="#">教育</a></li><div class="header_input"><input type="text" placeholder="搜索你喜欢的内容" /></div><button class="login">注册 </button><button class="rigister">登录</button></div></div><!-- 导航栏下方背景图 --><div class="box1"><div class="box2"><h2>草莓</h2><p>草莓很好吃</p><p class="line-though"> 他们已关注 </p></div><!-- 头像部分 --><div class="images"><div class="img1"></div><div class="img2"></div><div class="img3"></div><div class="img4"></div><div class="img5"></div></div></div><!-- 更多发现部分 --><div class="more_find"><div class="find_title"><span>更多发现 </span></div><!-- 更多发现的内容 --><div class="content_icon"><div class="content_icon_one">草莓 </div><div class="content_icon_two">派对装饰 </div><div class="content_icon_three">雪</div><div class="content_icon_four">美食 </div><div class="content_icon_five">书架</div></div></div><!-- 内容部分 --><div class="content"><!-- 第一排内容部分 --><div class="content1"><div class="p1" id="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><!-- 第二排内容部分 --><div class="content2"><div class="p1" id="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div><div class="p1"><img src="data:images/04.png" alt=""><h4 class="black">草莓不新鲜啊</h4><div class="touxiang"><img src="data:images/05.jpg" alt=""></div><div class="title2"><span>来自</span><span class="s2">yingying</span><span>收藏</span><p>2020 11 12</p></div></div></div></div></div><!-- 页码 --><div class="yema"><h3>< 1&nbsp2   3   4   5 ></h3></div><!-- 放置底部的其他内容，居中 --><div id="Footer"><div id="footer_box1"><a>花瓣首页 </a><a>花瓣采集工具 </a><a>花瓣官方微博 </a></div><div id="footer_box2"><a>联系与合a作 </a><a>联系我们 </a><a>用户反馈 </a><a>花瓣LOGO标准文档 </a></div><div id="footer_box3"><a>移动客户端 </a><a>花瓣iPhone版 </a><a>花瓣Android版 </a><a>花瓣HD </a></div><div class="p1"><p>关注我们 <br>新浪微博@花瓣网 <br>官方QQ：66666666 </p></div><div><img src="data:images/erweima.png" alt=""></div></div>
</body></html>

实现效果：

“花瓣网”首页静态页面(仅供参考)相关推荐

DNS内网欺骗(仅供参考)
DNS内网欺骗(仅供参考) 下面展示一些内联代码片. //启动apche2 systemctl start apache2 在/var/www/html/目录下添加index.html访问页面 // ...
网络面经总结-仅供参考
网络面经总结-仅供参考 1 服务器如何判断客户端连接不上了 1.1 recv 1.2 服务器一段时间内没接收到客户端心跳包反馈 1.3 struct tcp_info info 1.4[保活参数](h ...
【学生请假系统——开题报告分享（仅供参考呀）】
目录一.研究目的和意义: 二.课题研究现状: 三.课题研究主要内容.实施方案及创新点: 四.课题进度安排: 五.主要参考文献:(仅供参考呀!) 一.研究目的和意义: 1.研究目的开发高校学生请假系 ...
关于springboot访问不到static里面的js文件解决方法（仅供参考）
关于springboot访问不到static里面的js文件解决方法(仅供参考) 遇到的问题 1.在html页面中引入jQuery文件后使用$符号会提示未被定义 2.静态资源无法访问解决方法 1.$符 ...
CSS入门。（仅供参考）
文档出处部分Coogle和<原创>,如有雷同纯属巧合 <仅供参考> 首先说明以下内容是本人自己整理(仅供参考!!!!!!!!) 首先浏览器我建议使用Google Chrome ...
如何有效防止DEDE织梦系统被挂木马安全设置（仅供参考）
尊敬的客户,您好! 感谢广大客户对我司工作的信任和支持! 我司在最近的一个多月内陆续发现多起因 DedeCMS 安全漏洞造成网站被上传恶意脚本的事件,入侵者可利用恶意脚本对外发送大量数据包,严重占用C ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
一些投资理财渠道（仅供参考）
风险提示:市场有风险,投资须谨慎. 郑重声明:本文纯属个人见解,仅供参考.万一赔钱或被骗,请不要把我送到派出所. 以下是我个人使用和关注的投资理财资金平台. 1.股权众筹 36Kr.京东东家.360淘 ...
海康威视web插件层级遮挡问题，仅供参考
关于海康威视web插件层级遮挡问题的解决方法,仅供参考,不包解决其实在开发包里的最关键的文件就是webVideoCtrl.js 我遇到的问题是因为embed标签的显示层高于div出现遮挡情况解决方 ...
中国高校与研究院所计算机学科分专业点评(本贴内容仅供参考！)
[2014/4/13:近5年来中科院系统经历了一些较大的变化,如人员流动,实验室更名等,以下部分内容未能因此更新,故可能失效甚至有较大误导,请大家自己注意辨别,有问题请向现任版主和中科院学生了解.时间 ...

“花瓣网”首页静态页面(仅供参考)

“花瓣网”首页静态页面(仅供参考)相关推荐

最新文章

热门文章