创建一个音乐平台（二）使用html设置页面布局和css修改头部样式

OOAva

已于 2022-09-18 19:03:42 修改

阅读量266

点赞数

文章标签： html css 前端

于 2022-09-18 19:01:39 首次发布

本文链接：https://blog.csdn.net/OOAva/article/details/126918288

版权

创建：布局&头部

项目结构（使用IDEA实现，接上一篇）

在这里插入图片描述

1.项目下可能没有web.xml文件

产生原因：

web服务器从3.0开始，默认不再创建web.xml

解决方案：

1.）打开项目结构面板（点击右上角在这里插入图片描述）
或点击左上角文件 -> 项目结构打开

）选择 Facet ,点击 Web(my-music)，点击部署描述符下最右边的 “+”按钮,选择 web.xml

3.）在打开的界面中在 /WEB-INF/ 之前加入 src/main/webapp ,然后点击确定,效果如下
加入之后:

然后点击确定。
4.）点击面板右下角的确定按钮完成创建。

2.建立html头文件

1）在webapp下创建一个HTML文件
在这里插入图片描述
2）命名为index，回车即可

3）在index.html中写代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Music</title>
        <link rel="stylesheet" href="music.css">
    </head>
    <body>
        <div class="music">
           <div class="music-head">
               <h1>My Music</h1>
               <div class="search">
                  <input type="text" required placeholder="请输入歌名，歌手，专辑">
                  <button>搜索</button>
               </div>
           </div>
           <div class="music-hot"></div>
           <div class="music-list"></div>
        </div>
    </body>
</html>

注意
写HTML时要边写边测试，写完保存时可能会遇到不能保存的问题：

产生原因：
由于jetty在服务器运行是会默认认锁定静态资源文件,所以无法进行保存和修改。
解决方案：
1.关闭服务器：

2.在wel.xml中添加以下的代码：
<servlet> <servlet-name>default</servlet-name> <init-param> <param-name>useFileMappedBuffer</param-name> <param-value>false</param-value> </init-param> </servlet>
加入后Ctrl+s保存
完整的web.xml代码如下:

注意：
web.xml中，default报红

产生原因:
是因为IDEA在检查语法错误时,会认定,这个servlet缺少标签,所以报红
解决方案
由于default Servlet的在服务器中的根 web.xml 中已经配置,所以忽略即可
4）

3.在webapp下创建一个css文件

1）在webapp下创建一个CSS文件
在这里插入图片描述

2）命名为music，回车即可
在这里插入图片描述
3）注意

注意
在css中保存文件时出现：不能保存的情况时，直接关闭服务器即可保存。

/*设置body和html的高度为窗口高度*/
body,html{
    height: 100%;
}
/*设置body样式*/
body{
    margin: 0;/*去除body的默认的8px的margin，防止出现滚动条*/
    display: flex;/*将body中的元素布局修改为弹性盒子布局*/
    justify-content: center;/*水平居中（主轴居中）*/
    align-items: center;/*垂直居中（交叉轴居中）*/

}
.music{
    width: 940px;
    height: 100%;
    background: white;
}
.music .music-head{
    height:60px;
    display:flex;/*将body中的元素布局修改为弹性盒子布局*/
    justify-content: space-between;/*水平布局为两端布局*/
    align-items: center;/*垂直居中（交叉轴居中）*/
    padding-right: 15px;/*设置右边的间距，将搜索框往左移动15px*/
    background: aquamarine;
}
.music .music-head .search{
    border: 1px solid #2457ab;/*为整个搜索区域添加一个灰色的边框*/
    height: 32px;/*设置搜索框的高度为32px*/
    display:flex;/*将body中的元素布局修改为弹性盒子布局*/
    align-items: self-start;/*设置垂直布局为顶部对齐*/
}
/* :valid 表示通过验证的表单项 */
/* :focus 元素得到焦点 */
.music .music-head .search input:valid ~ button,
.music .music-head .search input:focus ~ button{
    display: inline;/*设置元素为行内元素（显示）*/
    transition: all .5s;/*添加过渡动画，持续时长为0.5s*/
}
.music .music-head .search input{
    border: 0;/*去除输入框的边框*/
    outline: none;/*去除输入框得到焦点是显示的边框*/
    line-height: 30px;/*设置行高*/
    height: 30px;/*设置高度*/
    font-size: 1.2rem;/*设置字体大小为body元素字体大小的1.2 倍*/
}
.music .music-head .search button{
    border: 0;
    background-color: #fff;
    height: 100%;
    display: none;
    transition: all .5s;
}
/*设置鼠标悬停在按钮时的样式*/
.music .music-head .search button:hover{
    cursor: pointer;/*鼠标指针变为手型*/
    background: chartreuse;/*设置背景颜色*/
}
.music .music-hot{
    height: 750px;
    background: #2457ab;/*辅助开发的，开发完成后需要进行删除*/
}
.music .music-list{
    height: calc(100% - 810px);/*歌曲高度为窗口高度-头部区域（60px）-热门区域（750px）*/
    min-height: 200px;/*防止窗口高度小于等于头部区域+热门区域的高度，导致歌曲列表不显示*/
    background: greenyellow;/*辅助开发的，开发完成后需要进行删除*/
}