【QQ音乐Html + CSS静态笔记】

QQ音乐页面布局：HTML与CSS实践解析
原创 已于 2022-09-26 19:28:47 修改 · 3.8k 阅读 · 51 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #前端

于 2022-09-23 16:32:15 首次发布
这篇博客详细记录了QQ音乐导航页的HTML和CSS实现过程。首先分析页面结构，将内容分为多个div盒子进行布局，包括头部图片、左侧文字、横向排列的音乐馆、搜索框和右侧部分。接着，通过CSS调整元素位置，实现居中、背景色变化、文字颜色、悬浮效果和搜索框样式。最后，完成了底部的布局，并介绍了相应的CSS样式和HTML代码。
  1. 分析导航页 有5部分组成

 最大的<div>表示全头部  div表示盒子的意思

<div class="header"></div>

 第二个div表示上图的所有  表示一个div盒子将5部分装起来   

<div class="header">

    <div class="nav">
    </div>
</div>

我们将将1234放在一个盒子里面   分别做成不同的div盒子

<div class="header">
    <div class="nav">
        <div class="nav_t">
            
        </div>
    </div>
</div>

先加图片

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>
        </div>
    </div>
</div>

效果是这样的 

 明显图片的比例不太对  我们给class=nav的  div加上宽高   新建css文件 和html在同一个文件下

/*导航头部加宽高*/
.nav{
    width: 100%;
    height: 142px;
}
/*导航第一部分加效果*/
.nav .nav_t{
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #F2F2F2;
}

引入css样式 

在html的header里面添加

<link rel="stylesheet" href="header.css">

查看效果 据左上角  

 添加居中 离开坐标的效果

在css文件里面加

/*logo浮动居左  和左边间隔10像素*/
.nav .nav_t .logo{
    float: left;
    margin-left: 10px;

}
/*图片设置宽高  和距离上面的位置 左边的位置 */
.nav .nav_t .logo a img{
    display: block;
    width: 170px;
    height: 46px;
    padding-top: 22px;
    padding-left: 40px;

}

第二部分 左侧文字  看加的文字开始和结束 别全部抄

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>


<!--            左侧文字导航-->
            <div class="top_nav__item">
                <!--        导航条左边的列表-->
                <ul>
                    <!--class="current 加背景 加title -->
                    <li><a href="#" class="current" title ="音乐馆">音乐馆</a></li>
                    <li><a href="#" title="我的音乐">我的音乐</a></li>
                    <li><a href="#" title="客户端">客户端</a></li>
                    <li><a href="#" title="开放平台">开放平台</a></li>
                    <li><a href="#" title="VIP">VIP</a></li>
                </ul>
            </div>
<!--            左侧文字导航结束-->


        </div>
    </div>
</div>

 需要添加css样式排版

/*向左浮动 和上边距0px*/
.nav .nav_t .top_nav__item{
    float: left;
    overflow: hidden;
    margin-top: 0px;
}

 横向排列的css

/*去掉列表前面的 点 · 设置列表的宽高 */
.nav .nav_t .top_nav__item ul{
    list-style: none;
    margin-left: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 90px;
}
/*设置列表横向排列*/
.nav .nav_t .top_nav__item ul li{
    float: left;
}
/*设置列表间隔出来  颜色  字体大小  行高  */
.nav .nav_t .top_nav__item ul li a{
    display: block;
    padding: 0 19px;
    text-decoration: none;
    color: #333;
    font-size: 18px;
    line-height: 90px;
}

添加停留变色 效果

.nav .nav_t .top_nav__item ul li a:hover{
    color:#31c27c;
}

给音乐馆添加背景和文字颜色 

/*给音乐馆添加背景和文字颜色*/
.nav .nav_t .top_nav__item ul li .current{
    background-color: #31c27c;
    color:white;
}

但是会变成这样 

 所以我们添加悬停效果

/*添加浮动悬停效果*/
.nav .nav_t .top_nav__item ul li .current:hover{
    color: white;
}

搜索框 制作

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>
<!--            左侧文字导航-->
            <div class="top_nav__item">
                <!--        导航条左边的列表-->
                <ul>
                    <!--class="current 加背景 加title -->
                    <li><a href="#" class="current" title ="音乐馆">音乐馆</a></li>
                    <li><a href="#" title="我的音乐">我的音乐</a></li>
                    <li><a href="#" title="客户端">客户端</a></li>
                    <li><a href="#" title="开放平台">开放平台</a></li>
                    <li><a href="#" title="VIP">VIP</a></li>
                </ul>
            </div>
            

            <!--搜索框开始-->
            <div class="search">
                <input type="text" placeholder="  搜索音乐、MV、歌单、用户" />
            </div>
            <!--搜索框结束-->


        </div>
    </div>
</div>

添加样式

/*搜索框盒子div  靠在左侧导航栏的右边*/
.nav .nav_t .search{
    float: left;
    margin:26px 0 0 10px;
    border: 1px solid #F2F2F2;
    position: relative;
}

/*调整宽高 字体大小*/
.nav .nav_t .search input{
    width: 225px;
    height: 30px;
    font-size: 104px;
}

右边部分

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>
<!--            左侧文字导航-->
            <div class="top_nav__item">
                <!--        导航条左边的列表-->
                <ul>
                    <!--class="current 加背景 加title -->
                    <li><a href="#" class="current" title ="音乐馆">音乐馆</a></li>
                    <li><a href="#" title="我的音乐">我的音乐</a></li>
                    <li><a href="#" title="客户端">客户端</a></li>
                    <li><a href="#" title="开放平台">开放平台</a></li>
                    <li><a href="#" title="VIP">VIP</a></li>
                </ul>
            </div>
            <!--搜索框开始-->
            <div class="search">
                <input type="text" placeholder="  搜索音乐、MV、歌单、用户" />
            </div>
            <!--搜索框结束-->
            
            <!--导航右边开始-->
            <div class="header_buttons">
                <a href="#" class="sumbit">登录</a>
                <a href="#" class="start">开通VIP</a>
                <a href="#" class="pay">充值</a>
            </div>
            <!--导航右边结束-->

        </div>
    </div>
</div>

 添加样式  右对齐横向分布

/*使整个右边的div靠右 设置宽高*/
.nav .nav_t .header_buttons{
    width: 200px;
    height: 90px;
    float: right;
    position: relative;
    margin-right: 30px;
}

.nav .nav_t .header_buttons a{
    display: block;
    float: left;
    margin-top: 36px;
    text-decoration: none;
    color: #333;
    padding-right: 5px;
    font-size: 16px;
    margin-right: 20px;
}

添加文字的效果

/*登录添加白色  背景边框  保持一致 */
.nav .nav_t .header_buttons .start{
    width: 91px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0 9px;
    margin-left: 20px;
    border:1px solid #2caf6f;
    background-color: #2caf6f;
    color: white;
    border-radius: 3px;

}
/*开通vip的添加效果*/
.nav .nav_t .header_buttons .start{
    margin-top: 28px;
    width: 91px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0 9px;
    margin-left: 10px;
    border:1px solid #2caf6f;
    background-color: #2caf6f;
    color: white;
    border-radius: 3px;
}
/*充值添加效果*/
.nav .nav_t .header_buttons .pay{
    width: 35px;
    height: 36px;
    border:1px solid #ccc;
    padding: 0 9px;
    margin-top: 28px;
    margin-left: 0px;
    text-align: center;
    line-height: 36px;
    border-radius: 3px;
}

添加第五部分

<div class="header">
    <div class="nav">
        <div class="nav_t">
            <div class="logo">
                <a href="#"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="" /></a>
            </div>
<!--            左侧文字导航-->
            <div class="top_nav__item">
                <!--        导航条左边的列表-->
                <ul>
                    <!--class="current 加背景 加title -->
                    <li><a href="#" class="current" title ="音乐馆">音乐馆</a></li>
                    <li><a href="#" title="我的音乐">我的音乐</a></li>
                    <li><a href="#" title="客户端">客户端</a></li>
                    <li><a href="#" title="开放平台">开放平台</a></li>
                    <li><a href="#" title="VIP">VIP</a></li>
                </ul>
            </div>
            <!--搜索框开始-->
            <div class="search">
                <input type="text" placeholder="  搜索音乐、MV、歌单、用户" />
            </div>
            <!--搜索框结束-->

            <!--导航右边开始-->
            <div class="header_buttons">
                <a href="#" class="sumbit">登录</a>
                <a href="#" class="start">开通VIP</a>
                <a href="#" class="pay">充值</a>
            </div>
            <!--导航右边结束-->
        </div>

        <!--下边第五部分开始-->
        <div class="nav_b">
            <ul>
                <li>
                    <a class="current" href="#">首页</a>
                </li>
                <li>
                    <a href="#">专辑</a>
                </li>
                <li>
                    <a href="#">歌手</a>
                </li>
                <li>
                    <a href="#">排行榜</a>
                </li>
                <li>
                    <a href="#">分类歌单</a>
                </li>
                <li>
                    <a href="#">电台</a>
                </li>
                <li>
                    <a href="#">MV</a>
                </li>
                <li>
                    <a href="#">数字专辑</a>
                </li>
            </ul>
        </div>
        <!--第五部分结束-->
    </div>
</div>

添加效果

/*添加样式  宽高*/
.nav .nav_b{
    width: 1200px;
    height: 50px;
    align:center;
    margin: 0 auto ;
}
/*没有序号的样式 */
.nav .nav_b ul{
    list-style: none;

}
/*左对齐的浮动  变成一行*/
.nav .nav_b ul li{
    float: left;
    margin-right: 47px;
    line-height: 50px;
    text-align: center;
}
/*字体大小 颜色*/
.nav .nav_b ul li a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
}
/*特殊颜色*/
.nav .nav_b ul li .current{
    color:#31c27c ;
}
/*悬停颜色*/
.nav .nav_b li a:hover{
    color:#31c27c ;
}

添加中间部分

<div class="content"></div>

css 

/*添加中间div的背景颜色和宽高*/
.content{
    width: 100%;
    height: 550px;
    background-color: #fafafa;
    background-repeat: no-repeat;
    background-position: center top;
}
<div class="content">
    <div class="content">
        <div class="songSheet">
        </div>
    </div>
</div>
<div class="content">
    <div class="content">
        <div class="songSheet">
            
                <div class="songSheet_head">
					<span class="subtitle">歌  单  推  荐</span>
				</div>
        </div>
    </div>
</div>

css

/*设置表浮动*/
.content .songSheet{
    position: relative;
}
/*设置内容div的宽高*/
.content .songSheet .songSheet_head{
    width: 100%;
    height: 114px;
}
/*设置歌单推荐的文字和居中*/
.subtitle{
    display: block;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    width: 196px;
    height: 40px;
    padding-top: 47px;
    margin:0 auto;
}

html

//和歌单推荐平级    
                <div class="songSheet_table">
					<ul>
						<li>
							<a href="#" class="current">为你推荐</a>
						</li>
						<li>
							<a href="#">欧美榜单</a>
						</li>
						<li>
							<a href="#">国语</a>
						</li>
						<li>
							<a href="#">粤语精选</a>
						</li>	
						<li>
							<a href="#">00年代</a>
						</li>
						<li>
							<a href="#">纯音乐</a>
						</li>
					
					
					</ul>
				</div>

css

        //表格的高
        .content .songSheet .songSheet_table{
   			height: 50px;
			overflow: hidden;
		}
//列表的宽高  取消样式   居中  设置在字体大小
		.content .songSheet .songSheet_table ul{
			width: 650px;
			list-style: none;
			margin: 0 auto;
			font-size: 15px;

		}
//列表浮动
		.content .songSheet .songSheet_table ul li{
			float: left;
			margin: 0 24px;
		}
//a标签加效果
		.content .songSheet .songSheet_table ul li a{
			display: block;
			text-decoration: none;
			color: #333;
		}
//第一个a标签加颜色
		.content .songSheet .songSheet_table ul li .current{
			color: #31c27c;
		}
//超链接加效果
		.content .songSheet .songSheet_table ul li a:hover{
			color: #31c27c;

		}

html

//和上面平级  图片自己改
                <div class="songSheet_pics">
					<ul>
						<li>
							<img src="../pics/RS1.webp" alt="" class="songSheet_pic"/>
							<i class="mask"></i>
							<i class="cover_icon_play"></i>
						</li>
						<li>
							<img src="../pics/RS2.webp" alt="" class="songSheet_pic"/>
							<i class="mask"></i>
							<i class="cover_icon_play"></i>
						</li>
						<li>
							<img src="../pics/RS3.jpeg" alt="" class="songSheet_pic"/>
							<i class="mask"></i>
							<i class="cover_icon_play"></i>
						</li>
						<li>
							<img src="../pics/RS4.jpeg" alt="" class="songSheet_pic"/>
							<i class="mask"></i>
							<i class="cover_icon_play"></i>
						</li>
						<li>
							<img src="../pics/RS5.jpeg" alt="" class="songSheet_pic"/>
							<i class="mask"></i>
							<i class="cover_icon_play"></i>
						</li>

					</ul>

				</div>

css

/*添加宽高 */
.content .songSheet .songSheet_pics{
    width: auto;
    height: 224px;
    padding-bottom: 20px;
}
/*设置列表的样式无*/
.content .songSheet .songSheet_pics ul{
    list-style: none;

}
/*列表内容样式*/
.content .songSheet .songSheet_pics ul li{
    position: relative;
    width: 224px;
    height: 224px;
    float: left;
    margin-right:16px;
    border-radius: 2px;
    overflow: hidden;
}

/* 鼠标指向图片 显示播放按钮及放大动画的实现 */
.cover_icon_play {
    position: absolute;
    left: 112px;
    top: 112px;
    margin: -35px;
    width: 70px;
    height: 70px;
    filter: alpha(opacity=0);
    opacity: 0;
    transform: scale(.7) translateZ(0);
    transition-property: opacity, transform;
    transition-duration: .5s;
    zoom:1
}
/*图标飘移*/
.mask {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 224px;
    height: 224px;
    background-color: #000;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity .5s;
    transition:opacity .5s
}
/*设置提醒*/
.songSheet_pics ul li:hover .cover_icon_play {
    opacity: 0.9;
    transform: scale(1) translateZ(0);
    transition-property: opacity, transform;
    transition-duration: .5s;
    cursor:pointer
}
/*实现放在图上出现播放按钮*/
.songSheet_pics ul li:hover .cover_icon_play, .cover_icon_play {
    background-image: url(../pic/logo.png);
    background-repeat: no-repeat;
}
/*控制缩放*/
.songSheet_pics ul li:hover .songSheet_pic{
    transform: scale(1.06);
}

.songSheet_pics ul li:hover .cover_icon_play {
    opacity: 1;
    filter:none
}

.songSheet_pics ul li:hover .mask {
    opacity: .2;
    filter: alpha(opacity=20);
    transition: opacity .5s;
    transition:opacity .5s
}

/* 动画效果部分完结 */

.content .songSheet .songSheet_pics ul li img{
    width: 224px;
    height: 224px;
    transition: all 0.6s;
}

html

//平级

            <div class="songSheet_names">
					<ul>
						<li>
							<a href="">Live：林俊杰的那些神级现场</a>
							<span>播放量：1353万</span>
						</li>
						<li>
							<a href="">Ed sheeran | 冬日旋律</a>
							<span>播放量：441万</span>
						</li>
						<li>
							<a href="">蒸汽波 | 落日飞车</a>
							<span>播放量：13.6万</span>
						</li>
						<li>
							<a href="">吉他指弹：大师经典作品集</a>
							<span>播放量：13.5万</span>
						</li>
						<li>
							<a href="">2021年1月华语新歌推荐</a>
							<span>播放量：135.1万</span>
						</li>
					</ul>
				</div>

css

/*宽高*/
.content .songSheet .songSheet_names{
    width: auto;
    height: 76px;
    padding-bottom: 10px;
}
/*样式*/
.content .songSheet .songSheet_names ul{
    list-style: none;
    margin-left: 0px;
}
/*li横向展示*/
.content .songSheet .songSheet_names ul li{
    width: 224px;
    position: relative;
    float: left;
    font-size: 14px;
    font-weight: 400;
    margin-right: 16px;
}
/*超链接的展示*/
.content .songSheet .songSheet_names ul li a{
    display: block;
    text-decoration: none;
    color: #333;
    line-height: 22px;
}
/*超链接提示*/
.content .songSheet .songSheet_names ul li a:hover{
    color:#31c27c;
}
/*播放量span标签*/
.content .songSheet .songSheet_names ul li span{
    display: block;
    font-size: 14px;
    line-height: 21px;
    color: #999;
}

html

//平级   表示歌曲海报下的下面的两个点           和左右按键   
            <div class="songSheet_circles">
                <ol>
                    <li class="current"></li>
                    <li></li>
                </ol>
            </div>
            <div class="carrousel">
                <a href="#" class="leftBtn"> <img src="pic/qq.png"></a>
                <a href="#" class="rightBtn"><img src="pic/qq.png"></a>
            </div>

底部————————————————

<div id="b_div">
    <div id="b_t_div">
        <img src="5.jpg" >
    </div>
    <div id="b_b_div">
        <div id="b_b_l_div">
            <ul>
                <li>抵制不良游戏</li>
                <li>拒绝盗版游戏</li>
                <li>注意自我保护</li>
                <li>谨防受骗上当</li>
                <li>适度游戏益脑</li>
                <li>沉迷游戏伤身</li>
                <li>合理安排时间</li>
                <li>享受健康生活</li>
            </ul>
            <p>《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为  艺术创
                作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p>
        </div>
        <div id="b_b_r_div">
            <div id="b_b_r_t_div">
                <p>腾讯互动娱乐|服务条款|隐私保护指引|儿童隐私保护指引|腾讯游戏招聘|腾讯游戏客服|游戏列表|广告服务及商务合作</p>
                <p>COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED. 腾讯公司版权所有 网络游戏行业防沉迷自律公约</p>
            </div>
            <div id="b_b_r_b_div">
                <img id="img_2" src="https://game.gtimg.cn/images/js/2018foot/logo/gswj.png"><p>工商网监电子标识 |粤网文[2020]3396-195号|（署）网出证（粤）字第054号</p>
                <img id="img_3" src="https://game.gtimg.cn/images/js/2018foot/logo/icplogo.png"><p>文网游备字[2016]M-CSG 0059 号|新广出审[2017] 6712号|ISBN 978-7-7979-8408-9</p>
                <span>仿王者荣耀制作 肖行</span>
            </div>
        </div>
    </div>
</div>

css

#b_div{
    width: 1165px;
    height: 350px;
    margin-left: 150px;
    margin: 0 auto;
}
#b_t_div{
    width: 1165px;
    height: 80px;
    margin-bottom: 20px;
}
#b_b_div{
    display: inline-block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
#b_b_l_div{
    width: 510px;
    height: 200px;
    float: left;
}
#b_b_r_div{
    width: 500px;
    height: 200px;
    float: right;
}
#b_b_r_t_div{
    width: 630px;
    height: 80px;
}
#b_b_r_b_div{
    width: 630px;
    height: 80px;
    position: relative;
}
#b_b_l_div>ul{
    list-style-type: none;
    overflow: hidden;
}
#b_b_l_div>ul>li{
    width: 72px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: #6D6D6D;
    float: left;
    margin-top: 12px;
    margin-right: 12px;
}
#b_b_l_div>p{
    padding-left: 38px;
    color: #666666;
    font-size: 12px;
    margin-top: 6px;
}
#b_b_r_t_div>p{
    color: #646467;
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}
#b_b_r_b_div>p{
    display: block;
    margin-left: 15px;
    color: #646467;
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 12px;
    position: relative;
    top: 0;
}
#img_2{
    position: absolute;
    top:1px;
}
#img_3 {
    position: absolute;
}
#b_b_r_b_div>span{
    color: #666666;
    font-size: 12px;
    margin-top: 40px;
}

QQ音乐页面(纯HTML)
xiaozgm的博客
07-07 7483
QQ音乐项目
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
QQ音乐静态项目html源码
04-27
<div class="mod_index_tab"><a class="index_tab__item index_tab__item--current">为你推荐</a><a class="index_tab__item ">背景音乐</a><a class="index_tab__item ">情歌</a><a class="index_tab__item ">网络歌曲</a><a class="index_tab__item ">官方歌单</a><a class="index_tab__item ">经典</a></div>
每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery）
有没有料，进来看看就知道！
09-21 9170
自制系列二它来了。 如果在制作过程中有如何问题你都可以私信我，我会答复你的。 今天中秋节，首先祝大家中秋节快乐！ 因为没什么礼物送给大家，所以在这里给大家安利一份简易版QQ音乐的制作，过程很简单，每个人都能学会。 下面将是制作步骤了： 先建好目录如下： source文件夹里存放如下： 下面就是把代码复制到相应的目录中： QQ音乐播放器.html <!DOCTYPE html> <html> <head> &lt...
html网页制作 仿QQ音乐(HTML+CSS)
12-14 3168
加粗样式 📂文章目录二、✍️网站描述三、📚网站介绍四、💠网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货录) ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨‍🎓网站题目 🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。 二、✍️网站描述 🏷️HTML音乐网
【web课程设计】HTML+CSS仿QQ音乐网站
qq_38514921的博客
03-20 2130
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
HTML+CSS鲜花静态网页设计
HTML网页设计
08-07 3999
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
weixin_BJ050106的博客
08-20 1417
🐕 宠物网页设计 、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的...
仿QQ音乐(HTML+CSS)
qq_38514511的博客
04-04 435
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
HTML网页制作——仿QQ音乐(HTML+CSS)
最新发布
01-09 2248
📂文章目录二、✍️网站描述三、📚网站介绍四、💠网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 # 一、👨‍🎓网站题目 🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。 二、✍️网站描述 🏷️HTML音乐网页设计，采用D
QQ音乐首页
03-02
模仿qq音乐的首页，适合新手练手学习的源码，提高html5和css的编程熟练度
QQmusic.html
08-19
利用HBuilderX进行对QQ音乐界面的设计，此界面中参考QQ音乐界面的主要排列方式，充分运用div及盒子模型对整体界面进行布局，并用css对其进行美化样式，并利用脚本编写，对其添加具体的动态业务
仿QQ音乐HTML静态网页
10-07
布局复用性高
简单qq音乐html代码生成器,前端水印生成 - 18y的个人空间 - OSCHINA - 中文开源技术交流社区...
weixin_31069599的博客
06-03 670
1、为整个页面生成水印未生成之前 生成后效果 代码如下Document(function () {// canvas 实现 watermarkfunction __canvasWM({// 使用 ES6 的函数默认值方式设置参数的默认取值// 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functio...
qq音乐网页html代码生成器,AttGAN: Facial Attribute Editing by Only Changing What You Want 论文阅读笔记和AttGan的pytorc...
weixin_39644750的博客
06-04 375
1.总体框架上面的过程用详细描述即是Test阶段：Train阶段：由于我们无法得知编辑后的image，所以显而易见人脸属性编辑是一个无监督问题，而对于我们的xa需要获得关于b的属性，故利用attribute classififier来约束生成的xb使其获得了b属性；同时adversarial learning可以用来保证生成图片的真实性；此外，我们在进行人脸属性编辑的时候还需要保证只更改了我们需要...
html实训QQ音乐官网首页制作
weixin_44900952的博客
12-26 1万+
这里写自定义目录标题欢迎使用Markdown编辑器htmlcss插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Mark...
DIV+CSS布局练习 --- QQ音乐首页（1）
weixin_48055520的博客
04-23 764
第一个行模块分为5个部分，由图标、两个导航、一个搜索框以及登录和充值构成。，两个导航用到的标签是列表标签，搜索框、开通VIP和充值用到的标签是。通过F12调出网页代码，可找到首页分为8个行模块。其中图标用到的标签是标题标签。，每个版心都要水平居中对齐。这个页面的版心是1200。
QQ音乐静态页面设计-思路分享和代码
热门推荐
SouthWind37的博客
01-25 2万+
QQ音乐静态页面设计布局思路一、 顶部导航栏设计< Header >二、内容版块设计< content >歌单推荐三、新歌首发四、底部版权、外链部分设计< footer >五、关于不同浏览器格式的统一五、完整代码行六、完整代码实现效果 布局思路 这个练习项目通过模仿QQ音乐网页版的布局模式和基础动画效果达到以下目的： 1.掌握基本的HTML标签，乃至⼀些⽐较新的H5标签，⽐如<header> <footer> 。 2.掌握基本
基于jQuery与HTML5的炫彩表白界面设计
只需将该压缩包解压后上传至任意支持静态网站托管的服务平台（如GitHub Pages、Vercel、Netlify等），即可生成一个专属的在线表白网址，方便通过微信、QQ、短信等方式发送给心仪之人。 综上所述，该项目是一个集...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值