- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
@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/
我想替换每一个 带结束标记 字符串中的标记。该字符串实际上是一个 html 文档,其中 img 标记由我生成,并且始终如下所示: Src 是用户输入,所以它可以是任何东西。我做了一个正则表达式,不确
我使用数组通过 getElementsByClassName 存储我所有的 imgs。 我需要知道哪个 img 被点击或 mouseover/mouseout,所以我使用循环来检查哪个 img 被点击
我正在尝试使用图像制作一款类似 Match3 的游戏,但我无法进行比较。我正在为固定数量的 atm 执行此操作,只是为了让它正常工作,稍后应该在 foreach 循环中。如果有什么区别的话,该函数位于
我希望你能帮助我:) 我想定义 img 的高度,相对于图像的“实际”宽度。但宽度是动态的,因为它占父对象的百分比(wxample 的浏览器窗口)。 为什么我需要高度?:没有高度它工作正常,但我需要它,
我知道这个话题被讨论了很多,但我找不到任何适合我的解决方案。所以,我的代码大致是: var img =me.images[curID] var f = function() { var
我试图在一个页面上列出多个图像,但当您单击图像时,它会以模式打开。 它适用于第一张图片,但不适用于其他图片,我假设这是一个 JS 问题,我尝试设置一个空的 var,然后将其设置为获取元素 ID(每个
任务:我们正在通过 HttpWebRequest 抓取 HTML 内容(约 6,000 个调用)。该字符串经过修剪并存储在 SQL Server 2014 数据库中,以便作为 XML 进行处理。 问题
我从上面得到这个错误,不知道如何避免它。我的目的是获取屏幕截图,然后对其进行模板匹配,以查看此时屏幕上是否显示图标。到目前为止,它只是图标的位置。我的代码: #include "opencv2/hig
我有一个包含图像的容器,该图像是从应用程序加载的,因此容器的尺寸是已知的,而图像会有所不同。 我目前有以下 css: #secondary_photos { height: 100px; wi
我正在尝试设置一个随分辨率缩放但看起来仍然不错的页面背景..这就是我正在使用的.. 站点是http://www.gd-gaming.com/wordpress ,如果你用 Firebug 检查它,它只
目前我有 如何删除包装 img 标签的 p 标签? 所以我可以得到.. 最佳答案 使用 $('p > img').unwrap(''); 这将删除 img 周围的所有 p。您应该使用 cl
我想要动画 3 .svg图片: 和css : .sequence { position: relative; } .sequence img { position: ab
我有外部 RSS 提要填充以下重复出现的类 elements 。 {teaserImage} {teaserImage} {teaserImage} 我想简单地获取 :first 实例,该实例也是来自
这是一个独特的问题: 我不想使用浏览器 JavaScript 来解决这个问题,请继续阅读... 我要转换 通过编译应用程序( ng build 或 ng serve )到 Base64 img 标签,
悬停在 中的第一张图片上标记,我需要使用 CSS 增加第二张图片的不透明度。我试过使用 +和 ~运营商,无法让它发挥作用。任何帮助将不胜感激。 最佳答案 a:hover + img
我已经尝试解决这个问题有一段时间了,但我迷路了,有人吗? for(var i=0; i<10; i++) { var Img = new Image(); Img.onload = (
这就是我想要实现的目标: 当用户将鼠标悬停在较小的图像之一上时: 较小的图像 + 文本应替换较大的图像 + 文本。 当用户没有悬停时;将大集返回到其原始图像和文字。 这就是我到目前为止所拥有的。它没有
我知道如何在 php 中执行此操作,但我需要在 javascript/jquery 中完成此操作。 我正在尝试执行以下操作: $('#NewBox').html( $('#OldBox').html(
我正在使用一个 CMS (ExpressionEngine),它将段落标签包裹在图像周围。我正在使用响应式图像(最大宽度:100%),并且由于我还在段落上定义宽度,因此它会导致问题。我想使用 jQue
Tinymce 正在删除我的 img 结束标记并生成无效的 xhtml。 它变成了这个 进入这个 我也在使用 codemagic,但是在查看 html 时它仍然显示 .我也试过包括 , 但输出是
我是一名优秀的程序员,十分优秀!