javascript - 如何更改图像 position

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap'); *{ color:black; font-family: 'Lato', sans-serif; padding: 0; margin: 0; box-sizing: border-box; } h1,h2,h3,h4,h5,h6,span{ color:black; text-align: center; line-height: 1.25; } h1{ font-size: 36px; } p{ line-height: 1.5; font-size: 16px; } li{ list-style-type: none; }.flex{ display: flex; /* this automatically aligns like columns or rows with auto width and auto height */ }.flex-1{ flex: 1; /* this makes sure that it is the entire height of the page */ } /* Navigation bar */.row{ width: 100%; max-width: 800px; margin: 0 auto; }.text-pink{ color: #FF69B4; } nav{ height: 100px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav__link--list{ display: flex; }.nav__link--anchor{ margin: 0 12px; color: black; text-decoration: none; font-weight: 700; }.nav__link--anchor-primary{ background-color: #FF69B4; padding: 8px 20px; border-radius: 50px; color: white; transition: all 300ms ease; }.nav__link--anchor-primary:hover{ background-color: #FF69B4; }.personal_logo{ font-size: 20px; color: #FF69B4; margin: 0 12px; font-weight: bold; } /* About mE */ #about-me{ min-height: 100vh; /* entire height of the page */ display: flex; flex-direction: column; }.about-me__info{ display: flex; flex-direction: column; }.about-me__info--container { display: flex; flex-direction: column; /* so it is not side-by-side */ align-items: center; max-width: 600px; margin: 0 auto; text-align: center; }.about-me--picture--mask{ width: 180px; height: 180px; border-radius: 100%; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,1); margin-bottom: 20px; }.about-me__picture{ width: 100%; transform: scale(1,1.1); padding-top: 7px; }.about-me__info--para{ font-size: 15px; margin-bottom: 28px; }.about-me__info--title{ margin-bottom: 15px; }.about-me__link{ font-size: 20px; color:#FF69B4; text-decoration: none; padding: 0 16px; }.about-me__img--container{ flex: 1; display: flex; align-items: center; }

<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Annette</title> <link rel="stylesheet" href="./css/styles:css"> <script src="https.//kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script> </head> <body> <section id="about-me"> <nav> <div class="personal_logo">Annette</div> <ul class="nav__link--list"> <li class="nav__Link"> <a href="#languages" class=" nav__link--anchor link__hover-effect link_hover-effect--black" >Languages</a> </li> <li class="nav__link"> <a href="#projects" class=" nav__link--anchor link__hover-effect link_hover-effect--black"> Projects</a> </li> <li class="nav__link"> <a href="" class= "nav__link--anchor nav__link--anchor-primary" >Contact</a> </li> </ul> </nav> <div class="flex flex-1"> <div class=",about-me__info row"> <:--inside the row. there is 2 sections. infromation and image--> <div class="about-me__info--container"> <figure class="about-me--picture--mask"> <img src=",/images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me,"> </figure> <.--this contains my image --> <h1 class="about-me__info--title"> Hey. I'm <span class="text-pink">Jane Doe </span> </h1> <h1> <p class="about-me__info--para"> I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees. I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I'm interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong> </p> <div class="about-me__links"></div> <a href="" class="about-me__link"> <i class="fa-brands fa-linkedin"></i> </a> <a href="" class="about-me__link"> <i class="fa-brands fa-github"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-inbox"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-file-pdf"></i> </a> </div> </div> <figure class="about-me__img--container"> <img src="./Assests/undraw_proud_coder_re_exuy.svg" alt=""> </figure> </div> </section> </body> </html>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap'); * { color: black; font-family: 'Lato', sans-serif; padding: 0; margin: 0; box-sizing: border-box; } h1, h2, h3, h4, h5, h6, span { color: black; text-align: center; line-height: 1.25; } h1 { font-size: 36px; } p { line-height: 1.5; font-size: 16px; } li { list-style-type: none; }.flex { display: flex; /* this automatically aligns like columns or rows with auto width and auto height */ }.flex-1 { flex: 1; /* this makes sure that it is the entire height of the page */ } /* Navigation bar */.row { width: 100%; max-width: 800px; margin: 0 auto; }.text-pink { color: #FF69B4; } nav { height: 100px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav__link--list { display: flex; }.nav__link--anchor { margin: 0 12px; color: black; text-decoration: none; font-weight: 700; }.nav__link--anchor-primary { background-color: #FF69B4; padding: 8px 20px; border-radius: 50px; color: white; transition: all 300ms ease; }.nav__link--anchor-primary:hover { background-color: #FF69B4; }.personal_logo { font-size: 20px; color: #FF69B4; margin: 0 12px; font-weight: bold; } /* About mE */ #about-me { min-height: 100vh; /* entire height of the page */ display: flex; flex-direction: column; }.about-me__info { display: flex; flex-direction: column; }.about-me__info--container { display: flex; flex-direction: column; /* so it is not side-by-side */ align-items: center; max-width: 600px; margin: 0 auto; text-align: center; }.about-me--picture--mask { width: 180px; height: 180px; border-radius: 100%; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 1); margin-bottom: 20px; }.about-me__picture { width: 100%; transform: scale(1, 1.1); padding-top: 7px; }.about-me__info--para { font-size: 15px; margin-bottom: 28px; }.about-me__info--title { margin-bottom: 15px; }.about-me__link { font-size: 20px; color: #FF69B4; text-decoration: none; padding: 0 16px; }.about-me__img--container { flex: 1; display: flex; align-items: center; }

<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Annette</title> <link rel="stylesheet" href="./css/styles:css"> <script src="https.//kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script> </head> <body> <section id="about-me"> <nav> <div class="personal_logo">Annette</div> <ul class="nav__link--list"> <li class="nav__Link"> <a href="#languages" class=" nav__link--anchor link__hover-effect link_hover-effect--black">Languages</a> </li> <li class="nav__link"> <a href="#projects" class=" nav__link--anchor link__hover-effect link_hover-effect--black"> Projects</a> </li> <li class="nav__link"> <a href="" class="nav__link--anchor nav__link--anchor-primary">Contact</a> </li> </ul> </nav> <div class="flex flex-1"> <div class=",about-me__info row"> <:--inside the row. there is 2 sections. infromation and image--> <div class="about-me__info--container"> <figure class="about-me--picture--mask"> <img src=",/images/Annette2.JPG" class="about-me__picture" alt="Picture of Me,"> </figure> <.--this contains my image --> <h1 class="about-me__info--title"> Hey: I'm <span class="text-pink">Jane Doe </span> </h1> <p class="about-me__info--para"> I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees. I have always been interested in creating very engaging and interactive PowerPoints to present my work: This led to my passion for web development and designing projects on topics that I'm interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong> </p> <div class="about-me__links"> <a href="" class="about-me__link"> <i class="fa-brands fa-linkedin"></i> </a> <a href="" class="about-me__link"> <i class="fa-brands fa-github"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-inbox"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-file-pdf"></i> </a> </div> </div> </div> </div> <div> <figure class="about-me__img--container" > <img src="https://picsum.photos/200" alt="" style="margin: auto"> </figure> </div> </section> </body> </html>