网易云网页版(未完成）

文章目录 准备技术选型搭建相关文件夹结构想要做成的样子 Part 1注意点html代码CSS代码 现在完成图

准备 技术选型

传统布局 使用html + css + js + bootstrap

搭建相关文件夹结构

引入 CSS初始化文件

选字体图标

想要做成的样子

Part 1

这三个部分是固定定位，header头部，dropdown导航左侧，footer页面底部

注意点

！！input 标签不支持伪元素

发现了字节的字体图标库
https://iconpark.oceanengine.com/official

html代码

        
        

            
                网易云音乐
            
            
                <
                >
                
                
                
            
            
                
                    
                    
                    
                    |
                    —
                    
                    
                
            
            
                
                    
                
                银河_漂流记
            
        

CSS代码

/* 头部 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 1533px;
    height: 90px;
    background-color: #3e6550;
}

header .logo::before {
    font-family: 'icomoon';
    content: '\e910';
    display: inline-block;
    margin: 0 15px 0 24px;
    color: #f3faf6;
    line-height: 90px;
}

header .logo {
    float: left;
    width: 240px;
    height: 90px;
    color: #ffffff;
    font-size: 27px;
    text-align: center;
    line-height: 90px;
    font-family: Arial, Helvetica, sans-serif;
}

header .search {
    position: relative;
    float: left;
    width: 420px;
    height: 90px;
    margin-left: 90px;
}

header .search button {
    width: 37px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    margin-top: 28px;
    background-color: #385c49;
    border-radius: 50%;
    color: #d7dedabb;
    font-size: 25px;
}

header .search .search-logo {
    font-family: 'icomoon';
    position: absolute;
    top: 33px;
    left: 108px;
    width: 20px;
    height: 20px;
    color: #adbcb3;
    z-index: 2;
    font-size: 18px;
}

header .search input {
    position: relative;
    width: 243px;
    height: 40px;
    background-color: #3b604c;
    margin-left: 20px;
    border-radius: 20px;
    padding-left: 34px;
    font-size: 16px;
    color: #adbcb3;
    vertical-align: super;
}
header .search .sing {
    font-family: 'icomoon';
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #c9d1cc;
    font-size: 26px;
    background-color: #3b604c;
    text-align: center;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
}

header .user {
    float: right;
    width: 188px;
    height: 90px;
    margin-left: 80px;
}

header .user .headshot {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-top: 23px;
}

header .user .headshot img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
header .user .uname {
    position: relative;
    color: rgba(255, 255, 255, 0.849);
    font-size: 18px;
    vertical-align:sub;
}

header .user .uname::after{
    position: absolute;
    top: -2px;
    left: 103px;
    font-family: 'icomoon';
    content: '';
    font-size: 20px;
}
header .module {
    float: right;
    margin-right: 20px;
}

header .module ul li {
    float: left;
    height: 24px;
    padding: 0 15px;
    margin-top: 24px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.722);
}
header .module ul li a {
    font-family: 'icomoon';
    color: rgba(255, 255, 255, 0.686);
    font-size: 20px;
}

header .module ul li a:hover{
    color: #fff;
}

header .module ul li a img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
}

header .module ul li a img:hover {
    opacity: 1;
}

现在完成图