html+css的音乐网站

最新推荐文章于 2024-06-02 12:45:42 发布

悟静！

最新推荐文章于 2024-06-02 12:45:42 发布

阅读量9.1k

点赞数 11

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_42241873/article/details/104110453

版权

html+css的音乐网站

用弹性布局（display: flex;），关于这部分也是最近才接触，到现在还是处于懵逼状态，个人觉得这个页面参考价值不大，只是在这边做个记录放置代码罢了

*参考价值：0
#####先展示整个网页的页面效果：
导航栏以及用keyframes制作的轮播图
视频+图片墙+底部栏

css文件代码如下：

/*https://www.cnblogs.com/jerehedu/p/7358329.html*/
/*弹性布局参考网站:https://www.cnblogs.com/fatty-yu/p/8758818.html*/
/*删除浏览器这些默认值，方便后面的设置。（注：不是没它不行，只是方便而已）*/
* {
    margin: 0;
    padding: 0;
}
body
{
    display: flex;
    text-align:center;    /* 文字居中 */
    background-color: black;
}
ul
{
    flex-wrap: nowrap;
    list-style-type:none; /* ul前面的点  */
    background-color: #fcff18;
}

.menu
{
    width: 100%;
    height: 80px;
    background: black; /* 导航条背景的颜色  */
    float: left;
    font-size:25px;

}
.nav
{
    margin:0 auto;     /* 导航栏文字的位置  */
    width:700px;   /* 和文字宽度有关，不能小于文字宽度的总和  */
    height:80px;   /* 导航栏的宽度  */
    background-color: black;
}
.logo{

}
.nav a
{
    float:left;              /* 导航栏的位置配置 */
    width:90px;           /* 选中的文字块的长度  */
    line-height:80px;              /* 选中的文字块的宽度  */
    text-decoration: none;               /* 去掉连接下划线  */
    font-weight:bold;
    font-size:13px;           /* 字体大小 */
    color: #FFFFFF;           /* 字体颜色 */
}
.nav li a:hover {
    background-color: #D8D8D8; /* 选中的文字块的颜色 */
    text-decoration: none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
    text-decoration:none; /* 连接被点之后没有下划线  */
}

.bigbox{
    /*text-align: justify;*/
    padding: 0px;
    margin: 0px;
    width: auto;
    height: auto;
    background-color: #53bdff;
}
#p
{
    padding: 0px;

    margin-right: 0px;
    width:100%;
    height:900px;
    /*background: #F9F0DA;*/
    animation:myfirst 60s;
    -webkit-animation:myfirst 60s; /* Safari and Chrome 只适配Safari and Chrome，得去适配其他浏览器*/
    -moz-animation:myfirst 60s;/*Firefox*/
    -o-animation: myfirst 60s ;/*Opera */
    animation-play-state: running;
    animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:url("../img/1.jpg");
    }
    10%  {background: url("../img/2.jpg");

    }
    20%  {background: url("../img/timg.jpg");}
    30% {background: url("../img/4.jpg");}
    40%   {background: url("../img/15.jpg");}
    50%  {background: url("../img/6.jpg");}
    60%  {background: url("../img/7.jpg");}
    70%   {background: url("../img/8.jpg");}
    80%  {background: url("../img/9.jpg");}
    90%  {background: url("../img/10 .jpg");}
    100% {background: url("../img/11.jpg");}
}
@-moz-keyframes myfirst /*Firefox*/
{
    0%   {background:url("../img/1.jpg");
    }
    10%  {background: url("../img/2.jpg");

    }
    20%  {background: url("../img/timg.jpg");}
    30% {background: url("../img/4.jpg");}
    40%   {background: url("../img/15.jpg");}
    50%  {background: url("../img/6.jpg");}
    60%  {background: url("../img/7.jpg");}
    70%   {background: url("../img/8.jpg");}
    80%  {background: url("../img/9.jpg");}
    90%  {background: url("../img/10 .jpg");}
    100% {background: url("../img/11.jpg");}

}
@-o-keyframes myfirst /*Opera */
{
    0%   {background:url("../img/1.jpg");
    }
    10%  {background: url("../img/2.jpg");

    }
    20%  {background: url("../img/timg.jpg");}
    30% {background: url("../img/4.jpg");}
    40%   {background: url("../img/15.jpg");}
    50%  {background: url("../img/6.jpg");}
    60%  {background: url("../img/7.jpg");}
    70%   {background: url("../img/8.jpg");}
    80%  {background: url("../img/9.jpg");}
    90%  {background: url("../img/10 .jpg");}
    100% {background: url("../img/11.jpg");}

}

.box{
    /*display: inline-block;*/
    margin: 0px;
    background-color: #121112;
    width:auto;
    height: 500px;
    display: -moz-box;/*firefox*/
    display: -webkit-box;/*Safari and Chrome*/
}
/*所有包含了son的class元素*/
div[class *="son"]{
    float: top;
    /*外边距（上右下左）*/
    margin:0px 80px 0px 0px;
    width: 800px;
    height: 500px;
}
.section {
    background-color: #908c91;
   margin: 0px;
    height: 500px;
    display: -moz-box;/*firefox*/
    display: -webkit-box;/*Safari and Chrome*/
}
.demo{
    flex-wrap: nowrap;
    /*设置边框阴影*/
    box-shadow: 0px 0px 10px #908c91 inset;
    background-color: #FFFFFF;
    width:300px;
    height:450px;
    margin:15px;
    padding:10px;
    background-size:contain;/*contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。*/
}
#footer {
    width: 100%;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
* {
    margin: 0;
    padding: 0;
}
body
{
    display: flex;
    text-align:center;    /* 文字居中 */
    background-color: black;
}
ul
{
    flex-wrap: nowrap;
    list-style-type:none; /* ul前面的点  */
    background-color: #fcff18;
}

.menu
{
    width: 100%;
    height: 80px;
    background: black; /* 导航条背景的颜色  */
    float: left;
    font-size:25px;

}
.nav
{
    margin:0 auto;     /* 导航栏文字的位置  */
    width:700px;   /* 和文字宽度有关，不能小于文字宽度的总和  */
    height:80px;   /* 导航栏的宽度  */
    background-color: black;
}
.logo{

}
.nav a
{
    float:left;              /* 导航栏的位置配置 */
    width:90px;           /* 选中的文字块的长度  */
    line-height:80px;              /* 选中的文字块的宽度  */
    text-decoration: none;               /* 去掉连接下划线  */
    font-weight:bold;
    font-size:13px;           /* 字体大小 */
    color: #FFFFFF;           /* 字体颜色 */
}
.nav li a:hover {
    background-color: #D8D8D8; /* 选中的文字块的颜色 */
    text-decoration: none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
    text-decoration:none; /* 连接被点之后没有下划线  */
}

.bigbox{
    /*text-align: justify;*/
    padding: 0px;
    margin: 0px;
    width: auto;
    height: auto;
    background-color: #53bdff;
}
#p
{
    padding: 0px;

    margin-right: 0px;
    width:100%;
    height:900px;
    /*background: #F9F0DA;*/
    animation:myfirst 60s;
    -webkit-animation:myfirst 60s; /* Safari and Chrome 只适配Safari and Chrome，得去适配其他浏览器*/
    -moz-animation:myfirst 60s;/*Firefox*/
    -o-animation: myfirst 60s ;/*Opera */
    animation-play-state: running;
    animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:url("../img/1.jpg");
    }
    10%  {background: url("../img/2.jpg");

    }
    20%  {background: url("../img/timg.jpg");}
    30% {background: url("../img/4.jpg");}
    40%   {background: url("../img/15.jpg");}
    50%  {background: url("../img/6.jpg");}
    60%  {background: url("../img/7.jpg");}
    70%   {background: url("../img/8.jpg");}
    80%  {background: url("../img/9.jpg");}
    90%  {background: url("../img/10 .jpg");}
    100% {background: url("../img/11.jpg");}
}
@-moz-keyframes myfirst /*Firefox*/
{
    0%   {background:url("../img/1.jpg");
    }
    10%  {background: url("../img/2.jpg");

    }
    20%  {background: url("../img/timg.jpg");}
    30% {background: url("../img/4.jpg");}
    40%   {background: url("../img/15.jpg");}
    50%  {background: url("../img/6.jpg");}
    60%  {background: url("../img/7.jpg");}
    70%   {background: url("../img/8.jpg");}
    80%  {background: url("../img/9.jpg");}
    90%  {background: url("../img/10 .jpg");}
    100% {background: url("../img/11.jpg");}

}
@-o-keyframes myfirst /*Opera */
{
    0%   {background:url("../img/1.jpg");
    }
    10%  {background: url("../img/2.jpg");

    }
    20%  {background: url("../img/timg.jpg");}
    30% {background: url("../img/4.jpg");}
    40%   {background: url("../img/15.jpg");}
    50%  {background: url("../img/6.jpg");}
    60%  {background: url("../img/7.jpg");}
    70%   {background: url("../img/8.jpg");}
    80%  {background: url("../img/9.jpg");}
    90%  {background: url("../img/10 .jpg");}
    100% {background: url("../img/11.jpg");}

}

.box{
    /*display: inline-block;*/
    margin: 0px;
    background-color: #121112;
    width:auto;
    height: 500px;
    display: -moz-box;/*firefox*/
    display: -webkit-box;/*Safari and Chrome*/
}
/*所有包含了son的class元素*/
div[class *="son"]{
    float: top;
    /*外边距（上右下左）*/
    margin:0px 80px 0px 0px;
    width: 800px;
    height: 500px;
}
.section {
    background-color: #908c91;
   margin: 0px;
    height: 500px;
    display: -moz-box;/*firefox*/
    display: -webkit-box;/*Safari and Chrome*/
}
.demo{
    flex-wrap: nowrap;
    /*设置边框阴影*/
    box-shadow: 0px 0px 10px #908c91 inset;
    background-color: #FFFFFF;
    width:300px;
    height:450px;
    margin:15px;
    padding:10px;
    background-size:contain;/*contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。*/
}
#footer {
    width: 100%;
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}

html文件代码如下：

<DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/test.css"/> <!-- 调用css -->
        <title>音乐网站（html+css）</title>
    </head>
    <body>
    <div class="menu">
            <!-- class选择器 -->
        <div class="nav">
            <h1 class="logo">
                <a>J'Music</a>

            </h1>
            <ul>    <!-- ul标签 -->

                <li><a href="default.asp">首页</a></li>  <!-- li标签 -->
                <li><a href="default.asp">歌单</a></li>
                <li><a href="default.asp">歌手</a></li>
                <li><a href="default.asp">我的</a></li>
                <li><a href="login.html">登录|注册</a></li>
            </ul>
        </div>



        </div>
    </div>
    <hr>
    <div class="bigbox">
    <div id="p"></div><!--轮播图-->
        <hr>

    <!--定义一个大盒子，大盒子中再设计两个小盒子，将视频放置两个小盒子中-->
    <div class="box">
        <div class="son1">
            <video controls width="800" height="500">
                <source src="video/ThereForYou.mp4">
            </video>
        </div>
        <div class="son2">
            <video controls width="800" height="500">
                <source src="video/badguy.mp4">
            </video>
        </div>
    </div>
        <hr>
    <!--定义一个大盒子，里面分别再设计5个小盒子，再将图片放置进去-->
    <div class="section">
        <div class="demo">
            <!--<a href="#" title="Justin Bieber">-->
            <img src="img/1.jpg" width="300" height="450">
            <!--</a>-->
        </div>
        <div class="demo">
            <!--<a href="#" title="Billie Eilish">-->
            <img src="img/2.jpg" width="300" height="450">
            <!--</a>-->
        </div>
        <div class="demo">
            <!--<a href="#" title="Troye Sivan">-->
            <img src="img/3.jpg" width="300" height="450">
            <!--</a>-->
        </div>
        <div class="demo">
            <!--<a href="#" title="Troye Sivan">-->
            <img src="img/4.jpg" width="300" height="450">
            <!--</a>-->
        </div>
        <div class="demo">
            <img src="img/6%20(2).jpg" width="300" height="450">
        </div>
    </div>
    </div>
    <hr>
    <div id="footer">
        <p data-v-1bb0ce20="">
            关于 | 帮助 | 条款 | 反馈
        </p>
        <p data-v-1bb0ce20="">
            Copyright@2020
        </p>
        <p data-v-1bb0ce20="">
            Designed by JJX
        </p>
    </div>
    </body>
    </html>
</DOCTYPE>

[ 谷歌浏览器打开正常，ie浏览器排版却不正常，至于keyframes部分的轮播图在ie是不能显示的，IE他支持动画，支持背景图片，但是可能不支持动画里加图片，不知道具体原因，在这里其实可以换别的方式去实现，在这里的代码只是做记录]

悟静！

关注

11
点赞
踩
113

收藏

觉得还不错? 一键收藏
1
评论
html+css的音乐网站

html+css的音乐网站用弹性布局（display: flex;），关于这部分也是最近才接触，到现在还是处于懵逼状态，个人觉得这个页面参考价值不大，只是在这边做个记录放置代码罢了*参考价值：0![视频以及图片墙和底部栏](https://img-blog.csdnimg.cn/20200129213314910.png?x-oss-process=image/watermark,type...
复制链接

扫一扫