前端项目实战：网易云静态页面——导航栏

最新推荐文章于 2024-03-20 14:14:24 发布
最新推荐文章于 2024-03-20 14:14:24 发布
阅读量3.2k 收藏 37
点赞数 6
分类专栏： 前端项目学习 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62917800/article/details/130266466
版权

文章目录

一、实现目标

在这里插入图片描述
建立如下图所示文件夹及文件：
在这里插入图片描述

index_test.html是我们html的主要代码
basic.css是我们的细节样式
reset.css是重置样式（将某些个标签进行统一设置）
image用来存放我们要用的图片

image中的图片为：
在这里插入图片描述

整体框架：

<!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>网易云导航栏</title>
    <link rel="stylesheet" href="./css_test/basic.css">
    <link rel="stylesheet" href="./css_test/reset.css">
</head>
<body>
    <div class="top">
        <div class="topbar">
            <div class="top-left"></div>
            <div class="top-right"></div>
        </div>
    </div>
    <div class="bottom"></div>
</body>
</html>

top用来实现导航栏顶部，topbar是用来实现top里的内容，bottom用来实现导航栏底部，top-left用来实现顶部左边部分内容，top-right用来实现顶部右边内容部分。

二、顶部实现（背景为黑色部分）

1. 内容布局

/* basic */
.top {
    height: 70px;
    background-color: #242424;
    /* 源代码中应该还有一个1px的边框，所以height应该是69px，这里直接用border-box把边框的长度算在height里 */
    box-sizing: border-box;
    border-bottom: 1px solid #000;
}

.topbar {
    width: 1100px;
    height: 69px;
    /* 设置行高，让topbar的子元素继承行高，进而让其子元素内容垂直居中 */
    line-height: 69px;
    margin: 0 auto;
    background-color: antiquewhite;
}

页面如下：
在这里插入图片描述
在top-left和top-right中分别加入文字left、right，然后设置topbar为浮动布局，让left和right在一行排列，并且根据浮动布局的特性让它们分别处于内容的左右两端。

/* basic */
.topbar {
    /* 浮动布局 */
    display: flex;
    /* 让left和right分别处于内容的左右端 */
    justify-content: space-between;
    width: 1100px;
    height: 69px;
    /* 设置行高，让topbar的子元素继承行高，进而让其子元素内容垂直居中 */
    line-height: 69px;
    margin: 0 auto;
    background-color: antiquewhite;
}

页面如下：
在这里插入图片描述
至此，内容布局完成，下面来做网易云logo。

2. 左边部分

网易云logo

更改html代码：

            <div class="top-left">
                <h1 class="logo">
                    <a href="#">网易云音乐</a>
                </h1>
            </div>

重置h1，a属性：

/* reset */
body,h1{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: #000;
}

网页如下：
在这里插入图片描述

原网页中这个logo并没有文字，它是一张图片。所以添加如下代码使文字消失

/* basic */
.topbar .top-left .logo a{
    /* 将a变为块级元素，因为text-indent对行内元素无效 */
    display: block;
    text-indent: -9999px;
}

下面我们将logo标志作为logo元素的背景：

/* basic */
.topbar .top-left .logo{
    background-image: url(../images/topbar.png);
    /* 前面我们也看到了这个logo是那张图里的一部分，所以我们需要确定logo这部分图片的位置
    以及它的宽度来获取这部分图片而不参杂图片中的其他成分*/
    width: 157px;
}

同时删除topbar的背景色，页面如下：
在这里插入图片描述

左边的列表

更改html中的内容

                <h1 class="logo">
                    <a href="#">网易云音乐</a>
                </h1>
                <ul class="list">
                    <li><a href="#" class="item">发现音乐</a></li>
                    <li><a href="#" class="item">我的音乐</a></li>
                    <li><a href="#" class="item">关注</a></li>
                    <li><a href="#" class="item">商城</a></li>
                    <li><a href="#" class="item">音乐人</a></li>
                    <li><a href="#" class="item">下载客户端</a></li>
                </ul>

重置ul、li

/* reset */
body,h1,ul,li{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    color: #000;
}

li{
    list-style: none;
}

继续添加样式：

/* basic */
.topbar .top-left{
    /* 浮动布局，让logo和列表排列在同一行上 */
    display: flex;
}

.topbar .top-left .list{
    /* 浮动布局，让list的每个li排列在同一行上 */
    display: flex;
}

.topbar .top-left .list .item{
    color: #ccc;
    /* 每个a的文本内容距离a的左右边框20px */ 
    padding: 0 20px;
}

此时页面如下：
在这里插入图片描述
此时发现logo与列表靠的太近了，修改一下：

.topbar .top-left .list{
    /* 浮动布局，让list的每个li排列在同一行上 */
    display: flex;
    padding-left: 20px;
}

页面如下：
在这里插入图片描述

列表元素高亮

可以看到在原网页中，当鼠标移动到“发现音乐”、“我的音乐”等上时背景颜色变暗，字体变白。且就算不移动到上面，也有一个元素是高亮的，不过那要用到js，这里就简单地做一个静态的。

                <ul class="list">
                    <li><a href="#" class="item active">发现音乐</a></li>
                    <li><a href="#" class="item">我的音乐</a></li>
                    <li><a href="#" class="item">关注</a></li>
                    <li><a href="#" class="item">商城</a></li>
                    <li><a href="#" class="item">音乐人</a></li>
                    <li><a href="#" class="item">下载客户端</a></li>
                </ul>

/* basic */
.topbar .top-left .list .item:hover,
.topbar .top-left .list .item.active{
    color: #fff;
    background-color: #000;
}

页面如下：在这里插入图片描述
可以看到每个列表元素的背景只有那么一点高度，这是因为我们我们设置文字颜色和背景颜色样式都是在a标签里的，而a标签是一个行内元素，不能设置宽高，所以背景的高度是由其内的文字撑起来的，这里我们将其转换成块级元素，继承父元素的高度即可。

/* basic */
.topbar .top-left .list .item{
    color: #ccc;
    /* 每个a的文本内容距离a的左右边框20px */ 
    padding: 0 20px;
    display: block;
}

页面如下：
在这里插入图片描述

指向每个列表元素的小红色三角

/* basic */
.topbar .top-left .list .item{
    color: #ccc;
    /* 每个a的文本内容距离a的左右边框20px */ 
    padding: 0 20px;
    display: block;
    /* 限制红色小三角的移动空间 */
    position: relative;
}

.topbar .top-left .list .item.active::after{
    content: "";
    position: absolute;
    background: url(../images/topbar.png) -226px 0;
    /* 引入图片后一定要设置宽高，不然图标无法显示出来 */
    width: 12px;
    height: 7px;
    /* 居中 */
    left: 0;
    right: 0;
    margin: auto;
    /* 让红色小三角从top的底部往下移一点点*/
}

页面如下：
在这里插入图片描述

“下载客户端”后的hot标志

                <ul class="list">
                    <li><a href="#" class="item active">发现音乐</a></li>
                    <li><a href="#" class="item">我的音乐</a></li>
                    <li><a href="#" class="item">关注</a></li>
                    <li><a href="#" class="item">商城</a></li>
                    <li><a href="#" class="item">音乐人</a></li>
                    <li><a href="#" class="item icon-hot">下载客户端</a></li>
                </ul>

.topbar .top-left .list .icon-hot::after{
    content: "";
    position: absolute;
    background: url(../images/topbar.png) -190px 0;
    width: 28px;
    height: 19px;
    /* 到这里上面已经出现了hot标志，下面进行偏移调整到合适的位置 */
    top: 21px;
    left: 100px;
    /* 到这里时，hot标志太靠近“下载客户端了”，调整一下间距 */
    margin-left: 10px;
}

页面如下：
在这里插入图片描述
到这里topbar的左边内容部分就完成了。

3. 右边部分

    <div class="top">
        <div class="topbar">
            <div class="top-left">
                <h1 class="logo">
                    <a href="#">网易云音乐</a>
                </h1>
                <ul class="list">
                    <li><a href="#" class="item active">发现音乐</a></li>
                    <li><a href="#" class="item">我的音乐</a></li>
                    <li><a href="#" class="item">关注</a></li>
                    <li><a href="#" class="item">商城</a></li>
                    <li><a href="#" class="item">音乐人</a></li>
                    <li><a href="#" class="item icon-hot">下载客户端</a></li>
                </ul>
            </div>
            <div class="top-right">
                <div class="search">搜索</div>
                <div class="author">创作者中心</div>
                <div class="login">登陆</div>
            </div>
        </div>
    </div>

此时页面如下：
在这里插入图片描述
下面添加css样式让三个div浮动到同一行排列

/* basic */
.topbar .top-right{
    display: flex;
    padding-right: 20px;
    font-size: 12px;
}

登陆

                <div class="login"><a href="#">登陆</a></div>

首先观察一眼原网页的“登陆”。

当我们鼠标进入“登陆”这个div时，颜色变亮，移动到“登陆”字体上时颜色又变浅且有下划线。

/* basic */
/* 登陆 */
.topbar .top-right .login a{
    color: #787878;
}

.topbar .top-right .login:hover a{
    color: #fff;
}

.topbar .top-right .login a:hover{
    color: #787878;
    text-decoration: underline;
}

页面如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

创作者中心

                <div class="author"><a href="#">创作者中心</a></div>

/* basic */
/* 创作者中心 */
.topbar .top-right .author a{
    /* 为了设置宽高，将a设置为块级元素 */
    display: block;
    box-sizing: border-box;
    color: #ccc;
    width: 90px;
    height: 32px;
    /* 调整三个div的间距 */
    margin: 0 20px;
    /* 边框 */
    border: 1px solid #4F4F4F;
    border-radius: 20px;
    /* 使文字跑到边框的中心处*/
    line-height: 32px;
    text-align: center;
}

/* 鼠标移动到创作者中心处文字和边框高亮 */
.topbar .top-right .author:hover a{
    color: #fff;
    border-color: #fff;
}

页面如下：在这里插入图片描述
此时发现这个创作者中心跑到上面去了，这是因为把a标设置为了块级元素的原因。

此时我们在bar-right里添加一行代码即可：

.topbar .top-right{
    display: flex;
    padding-right: 20px;
    font-size: 12px;
    /* 让其子元素居中 */
    align-items: center;
}

页面如下：
在这里插入图片描述

搜索

                <div class="search"><input type="text"></div>

/* reset */
input{
    outline: none;  
    border: none;
}

/* basic */
/* 搜索 */
.topbar .top-right .search{
    /* 让input输入框浮动到search椭圆框的中间 */
    display: flex;
    align-items: center;
    /* 让input输入框到search框的最后 */
    justify-content: flex-end;
    /* 此时input还有一点点在search外面，调整一下使其在search内部 */
    padding-right: 10px;
    /* 加入搜索图标后，图标有一部分被挡住了，在下面设置一下input框的长度 */
    background: url(../images/topbar.png) 0 -99px;
    /* search椭圆框基本设置 */
    width: 158px;
    height: 32px;
    border-radius: 30px;
    background-color: #fff;
}

.topbar .top-right .search input{
    width: 118px;
}

页面如下：
在这里插入图片描述
突然发现左边列表文字有点大了，调整一下：

.topbar .top-left .list{
    /* 浮动布局，让list的每个li排列在同一行上 */
    display: flex;
    padding-left: 20px;
    font-size: 12px;
}

/* 调整以后发现hot标志又离得远一些了，再调整一下left */

.topbar .top-left .list .icon-hot::after{
    content: "";
    position: absolute;
    background: url(../images/topbar.png) -190px 0;
    width: 28px;
    height: 19px;
    /* 到这里上面已经出现了hot标志，下面进行偏移调整到合适的位置 */
    top: 21px;
    left: 80px;
    /* 到这里时，hot标志太靠近“下载客户端了”，调整一下间距 */
    margin-left: 10px;
}

页面如下：
在这里插入图片描述
再填补一下搜索框的文字

                <div class="search"><input type="text" placeholder="音乐/视频/电台/用户"></div>

同时修改文字的大小

.topbar .top-right .search input{
    width: 118px;
    font-size: 12px;
}

页面如下：
在这里插入图片描述

三、底部实现（背景为红色部分）

    <div class="bottom">
        <div class="botbar">
            <ul class="list">
                <li><a href="#" class="item">推荐</a></li>
                <li><a href="#" class="item">排行榜</a></li>
                <li><a href="#" class="item">歌单</a></li>
                <li><a href="#" class="item">主播电台</a></li>
                <li><a href="#" class="item">歌手</a></li>
                <li><a href="#" class="item">新碟上架</a></li>
            </ul>
        </div>
    </div>

页面如下：
在这里插入图片描述
添加样式（这里我发现顶部左边列表文字又调小了0.0，自己又去.topbar .bar-left .list里改成了14px）。

/* basic */
/* bottom */
.bottom{
    /* 背景设置 */
    height: 35px;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
    box-sizing: border-box;
    /* 让子元素继承行高，使list元素中的文字居中 */
    line-height: 35px;
}

.botbar{
	/* 与顶部列表对齐*/
    padding-left: 183px;
    box-sizing: border-box;
    width: 1100px;
    margin: 0 auto;
}


.botbar .list{
    /* 让list子元素浮动到一行排列 */
    display: flex;
}

.botbar .list .item span{
    /* span是行内元素，不能设置宽高，将其转换为块级元素 */
    display: block;
    /* 调整间距 */
    padding: 0 13px;
    margin: 7px 17px;
    height: 20px;
    /* 居中 */
    line-height: 20px;
    color: #fff;
    font-size: 12px;
}

页面如下：
在这里插入图片描述
再来实现高亮部分：

            <ul class="list">
                <li><a href="#" class="item active"><span>推荐</span></a></li>
                <li><a href="#" class="item"><span>排行榜</span></a></li>
                <li><a href="#" class="item"><span>歌单</span></a></li>
                <li><a href="#" class="item"><span>主播电台</span></a></li>
                <li><a href="#" class="item"><span>歌手</span></a></li>
                <li><a href="#" class="item"><span>新碟上架</span></a></li>
            </ul>

同时将list子元素的边框改为圆角

.botbar .list .item span{
    /* span是行内元素，不能设置宽高，将其转换为块级元素 */
    display: block;
    /* 调整间距 */
    padding: 0 13px;
    margin: 7px 17px;
    height: 20px;
    /* 居中 */
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    border-radius: 21px;
}

.botbar .list .item:hover span,
.botbar .list .item.active span{
    background-color: #9B0909;
}

最终页面如下：
在这里插入图片描述
到这里网易云导航栏就制作完成啦！

有不足的地方还望大家多多指正

四、总代码

1. html

<!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>网易云导航栏</title>
    <link rel="stylesheet" href="./css_test/basic.css">
    <link rel="stylesheet" href="./css_test/reset.css">
</head>
<body>
    <div class="top">
        <div class="topbar">
            <div class="top-left">
                <h1 class="logo">
                    <a href="#">网易云音乐</a>
                </h1>
                <ul class="list">
                    <li><a href="#" class="item active">发现音乐</a></li>
                    <li><a href="#" class="item">我的音乐</a></li>
                    <li><a href="#" class="item">关注</a></li>
                    <li><a href="#" class="item">商城</a></li>
                    <li><a href="#" class="item">音乐人</a></li>
                    <li><a href="#" class="item icon-hot">下载客户端</a></li>
                </ul>
            </div>
            <div class="top-right">
                <div class="search"><input type="text" placeholder="音乐/视频/电台/用户"></div>
                <div class="author"><a href="#">创作者中心</a></div>
                <div class="login"><a href="#">登陆</a></div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="botbar">
            <ul class="list">
                <li><a href="#" class="item active"><span>推荐</span></a></li>
                <li><a href="#" class="item"><span>排行榜</span></a></li>
                <li><a href="#" class="item"><span>歌单</span></a></li>
                <li><a href="#" class="item"><span>主播电台</span></a></li>
                <li><a href="#" class="item"><span>歌手</span></a></li>
                <li><a href="#" class="item"><span>新碟上架</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

2. basic.css

/* basic */
.top {
    height: 70px;
    background-color: #242424;
    /* 源代码中应该还有一个1px的边框，所以height应该是69px，这里直接用border-box把边框的长度算在height里 */
    box-sizing: border-box;
    border-bottom: 1px solid #000;
}

.topbar {
    /* 浮动布局 */
    display: flex;
    /* 让left和right分别处于内容的左右端 */
    justify-content: space-between;
    width: 1100px;
    height: 69px;
    /* 设置行高，让topbar的子元素继承行高，进而让其子元素内容垂直居中 */
    line-height: 69px;
    margin: 0 auto;
}

.topbar .top-left .logo a{
    /* 将a变为块级元素，因为text-indent对行内元素无效 */
    display: block;
    text-indent: -9999px;
}

.topbar .top-left .logo{
    background-image: url(../images/topbar.png);
    width: 157px;
}

.topbar .top-left{
    /* 浮动布局，让logo和列表排列在同一行上 */
    display: flex;
}

.topbar .top-left .list{
    /* 浮动布局，让list的每个li排列在同一行上 */
    display: flex;
    padding-left: 20px;
    font-size: 14px;
}

.topbar .top-left .list .item{
    color: #ccc;
    /* 每个a的文本内容距离a的左右边框20px */ 
    padding: 0 20px;
    display: block;
    /* 限制红色小三角的移动空间 */
    position: relative;
}

.topbar .top-left .list .item:hover,
.topbar .top-left .list .item.active{
    color: #fff;
    background-color: #000;
}

.topbar .top-left .list .item.active::after{
    content: "";
    position: absolute;
    background: url(../images/topbar.png) -226px 0;
    /* 引入图片后一定要设置宽高，不然图标无法显示出来 */
    width: 12px;
    height: 7px;
    bottom: -2px;
    /* 居中 */
    left: 0;
    right: 0;
    margin: auto;
}

.topbar .top-left .list .icon-hot::after{
    content: "";
    position: absolute;
    background: url(../images/topbar.png) -190px 0;
    width: 28px;
    height: 19px;
    /* 到这里上面已经出现了hot标志，下面进行偏移调整到合适的位置 */
    top: 21px;
    left: 80px;
    /* 到这里时，hot标志太靠近“下载客户端了”，调整一下间距 */
    margin-left: 10px;
}

.topbar .top-right{
    display: flex;
    padding-right: 20px;
    font-size: 12px;
    /* 居中 */
    align-items: center;
}

/* 登陆 */
.topbar .top-right .login a{
    color: #787878;
}

.topbar .top-right .login:hover a{
    color: #fff;
}

.topbar .top-right .login a:hover{
    color: #787878;
    text-decoration: underline;
}

/* 创作者中心 */
.topbar .top-right .author a{
    /* 为了设置宽高，将a设置为块级元素 */
    display: block;
    box-sizing: border-box;
    color: #ccc;
    width: 90px;
    height: 32px;
    /* 调整三个div的间距 */
    margin: 0 20px;
    /* 边框 */
    border: 1px solid #4F4F4F;
    border-radius: 20px;
    /* 使文字跑到边框的中心处*/
    line-height: 32px;
    text-align: center;
}

/* 鼠标移动到创作者中心处文字和边框高亮 */
.topbar .top-right .author:hover a{
    color: #fff;
    border-color: #fff;
}

/* 搜索 */
.topbar .top-right .search{
    /* 让input输入框浮动到search椭圆框的中间 */
    display: flex;
    align-items: center;
    /* 让input输入框到search框的最后 */
    justify-content: flex-end;
    /* 此时input还有一点点在search外面，调整一下使其在search内部 */
    padding-right: 10px;
    /* 加入搜索图标后，图标有一部分被挡住了，在下面设置一下input框的长度 */
    background: url(../images/topbar.png) 0 -99px;
    /* search椭圆框基本设置 */
    width: 158px;
    height: 32px;
    border-radius: 30px;
    background-color: #fff;
}

.topbar .top-right .search input{
    width: 118px;
    font-size: 12px;
}

/* bottom */
.bottom{
    /* 背景设置 */
    height: 35px;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
    box-sizing: border-box;
    /* 让子元素继承行高，使list元素中的文字居中 */
    line-height: 35px;
}

.botbar{
	/* 与顶部列表对齐*/
    padding-left: 183px;
    box-sizing: border-box;
    width: 1100px;
    margin: 0 auto;
}


.botbar .list{
    /* 让list子元素浮动到一行排列 */
    display: flex;
}

.botbar .list .item span{
    /* span是行内元素，不能设置宽高，将其转换为块级元素 */
    display: block;
    /* 调整间距 */
    padding: 0 13px;
    margin: 7px 17px;
    height: 20px;
    /* 居中 */
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    border-radius: 21px;
}

.botbar .list .item:hover span,
.botbar .list .item.active span{
    background-color: #9B0909;
}

3. reset.css

body,h1,ul,li{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #000;
}

ul,li{
    list-style: none;
}

input{
    outline: none;
    border: none;
}
0202ohh
关注
  • 6
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端遇上Go:静态资源增量更新的新实践
01-27
美团金融的业务在过去的一段时间里发展非常快速。在业务增长的同时，我们也注意到，很多用户的支付环境，其实是在弱网环境中的。大家知道，前端能够服务用户的前提是JavaScript和CSS等静态资源能够正确加载。如果网络环境恶劣，那么我们的静态资源尺寸越大，用户下载失败的概率就越高。根据我们的数据统计，我们的业务中有2%的用户流失与资源加载有关。因此每次更新的代价越小、加载成功率越高，用户流失率也就会越低，从而就能够变相提高订单的转化率。作为一个发版频繁的业务，要降低发版的影响，可以做两方面优化：更高效地使用缓存，减少静态资源的重复下载。使用增量更新，降低单次发版时下发的内容尺寸。针对第一点
前端静态网页实战项目京东首页
静Yu的博客
12-03 4138
提供一个简单的静态网页实战项目制作京东首页
从零开始学WEB前端——HTML实战练习，推荐一个GitHub项目
m0_60452070的博客
03-20 789
项目 1描述项目 1项目 2描述项目 2。
iMall:iMall——web超市导航应用静态页面
05-08
可爱的 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
fanliwang.zip_前端HTML_前端静态页面
09-24
仿返利网源码分享（纯前端） 页面不多 纯静态html
黑马-前端-品优购项目-静态页面搭建
03-18
div+CSS搭建电商平台“品优购”网站的首页静态页面
Web前端开发-简单导航栏实例
05-17
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
前端实战：小实例1——导航栏
weixin_43328954的博客
05-24 3212
前言 一个导航栏可看作一个链接列表，在 HTML 使用 ul 标签和 li 标签元素进行结构表示，在 CSS 中进行样式处理，对应标签元素的具体用法可查看 HTML常见标签介绍。 实现思路 1. 使用 div 包装导航栏，用 ul 和 li 标签展示导航栏的基本模样 2. 在 li 标签设置子导航栏 ul 和 li，将子导航栏初始设为不可见（display : none） 3. 在 CSS 中设置伪类选择器，鼠标移入时子导航栏设为可见
花店电商的前端静态页面项目
08-05
花店电商的前端静态页面项目
static-nav:静态导航页面
08-04
只言片语 -- 静态导航主页 采用HTML+CSS+JQ开发的最简单的静态页面，搭配github pages或者是coding pages食用效果最佳！ JS放在keyword.js中，HTML+CSS太过简单，需要者自行修改即可！
前端----静态网页的实现
王 濤
03-18 743
学习了一个多月啦！终于到了检验成果的时候啦。下面的就是这次检测的 psd 原图 [本次项目的源文件密码xe4ua7（微云）] 经过几个小时的磨难，终于完成到了下面这种程度。如效果图： html代码如下 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <m...
基于HTML+CSS的静态网页设计仿网易云音乐静态页面95分以上项目源码.zip
02-05
基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。 基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。基于HTML+CSS的静态网页设计仿网易云音乐静态
Java Web应用开发：商品展示静态页面.docx
05-20
商品展示静态页面 1 目标 完成网站的商品展示页面静态效果，目标成果如下： 2 步骤 2.1 将common文件夹拷贝到pages文件夹中 将common文件夹拷贝到pages文件夹中。common文件夹中存放了网站的几个公共区域页面，包括顶端菜单、底部版权，左侧区域。它们会被多个页面包含。 head.jsp ：网站的顶端菜单 left.jsp：网站的左侧 statusBarNavigation.jsp：网站底部的版权信息 2.2. 创建商品展示页面showProducts.jsp (1) 在pages文件下创建product文件夹，用来存放和商品相关的页面。 (2) 右键点击product文件夹，new—JSP File，在product文件夹下创建showProducts.jsp页面，如下图所示，输入完毕，点击“Finish”。 完成后的工程部分结构和创建出的新页面内容如下： 2.3 showProducts.jsp页面布局设计 showProducts.jsp页面使用include技术将3个页面包含进来，将showProducts.jsp划分成下面的样子: head.jsp le
tencent.zip_www.6355AD25_前端_腾讯课堂_静态页面_静态页面项目
09-24
该项目是一个纯静态页面项目，仿照旧版腾讯课堂的布局尺寸，自己纯手工仿写，里面包含部分就是动画效果，有自己的代码实现逻辑。
PHP页面静态化——纯静态与伪静态用法详解
10-15
主要介绍了PHP页面静态化——纯静态与伪静态用法,结合实例形式分析了PHP页面静态化——纯静态与伪静态相关原理、实现方法与相关操作注意事项,需要的朋友可以参考下
酒店前端项目，JavaScript+css+html,静态网页，适用于大作业，上机任务 多页面Javaweb
03-18
酒店前端项目，JavaScript+css+html,静态网页，适用于大作业，上机任务 多页面Javaweb
html+css纯静态页面练习：仿网易云
08-24
包含网易云首页和网易云商城两个页面
前端静态页面小兔鲜项目.zip
最新发布
03-22
小兔鲜项目是一个在线蔬菜...以上是小兔鲜项目前端静态页面的基本功能，通过这些页面可以让用户方便地浏览和购买蔬菜水果。在开发过程中，我们需要注意页面的设计美观、用户体验友好，确保用户能够顺利完成购物流程。
Web前端静态页面.zip
05-11
只包涵前端静态页面，包括html，css和js，有一整套的页面，包括首页，搜索，订单，个人主页，商标，注册，登陆和秒杀团购页面等。
springboot项目实战前端页面
09-14
在实际的Spring Boot项目中，前端页面的开发通常采用前后端分离的方式。前端使用Vue.js框架进行开发，后端采用JSON报文的接口方式进行数据传输。 以下是一个实际的Spring Boot项目中前端页面开发的一般步骤： 1. 导入Vue组件库：引入饿了么的CSS和关键的JS文件。 2. 配置Spring Boot的静态资源：在Spring Boot的配置文件中配置静态资源路径，将前端页面所需的CSS、JS以及其他静态文件放置在指定目录下。 3. 编写HTML页面：根据项目需求，编写HTML页面的内容，包括页面的结构、样式和布局。 4. 引入Vue和其他JS文件：在HTML页面中引入Vue.js以及其他需要的JS文件，如axios.js，用于实现与后端接口的数据交互。 5. 编写页面的业务逻辑：在Vue实例中编写页面的业务逻辑，包括数据的获取、展示和交互的处理等。 6. 发送请求与接收数据：使用axios库发送HTTP请求与后端接口进行数据交互，将数据展示在页面上。 7. 处理页面事件方法：根据页面需求，编写事件方法来处理用户的点击、输入等操作，并实现相应的功能。 总结： 在Spring Boot项目中，实战前端页面的开发可以通过导入Vue组件库、配置静态资源、编写HTML页面、引入Vue和其他JS文件、编写页面的业务逻辑、发送请求与接收数据以及处理页面事件方法等步骤来完成。 参考文献： 文章目录中的相关内容 js文件的内容

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值