前端_花瓣网项目

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的分享

以上是关于前端_花瓣网项目的主要内容,如果未能解决你的问题,请参考以下文章

MD版的花瓣网应用源码

免费直播 | Node.JS实战:爬虫抓取花瓣网图片饥人谷

周五免费直播 | Node.JS实战:爬虫抓取花瓣网图片饥人谷

吴忠军花瓣网主页

perl爬虫01-花瓣网相册

python爬取花瓣网任意面板图片