divまたはimgへのリンクを適用するにはどうすればよいですか？

@charset "utf-8"; 
 
@import url('https://fonts.googleapis.com/css?family=Roboto:500'); 
 
* { box-sizing: border-box; } 
 
body { margin: 0; padding: 0; width: 1280px; margin: auto; } 
 
header>div, body>section, footer, footer>div { position: relative; width: 1000px; margin: 0 auto; } 
 
header { height: 113px; border-bottom: 3px solid #e8593d; } 
 
section { height: 621px; } 
 
ul { list-style-type: none; margin: 0; padding: 0; } 
 
li { float: left; } 
 
a { text-decoration: none; color: inherit; padding: 10px 0;} 
 

 

 
/* ====== header ====== */ 
 
header>div>img, .login, .menu, input[type="search"] { position: absolute; } 
 
header>div>img { top: 47px; } 
 

 
/* header login ul */ 
 
.login { top: 17px; left: 800px; } 
 
.login li { padding: 0 9px; color: #696664; font-size: 9px; border-right: 1px solid #b9b8b7; font-family: 'Roboto', sans-serif; } 
 
.login li:first-child { padding-left: 0; color: #e8593d;} 
 
.login li:last-child { padding-right: 0; border: 0;} 
 

 
/* header main ul */ 
 
.menu { top: 65px; left: 158px; } 
 
.menu li { padding: 0 22px; font-size: 13.8px; font-family: 'Roboto', sans-serif; font-weight: bold;} 
 
.menu li:first-child { padding-left: 0; } 
 
.menu li:last-child { padding-right: 0; } 
 

 
/* div wrapping input and images */ 
 
.wrap{ position: absolute; top: 54px; left: 852px; width: 148px; border: 1px solid #ccc; background-color: white; } 
 
.wrap::after { content: ''; clear: both; display: table; } 
 
input[type="search"] { padding: 6px 13px; width: 124px; border: 0;} 
 
.wrap img { float: right; margin: 4.5px 4px 4.5px 3px; } 
 

 

 
/* ====== section ====== */ 
 

 
/* 1st div */ 
 
.t_lf { position: absolute; width: 610px; height: 360px; top: 33px;} 
 
.t_lf img{ position: absolute; } 
 
.t_lf img:first-child{ top: 0; left: 0;} 
 
.t_lf img:nth-child(2){ top: 0; left: 211px;} 
 
.t_lf img:nth-child(3){ top: 16px; left: 150px;} 
 
.t_lf img:nth-child(4) { top: 34px; left: 16px; } 
 
.t_lf img:nth-child(5) { top: 118px; left: 49px; } 
 
.t_lf img:nth-child(6) { top: 148px; left: 48px; } 
 
.t_lf img:nth-child(7) { top: 236px; left: 50px; } 
 
.t_lf img:last-child { top: 283px; left: 50px; } 
 

 
/* 2nd div */ 
 
.bt_lf { position:absolute; top: 403px; width: 610px; height: 185px; margin: 0;} 
 
.bt_lf div { float: left; width: 196px; height: 196px; margin: 0;} 
 
.bt_lf div:last-child { position: relative; width: 403px; height: 185px; margin: 0 0 0 11px;} 
 
.bt_lf div img { position: absolute; } 
 

 
/* 2nd div - 1st div */ 
 
.bt_lf .system img:nth-child(2) { top: 41px; left: 31px; } 
 
.bt_lf .system img:nth-child(3) { top: 80px; left: 49px;} 
 
.bt_lf .system img:nth-child(4) { top: 102px; left: 63px;} 
 

 
/* 2nd div - 2nd div */ 
 
.bt_lf .business img:nth-child(2) { top: 29px; left: 52px; } 
 
.bt_lf .business img:nth-child(3) { top: 70px; left: 53px; } 
 
.bt_lf .business img:nth-child(4) { top: 138px; left: 54px; } 
 
.bt_lf .business img:nth-child(5) { top: 8px; left: 210px; } 
 
.bt_lf .business img:last-child { top: 78px; left: 21px; } 
 

 
/* 3rd div */ 
 
.t_rt { position: absolute; top: 33px; left: 620px; width: 380px; height: 185px; background-color: #e8593d;} 
 
.t_rt div { float: left; width: 126px; height: 185px; } 
 
.t_rt div:nth-child(2) { border-left: 1px solid #f0927f; border-right: 1px solid #f0927f; } 
 

 
.t_rt>div img { position: relative; } 
 
.t_rt>div img:nth-child(1){ top: 31px; left: 34px; } 
 
.t_rt>div img:nth-child(2){ top: 28px; left: 23px; } 
 
.t_rt>div img:nth-child(3){ top: 42px; left: 33px; } 
 
.t_rt>div:last-child img:nth-child(3){ top: 29px; left: 46px; } 
 
.t_rt>div img:nth-child(4) { position: absolute; top: 147px;} 
 
.t_rt .simulator img:nth-child(4) { left: 50px; } 
 
.t_rt .counseling img:nth-child(4) { left: 177px; } 
 
.t_rt .counseling img:nth-child(1) { top: 31px; left: 27px; } 
 
.t_rt .counseling img:nth-child(2) { top: 26px; left: 20px; } 
 
.t_rt .counseling img:nth-child(3) { top: 42px; left: 30px; } 
 
.t_rt .evaluation img:nth-child(4) { left: 303px; } 
 

 
/* 4th div */ 
 

 
/* 4th div - 1st div */ 
 
.bt_rt { width: 184px; height: 360px; } 
 
.bt_rt div { width: 184px; height: 360px; } 
 
.bt_rt>div:nth-child(1) { top: 228px; left: 620px; background-color: #e3e7ee; } 
 
.bt_rt>div:nth-child(2) { top: 228px; left: 816px; } 
 
.bt_rt>div img, p, .bt_rt>div { position: absolute; } 
 
.announcement img:nth-child(1) { top: 23px; left: 36px; } 
 
.announcement img:nth-child(2) { top: 67px; left: 13px; } 
 
.announcement img:nth-child(3) { top: 177px; left: 31px; } 
 
.announcement img:nth-child(4) { top: 179px; left: 53px; } 
 
.announcement img:nth-child(5) { top: 198px; left: 29px; } 
 
.announcement p + p { width: 149px; margin: 0; top: 241px; left: 19px; color: #898c90; font-size: 11px; font-family: 'Dotum'; line-height: 18.5px; word-spacing: 0.65px;} 
 
#dDay { background-color: #23202b; color: #fff; font-family: 'Dotum'; font-weight: bold; font-size: 12px; padding: 2.5px 6px; margin: 0; top: 67px; left: 13px;} 
 

 
/* 4th div - 2nd div */ 
 
.management img:nth-child(2) { top: 23px; left: 47px; } 
 
.management img:nth-child(3) { top: 65px; left: 24px; } 
 
.management div { position: relative; top: 248px; width: 184px; height: 54px; } 
 
.management div { background-color: #9d9fa3; margin-top: 2px; } 
 
.management div:last-child{ background-color: #7a7b81; } 
 
.management div img:first-child { position: relative; top: 13px; left: 22px; } 
 
.management div img:nth-child(2) { position: absolute; top: 21px; left: 63px; } 
 
.management div:last-child img:nth-child(2) { top: 23px; } 
 
.management div img:last-child { position: absolute; top: 19px; left: 158px; } 
 

 

 
/* ====== footer ====== */ 
 
footer { height: 179px; } 
 
footer>div { position: relative; top: 0; border: 5px solid #e9e9e9; height: 62px; } 
 
footer div img { position: absolute; } 
 
footer div img:first-child { top: 16px; left:25px; } 
 
footer div div { display: inline-block; position: relative; height: 29px;} 
 
footer div div { left: 76px; } 
 
footer div div img { padding: 0; } 
 

 
/* list of companies */ 
 
footer div img { padding: 0; } 
 

 
.center, .jobcenter, .industry { margin-top: 12px; border-right: 1px solid #d9d9d9; } 
 
.center { width: 209px; } 
 
.jobcenter { width: 191px; } 
 
.industry { width: 235px; } 
 
.sjobcenter { width: 192px; margin-top: 12px; } 
 

 
.center img:first-child { left: 0px; top: -5px;} 
 
.center img:last-child { left: 36px; top: 10px;} 
 
.jobcenter img:first-child { left: 29px; top: 1px;} 
 
.jobcenter img:last-child { left: 60px; top: 12px;} 
 
.industry img:first-child { left: 31px; top: 6px;} 
 
.industry img:last-child { left: 65px; top: 10px;} 
 
.sjobcenter img:first-child { left: 25px; top: 3px;} 
 
.sjobcenter img:last-child { left: 57px; top: 8px;} 
 

 
/* logo, address and etc. */ 
 
footer div + img { position: relative; top: 33px; } 
 
footer ul { position: absolute; top: 93px; left: 144px; } 
 
footer li { font-size: 12px; color: #595757; padding: 0 18px; border-left: 1px solid #595757; font-family: 'Dotum'} 
 
footer li:first-child { color: #e8593d; border: 0; padding-left: 0;} 
 
footer p { position: absolute; top: 120px; left: 143px; margin: 0; font-size: 11px; color: #919191; font-family: 'Dotum'; line-height: 14px; word-spacing: 2px;}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>startup</title> 
 
    <link rel="stylesheet" href="startup.css"> 
 
</head> 
 
<body> 
 
    <header> 
 
     <div> 
 
     <img src="./pics/logo.png" alt=""> 
 
     <ul class="login"> 
 
      <li><a href="">LOGIN</a></li> 
 
      <li><a href="">JOIN US</a></li> 
 
      <li><a href="">SITEMAP</a></li> 
 
      <li><a href="">KOREA</a></li> 
 
     </ul> 
 
     <ul class="menu"> 
 
      <li><a href="">PROGRAM</a></li> 
 
      <li><a href="">IDEA PROPOSAL</a></li> 
 
      <li><a href="">E-LEARNING</a></li> 
 
      <li><a href="">INVESTMENT</a></li> 
 
      <li><a href="">JOB</a></li> 
 
      <li><a href="">INFORMATION</a></li> 
 
     </ul> 
 
     <div class="wrap"> 
 
     <input type=search> 
 
     <img src="./pics/search.gif" alt=""> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <section> 
 
     <div class="t_lf"> 
 
      <img src="./pics/sky.gif" alt=""> 
 
      <img src="./pics/balls.png" alt=""> 
 
      <img src="./pics/man.png" alt=""> 
 
      <img src="./pics/ball.png" alt=""> 
 
      <img src="./pics/text1.png" alt=""> 
 
      <img src="./pics/text2.png" alt=""> 
 
      <img src="./pics/lorem.png" alt=""> 
 
      <img src="./pics/numbers.png" alt=""> 
 
     </div> 
 
     <div class="bt_lf"> 
 
      <div class="system"> 
 
       <img src="./pics/online.gif" alt=""> 
 
       <img src="./pics/bluetext.png" alt=""> 
 
       <img src="./pics/buildings.png" alt=""> 
 
       <img src="./pics/laptop.png" alt=""> 
 
      </div> 
 
      <div class="business"> 
 
        <img src="./pics/brown.gif" alt=""> 
 
        <img src="./pics/browntext1.png" alt=""> 
 
        <img src="./pics/browntext2.png" alt=""> 
 
        <img src="./pics/gobrown.png" alt=""> 
 
        <img src="./pics/graph.png" alt=""> 
 
        <img src="./pics/brownmore.png" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="t_rt"> 
 
      <div class="simulator"> 
 
       <img src="./pics/orangetext1.png" alt=""> 
 
       <img src="./pics/orangelorem.png" alt=""> 
 
       <img src="./pics/icon1.png" alt=""> 
 
       <img src="./pics/go.png" alt=""> 
 
      </div> 
 
      <div class="counseling"> 
 
       <img src="./pics/orangetext2.png" alt=""> 
 
       <img src="./pics/orangelorem.png" alt=""> 
 
       <img src="./pics/icon2.png" alt=""> 
 
       <img src="./pics/go.png" alt=""> 
 
      </div> 
 
      <div class="evaluation"> 
 
       <img src="./pics/orangetext3.png" alt=""> 
 
       <img src="./pics/orangelorem.png" alt=""> 
 
       <img src="./pics/icon3.png" alt=""> 
 
       <img src="./pics/go.png" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="bt_rt"> 
 
      <div class="announcement"> 
 
       <img src="./pics/graytext.png" alt=""> 
 
       <img src="./pics/rise.gif" alt=""> 
 
       <img src="./pics/more.gif" alt=""> 
 
       <img src="./pics/graytitle.png" alt=""> 
 
       <img src="./pics/contact.png" alt=""> 
 
       <p id="dDay">D-15</p> 
 
       <p>The toppings you may chose for that slice when you forgot to shop for food the paint you may slap on... <br> 
 
       0000-00-00 
 
       </p> 
 
      </div> 
 
      <div class="management"> 
 
       <img src="./pics/performance.gif" alt=""> 
 
       <img src="./pics/performtext.png" alt=""> 
 
       <img src="./pics/performlorem.png" alt=""> 
 
       <div> 
 
        <img src="./pics/monitoricon.png" alt=""> 
 
        <img src="./pics/coursestext.png" alt=""> 
 
        <img src="./pics/coursemore.png" alt=""> 
 
       </div> 
 
       <div> 
 
        <img src="./pics/calendaricon.png" alt=""> 
 
        <img src="./pics/selftext.png" alt=""> 
 
        <img src="./pics/coursemore.png" alt=""> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 
    <footer> 
 
     <div> 
 
       <a href="#"><img src="./pics/otherslist.png" alt=""></a> 
 
      <div class="center"> 
 
        <img src="./pics/lighticon.png" alt=""> 
 
        <img src="./pics/otherstext1.png" alt=""> 
 
      </div> 
 
      <a href="#"><div class="jobcenter"> 
 
        <img src="./pics/star.png" alt=""> 
 
        <img src="./pics/otherstext2.png" alt=""> 
 
      </div></a> 
 
      <a href="#"><div class="industry"> 
 
        <img src="./pics/globe.png" alt=""> 
 
        <img src="./pics/otherstext3.png" alt=""> 
 
      </div></a> 
 
      <a href="#"><div class="sjobcenter"> 
 
        <img src="./pics/center.png" alt=""> 
 
        <img src="./pics/otherstext4.png" alt=""> 
 
      </div></a> 
 
     </div> 
 
     <img src="./pics/blacklogo.png" alt=""> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="#">Agreement</a></li> 
 
      <li><a href="#">Privacy Policy</a></li> 
 
      <li><a href="#">Use guide</a></li> 
 
      <li><a href="#">This cyber clean and cound and center</a></li> 
 
     </ul> 
 
     </nav> 
 
     <p>Business registration number 000 - 000 - 0010 | representative am Hong Kil Dong | business registration numberthe 0000-0000 - 00000 <br> 
 
       Copyright StartUp. All Rights Reserved.</p> 
 
    </footer> 
 
</body> 
 
</html>

私はウェブサイトをコピーしようとしています。私は主に位置属性を使用しています。広告や画像のように、画像やdivをクリックできるようにしたい。しかし、タグでそれらをラップすると、画像はすべての位置値を失い、別の位置値を与えても移動しません。どうすればよいですか？私は位置属性が問題だと思いますが、わかりません。

私は非常にきれいにコードを書いていないので、私のコードがあなたの状況を理解するのに役立つかどうかわかりません。：

出典

2017-09-20 Yerim Kang

それがより良い問題 –

についてのアイデアを得るためになりますので、私は全体のコードを追加したので、私は問題が何であるかを知らない、今のコードを追加して、問題のコードを追加してください。 –

ポジショニングがある**非常に** Webページをレイアウトする方法が貧弱です。これは非常に柔軟性がなく、より良い応答性のオプションがあります。[** LearnLayout.com **]（http://learnlayout.com/）をチェックしてください –

"div"または "img"タグを "a"タグで囲み、タグにposition属性を適用し、 "div："のように動作させるために "display：block"を追加してください。

a { 
position: (whatever you like); 
display:block; 
}

出典

2017-09-20 10:37:02 Bench

私は画像を必要な場所にしたいですが、タグにposition属性を適用しても画像は移動します。 –

divまたはimgへのリンクを適用するにはどうすればよいですか？

答えて

関連する問題