前端_花瓣网项目
Posted 咸鱼加辣
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端_花瓣网项目相关的知识，希望对你有一定的参考价值。
这里使用的工具是vscode
仿照的效果如图：
步骤如下：
第一步从静态页面开始:
静态页面制作步骤从上到下，一个模块一个模块开始
头部开始：
头部的静态html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>花瓣网</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="page" class="page">
<!--头部-->
<header id="header" class="header">
<div id="header_in" class="header-in">
<div class="header-left">
<ul>
<li class="logo-pic">
<h1><a href=""></a></h1>
</li>
<li><a href="">发现</a></li>
<li><a href="">最新</a></li>
<li><a href="">美思</a></li>
<li><a href="">活动<span class="new">new</span></a></li>
<li><a href="">教育</a></li>
<li><a href="">...</a></li>
</ul>
</div>
<div class="header-center">
<input id="query" name="query" size="27" type="text" placeholder="搜索你喜欢的" value="">
</div>
<div class="header-right">
<a href="javascript:;" class="register" id="register">
<span class="text">注册</span>
</a>
<a href="#" class="login" id="login">
<span class="text">登录</span>
</a>
</a>
</div>
</div>
</header>
</div>
</section>
</body>
</html>
效果图
剩下的两部分静态页面和css样式的步骤和头部的方法差不多，细节不全部展示出来。更详细的步骤放在幕布软件里（包括js交互效果步骤）——打开链接
幕布链接
此界面涉及的js交互有
1、瀑布流。
2、点击图片显示出蒙版。
3、点击按钮页面交替
4、广告轮播
5、吸顶效果
代码源码从百度网盘获
链接：https://pan.baidu.com/s/1Jb9n4WUF-lTf9BycoVhwUg
提取码：6666
–来自百度网盘超级会员V3的分享
以上是关于前端_花瓣网项目的主要内容，如果未能解决你的问题，请参考以下文章