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

news2024/11/15 23:32:52

前言：

效果展示

代码：

html代码

CSS代码

图片资源：

前言：

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

效果展示

1694092864516

代码：

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 个人名片 -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box">
        <!-- 放入头像 -->
        <div class="head">
            <img src="../../image/20221126191650_de6b5.thumb.400_0.jpg" alt="none" height="200px">
        </div>
        <!-- 名字 -->
        <div class="name">
            山田凉
        </div>
        <!-- 个性标签 -->
        <ul>
            <div>纽带乐队贝斯手</div>
            <br>
        </ul>
        <!-- 添加标签 -->
        <div class="add">
            <input type="text">
            <button onclick="add()">添加标签</button>
        </div>
    </div>
    
    <script>
    // JavaScript实现个人标签的添加和删除
        //添加删除
        
        function add(){
            let li=document.createElement('li');
            let span=document.createElement('span');
            let vaules=document.getElementsByTagName('input')[0].value;
            console.log(vaules);
            let ul=document.getElementsByTagName('ul')[0];
            li.innerText=vaules;
            ul.appendChild(li);
            li.appendChild(span);
            //点击删除键，删除标签
            span.onclick=function(){
                console.log(this);
                this.parentElement.remove();
            }
        };
        
    </script>
</body>
</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;
}