html - 如何将链接应用到 div 或 img？

标签 html css 

@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，例如像广告一样。但是当我用标签包裹它们时，图像会丢失所有位置值，即使我给它们另一个位置值它们也不会移动。 我应该怎么办？我想位置属性是问题所在，但我不确定。

我的代码写得不是很工整，不知道我的代码是否能帮助你了解我的情况。 :(

最佳答案

用“a”标签包裹“div”或“img”，并将位置属性应用于标签，并确保添加“display:block”使其像“div”一样工作。

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

关于html - 如何将链接应用到 div 或 img？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46319690/

上一篇：css - 编辑 Bootstrap them SASS 作为新手

下一篇：javascript - 如何制作一个全黑的空加载屏幕？这一直有效

相关文章：

php - 简单的 PHP session 错误

javascript - 在 html img 标签中使用函数结果

javascript - 附加新元素后功能不起作用

java - 使用 POI 和 Jsoup 的超链接位于错误位置

javascript - 如何在 4 秒后使用 jquery 激活弹出窗口？

html - 把5个div分成2列，2个固定在左边

html - 是否有 CSS 仅当它是 div 中的第一个元素时才选择 blockquote？

html - div类在应该影响时不影响单独的div id

javascript - 如何向警报添加单选按钮？

html - 为什么 CSS 边界只能在页面加载时正确计算？

©2024 IT工具网  联系我们