前端_花瓣网项目

咸鱼加辣

已于 2022-03-21 14:37:52 修改

阅读量1.3k

点赞数 5

分类专栏：笔记文章标签： javascript

于 2022-03-21 14:32:11 首次发布

本文链接：https://blog.csdn.net/qq_44808875/article/details/123631880

版权

笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这里使用的工具是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的分享

咸鱼加辣

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端_花瓣网项目

这里使用的工具是vscode仿照的效果如图：步骤如下：第一步从静态页面开始:静态页面制作步骤从上到下，一个模块一个模块开始头部开始：头部的静态HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>花瓣网</title> <link rel="stylesheet" href="css/inde
复制链接

扫一扫