javascript 使用CSS的元素位置

nxagd54h  于 12个月前  发布在  Java
关注(0)|答案(1)|浏览(72)

我试图使一个投资组合的网页，但我有麻烦的位置上的元素在我的网页。我无法使我的个人资料图像转到页面中心和标题下。我不知道我的CSS代码是错误的还是HTML。如果有人能帮助我，将不胜感激。
下面是我索引HTML代码：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&family=Fira+Mono:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
    <header class="TextGlitch" id="title">
        <div class="TextGlitch-clip">
            <div class="TextGlitch-word"></div>
            <div class="TextGlitch-word TextGlitch-blend TextGlitch-blendA"></div>
            <div class="TextGlitch-word TextGlitch-blend TextGlitch-blendB"></div>
        </div>
        <div class="TextGlitch-clip">
            <div class="TextGlitch-word"></div>
            <div class="TextGlitch-word TextGlitch-blend TextGlitch-blendA"></div>
            <div class="TextGlitch-word TextGlitch-blend TextGlitch-blendB"></div>
        </div>
        <div class="TextGlitch-clip">
            <div class="TextGlitch-word"></div>
            <div class="TextGlitch-word TextGlitch-blend TextGlitch-blendA"></div>
            <div class="TextGlitch-word TextGlitch-blend TextGlitch-blendB"></div>
        </div>
    </header>

    <div class="profile-container">
        <img src="/assets/eu.png" alt="Minha foto" class="profile-image">
    </div>

    <div class="SobreMim" id="sobre">
        <p>
            Teste teste teste teste teste testeteste
            teste teste teste teste teste<br />
            
            
            <h3>Minhas redes sociais!</h3>
        </p>
          <div id="icones">
            <a href="https://www.instagram.com/luan__araujo/" target="_blank">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
            <a href="https://www.linkedin.com/in/luan-arauujo/" target="_blank">
              <ion-icon name="logo-linkedin"></ion-icon>
            </a>
            <a href="https://github.com/luanaraujo" target="_blank">
                <ion-icon name="logo-github"></ion-icon>
              </a>
      </div>
        </div>
        

    <div class="language-selector">
        <button id="english-button"><img src="/assets/usa.png" alt="English"></button>
        <button id="portuguese-button"><img src="/assets/brazil.png" alt="Português"></button>
    </div>
    <script src="./script.js"></script>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

下面是我的CSS风格：

body {
    height: 100%;
    margin: 0;
    display: flex;
    overflow: hidden;
    background-color: #222;
}

header {
    margin: 20px;
    z-index: 2; 
}

.TextGlitch {
    --TextGlitch-blendSize: .08em;
    --TextGlitch-blendColorA: #77f8;
    --TextGlitch-blendColorB: #ff68;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    max-width: 100%;
    color: #fff;
    line-height: 1em;
    letter-spacing: -.1ch;
    font-size: 24px;
    font-family: "Fira Code", monospace;
    margin: 20px;
    overflow-wrap: break-word;
    padding-bottom: 20px;
    z-index: 1; 
}

.TextGlitch::after {
    display: none;
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: .7ch;
    height: 1em;
    margin-left: .35ch;
    border-radius: 2px;
    background-color: currentColor;
    animation: cursorAnim 1s ease infinite;
}

@keyframes cursorAnim {
    0% { opacity: .5; }
    45% { opacity: .5; }
    55% { opacity: 0; }
    100% { opacity: 0; }
}

.TextGlitch-clip {
    position: relative;
    display: flex;
    align-items: baseline;
}

.TextGlitch-clip + .TextGlitch-clip {
    position: absolute;
    top: 0;
}

.TextGlitch:not( .TextGlitch-blended ) .TextGlitch-clip + .TextGlitch-clip {
    display: none;
}

.TextGlitch-word {
    margin: 5px;    
    max-width: 100%;
    word-wrap: break-word;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.TextGlitch-blend {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: .5s;
    transition-property: opacity;
}

.TextGlitch-blendA {
    color: var( --TextGlitch-blendColorA );
    margin: calc( var( --TextGlitch-blendSize ) * -1 ) 0 0 var( --TextGlitch-blendSize );
    mix-blend-mode: darken;
}

.TextGlitch-blendB {
    color: var( --TextGlitch-blendColorB );
    margin: var( --TextGlitch-blendSize ) 0 0 calc( var( --TextGlitch-blendSize ) * -1 );
    mix-blend-mode: color-burn;
}

.TextGlitch-blended .TextGlitch-blend {
    opacity: .4;
}

.profile-container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-top: 20px;
    padding-bottom: 20px;
    z-index: 3;
}

.profile-image {
    width: 160px;
    height: auto;
}
    
.SobreMim {
    background-color: #222; 
    padding: 20px; 
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 450px;
    text-align: justify;
    position: fixed;
    z-index: 0; 
    top: 100px; 
}

#sobre p {
    font-size: 18px;
    font-family: "Fira Code", monospace;
    overflow-wrap: break-word;
    color: #fff;
    font-weight: 400;
    max-width: 450px;
    text-align: justify;
}
#sobre h3{
    font-size: 18px;
    font-family: "Fira Code", monospace;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

#icones {
    display: flex;
    gap: 16px;
    padding: 24px;
    font-size: 30px;
    justify-content: center;
  }

 
  
  #icones a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #fff;
    transition: background 0.2s;
    border-radius: 50%;
  }
  
  #icones a:hover {
    background: rgba(255, 255, 255, 0.2);
    padding: 16px;
  }

.language-selector {
    position: absolute;    
    display: flex;
    flex-wrap: wrap;
    top: 20px;
    right: 20px;    
}

.language-selector button {
    background: transparent; 
    border: none;
    cursor: pointer;
}
  
.language-selector button img {
    width: 32px;
    height: 32px;
    color: currentColor;
}
  
.language-selector button:hover img {
    opacity: 0.8;
}

.language-selector.bottom-right {
    position: fixed;
    bottom: 20px; 
    right: 20px; 

}

/* Adicione esta regra de mídia para telas pequenas (por exemplo, smartphones) */
@media (max-width: 800px) {
    .language-selector {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 10px;
        align-items: flex-end;
    }
}

我使用的脚本是这样的，在文本上做一个小故障（它来自codepen）：

class TextGlitch {
    constructor(root) {
        this._root = root;
        this._elClips = root.querySelectorAll(".TextGlitch-clip");
        this._elWords = root.querySelectorAll(".TextGlitch-word");
        this._frame = this._frame.bind(this);
        this._unglitch = this._unglitch.bind(this);
        this._frameId = null;
        this._text = "";
        this._textAlt = [];
        this._language = "english"; // Adicione uma variável de idioma inicial
        Object.seal(this);

        this.setTexts([
            ">hello friend! My name is Luan Araujo and this is my portfolio.",
            ">HELLO FRIEND? MY NAME IS LUAN ARAUJO AND THIS IS MY PORTFOLIO.",
            "#µ37(0 [R132q? µ30) @J19 c1L3t1+ Qn 1z3e +h0$.&",
            "¨µ31)* {&13Nb? #y1 n2m4 1a 3ua1 +L0 p0rt1f1o!@",
            "§#+:|* {&><@$? {&13Nb?i0it 3n d2@ L5u@ Ar@2jo$*",
        ]);

        // this.setTexts( [
        //  "hello world !",
        //  "HELLO WORLD ?",
        //  "µ3770 3027q ?",
        //  "µ311p MQ51b ?",
        // ] );
    }

    on() {
        if (!this._frameId) {
            this._frame();
        }
    }

    off() {
        clearTimeout(this._frameId);
        this._frameId = null;
        this._unglitch();
    }

    setTexts([text, ...alt]) {
        this._text = text;
        this._textAlt = alt;
        this._updateText(); // Chame a função para atualizar o texto quando os textos são definidos
    }

    // private:
    // .....................................................................
    _frame() {
        this._glitch();
        setTimeout(this._unglitch, 50 + Math.random() * 200);
        this._frameId = setTimeout(this._frame, 250 + Math.random() * 500);
    }

    _glitch() {
        this._addClipCSS();
        this._textContent(this._randText());
        this._root.classList.add("TextGlitch-blended");
    }

    _unglitch() {
        this._removeClipCSS();
        this._updateText(); // Chame a função para atualizar o texto quando o efeito é desligado
        this._root.classList.remove("TextGlitch-blended");
    }

    _textContent(txt) {
        this._elWords.forEach((el) => (el.textContent = txt));
    }

    _addClipCSS() {
        const clips = this._elClips,
            clip1 = this._randDouble(0.1),
            clip2 = this._randDouble(0.1);

        clips[0].style.transform = `translate(${this._randDouble(0.3)}em, .02em)`;
        clips[2].style.transform = `translate(${this._randDouble(0.3)}em, -.02em)`;
        clips[0].style.clipPath = `inset( 0 0 ${0.6 + clip1}em 0 )`;
        clips[1].style.clipPath = `inset( ${0.4 - clip1}em 0 ${0.3 - clip2}em 0 )`;
        clips[2].style.clipPath = `inset( ${0.7 + clip2}em 0 0 0 )`;
    }

    _removeClipCSS() {
        this._elClips.forEach((el) => {
            el.style.clipPath = el.style.transform = "";
        });
    }

    _randText() {
        const txt = Array.from(this._text);

        for (let i = 0; i < 12; ++i) {
            const ind = this._randInt(this._text.length);

            txt[ind] = this._textAlt[this._randInt(this._textAlt.length)][ind];
        }
        return txt.join("");
    }

    _randDouble(d) {
        return Math.random() * d - d / 2;
    }

    _randInt(n) {
        return (Math.random() * n) | 0;
    }

    _updateText() {
        // Função para atualizar o texto com base no idioma selecionado
        if (this._language === "english") {
            this._text = ">hello friend! My name is Luan Araujo and this is my portfolio.";
        } else if (this._language === "portuguese") {
            this._text = ">Olá amigo(a)! Meu nome é Luan Araujo e este é o meu portfólio.";
        }

        this._textContent(this._text); // Atualize o texto
    }
}

const englishButton = document.getElementById("english-button");
const portugueseButton = document.getElementById("portuguese-button");
const elTitle = document.querySelector("#title");
const glitch = new TextGlitch(elTitle);

glitch.on();

// Adicione eventos de clique para os botões de idioma
englishButton.addEventListener("click", function () {
    glitch._language = "english"; // Defina o idioma como inglês
    glitch._updateText(); // Atualize o texto
});

portugueseButton.addEventListener("click", function () {
    glitch._language = "portuguese"; // Defina o idioma como português
    glitch._updateText(); // Atualize o texto
});

这是页面现在的样子：enter image description here
我试过把不同的位置atributes上的css，但没有工作。配置文件图像只在标题下，当我把“位置：fixed”。

JavaScript

1条答案

按热度按时间
dvtswwa3

dvtswwa31#

您可以将margin属性设置为auto，以使元素在其容器中水平居中，例如margin: auto在文本上。

赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com