JavaScript-----个性名片案例展示

目录

前言：

 效果展示

代码：

html代码

 CSS代码

图片资源：

---

前言：

        今天我们就通过刚刚学习的JavaScript知识点以及前面学习了的html和CSS的知识点去做一个小作品，这是一个个性名片的案例（有代码资源和图片资源），希望大家喜欢。 

 效果展示

1694092864516

代码：

html代码

    
    
    
    
    


    

        
        

            
        
        
        

            山田凉
        
        
        

            
纽带乐队贝斯手
            

        
        
        

            
            添加标签
        
    
    
    

 CSS代码

/* 总盒子样式 */
.box{
    height:500px;
    width: 800px;
    margin: 100px auto;
    box-shadow: 0 0 5px 5px gray;
    /* 设置背景使得背景颜色暗一点 */
    background-image:  linear-gradient(
            rgba(34, 34, 34, 0.6),
            rgba(34, 34, 34, 0.6)
          ),url(../../image/20221211181405_cb95c.heif);
    background-repeat: no-repeat;
    background-size: 800px 500px;
    position: relative;
}
/* 头像元素样式 */
.head{
    height: 200px;
    width: 200px;
    overflow: hidden;
    /* 圆形头像 */
    border-radius: 50%; 
    background-color: red;
    position: relative;
    left: 30px;
    top: 20px; 
    float: left;
    box-shadow: 0 0 3px 3px #eee;
}
/* 名字样式 */
.name{
    height: 200px;
    width: 800px;
    color: cornflowerblue;
    font-family: '华文行楷';
    text-align: center;
    font-size: 60px;
    line-height: 200px;
}
ul{
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    width: 400px;
}
ul>div{
    font-size: 30px;
    color: rgb(226, 159, 43);
    font-family: '华文行楷';
    width: 100%;
    margin-top: 10px;
}
ul>li{
    margin-right: 10px;
    margin-top: 30px;
    text-align: center;
    color: rgb(43, 226, 128);
    font-size: 20px;
    /* 文本超出范围省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70px;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 0 3px 3px #eee;
    position: relative;
}

span {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background-image: url(../../image/del.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.add{
    position: absolute;
    bottom: 0;
    left: 0;
}

图片资源：