Warm tip: This article is reproduced from serverfault.com, please click
css html overlay shopify

html-是否可以将所有这些元素绑定在一起以更改屏幕尺寸/缩放？

(html - Is there a way to bind all these elements together for changing screen sizes/zooming?)

发布于 2020-12-02 15:06:41

因此，我被任命为网络开发人员，并创建了一个网站。gulp我正在尝试找出如何更改CSS的方法，以便即使在放大/缩小过程中以及在所有屏幕上，所有叠加元素都保留在其确切位置。https://diamondbackbranding.com/pages/whypromo始终是这样的。

我尝试过vh / vw，但是元素保持相同大小，并且在媒体中断之间移出位置。解决方案是否只是要像10个不同的媒体中断一样自定义每个中断？Web Dev只是我工作的一部分，而不是我的重点，如果这是一个愚蠢的问题，请对不起。

.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vh;
}

.cggh {
  position: absolute;
  top: 100px;
  left: 0px;
  font-size: 45px;
  text-align: center;
  width: 60%;
  line-height: 35px;
}

.cggi {
  position: absolute;
  top: 140px;
  left: 0px;
  font-size: 30px;
  text-align: center;
  width: 60%;
  line-height: 35px;
}
.ety {
  font-size: 45px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}  
.ety1 {
  font-size: 25px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}
.ety2 {
  font-size: 20px;
  text-align: center;
  width: 55%;
  line-height: 35px;
  color: #0A4E80;
}
.wphead1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 93px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 5px;
  left: 0px;
  font-size: 200px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 215px;
  left: 0px;
  font-size: 96px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 265px;
  left: 0px;
  font-size: 153px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 50px;
  right: 0px;
  font-size: 35px;
  text-align: left;
  width: 40%;
  line-height: 35px;
}
.wpad1 {
 position: absolute;
  top: 600px;
  right: 0px;
  font-size: 45px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}
.wpad2 {
 position: absolute;
  top: 660px;
  right: 0px;
  font-size: 30px;
  text-align: center;
  width: 100%;
  line-height: 35px;
}
.wpad3 {
 position: absolute;
  top: 790px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  text-align: center;
  width: 55%;
  line-height: 35px;
  color: #0A4E80;
}

.relmass1 {
  position: absolute;
  top: 105px;
  left: 130px;
  font-size: 32px;
  text-align: left;
  width: 24%;
  line-height: 30px;
}

.relmass2 {
  position: absolute;
  top: 305px;
  left: 130px;
  font-size: 29px;
  text-align: left;
  width: 25%;
  line-height: 27px;
}

.relmass3 {
  position: absolute;
  top: 550px;
  left: 130px;
  font-size: 28px;
  text-align: left;
  width: 25%;
  line-height: 25px;
}

.relmass4 {
  position: absolute;
  top: 810px;
  left: 130px;
  font-size: 28px;
  text-align: left;
  width: 25%;
  line-height: 25px;
}

.relcrd {
  position: absolute;
  top: 180px;
  right: 240px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}
.relphn {
  position: absolute;
  top: 360px;
  left: 750px;
  font-size: 20px;
  text-align: left;
  width: 17%;
  line-height: 25px;
}
.relhkey {
  position: absolute;
  top: 360px;
  right: 85px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}
.relckey {
  position: absolute;
  top: 860px;
  left: 790px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}
.relwlt {
  position: absolute;
  top: 835px;
  right: 143px;
  font-size: 20px;
  text-align: left;
  width: 20%;
  line-height: 25px;
}

.cggleft {
  position: absolute;
  top: 320px;
  left: 300px;
  font-size: 17px;
  text-align: left;
  width: 8%;
  line-height: 20px;
}

.cggmid {
  position: absolute;
  top: 530px;
  left: 350px;
  font-size: 16px;
  text-align: right;
  width: 12%;
  line-height: 20px;
}
.cggright {
  position: absolute;
  top: 680px;
  right: 710px;
  font-size: 18px;
  text-align: right;
  width: 12%;
  line-height: 20px;
}

.cggbot {
  position: absolute;
  top: 800px;
  left: 15%;
  font-size: 25px;
  text-align: center;
  width: 45%;
  line-height: 25px;
  color: #0A4E80;
}

.cgg53 {
  position: absolute;
  top: 270px;
  right: 150px;
  font-size: 25px;
  text-align: center;
  width: 20%;
  line-height: 30px;
  color: white;
}

.cgg48 {
  position: absolute;
  top: 650px;
  right: 77px;
  font-size: 25px;
  text-align: center;
  width: 18%;
  line-height: 25px;
  color: white;
}

table, td, tr {
  background-color: white;
  text-align: center;
  font-size: 25px;
}

@media screen and (max-width: 768px) {

.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}

.cggh {
  position: absolute;
  top: 10px;
  left: 0px;
  font-size: 15px;
  text-align: center;
  width: 60%;
  line-height: 15px;
}

.cggi {
  position: absolute;
  top: 25px;
  left: 0px;
  font-size: 10px;
  text-align: center;
  width: 60%;
  line-height: 10px;
}
.ety {
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 5px;
}  
.ety1 {
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 5px;
}
.ety2 {
  font-size: 8px;
  text-align: center;
  width: 55%;
  line-height: 8px;
  color: #0A4E80;
}
.wphead1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 7px;
  left: 0px;
  font-size: 35px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 40px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 50px;
  left: 0px;
  font-size: 30px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 8px;
  text-align: left;
  width: 40%;
  line-height: 7px;
}
.wpad1 {
 position: absolute;
  top: 110px;
  right: 0px;
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 15px;
}
.wpad2 {
 position: absolute;
  top: 125px;
  right: 0px;
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}
.wpad3 {
 position: absolute;
  top: 160px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 8px;
  color: #0A4E80;
}
.relmass1 {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 8px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}

.relmass2 {
  position: absolute;
  top: 55px;
  left: 22px;
  font-size: 6.5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}

.relmass3 {
  position: absolute;
  top: 97px;
  left: 22px;
  font-size: 6.5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relmass4 {
  position: absolute;
  top: 145px;
  left: 24px;
  font-size: 6.5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relcrd {
  position: absolute;
  top: 30px;
  right: 12px;
  font-size: 5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relphn {
  position: absolute;
  top: 70px;
  left: 135px;
  font-size: 5px;
  text-align: left;
  width: 17%;
  line-height: 5px;
}
.relhkey {
  position: absolute;
  top: 61px;
  right: 13px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relckey {
  position: absolute;
  top: 158px;
  left: 143px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relwlt {
  position: absolute;
  top: 150px;
  right: 26px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.cggleft {
  position: absolute;
  top: 55px;
  left: 55px;
  font-size: 5px;
  text-align: left;
  width: 9%;
  line-height: 5px;
}
.cggmid {
  position: absolute;
  top: 88px;
  left: 65px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggright {
  position: absolute;
  top: 110px;
  right: 135px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggbot {
  position: absolute;
  top: 145px;
  left: 15%;
  font-size: 7px;
  text-align: center;
  width: 60%;
  line-height: 7px;
  color: #0A4E80;
}
.cgg53 {
  position: absolute;
  top: 48px;
  right: 27px;
  font-size: 6px;
  text-align: center;
  width: 20%;
  line-height: 6px;
  color: white;
}
.cgg48 {
  position: absolute;
  top: 118px;
  right: 17px;
  font-size: 5px;
  text-align: center;
  width: 18%;
  line-height: 5px;
  color: white;
}
table, td, tr {
  background-color: white;
  text-align: center;
  font-size: 10px;
}
}
@media screen and (max-width: 481px) {
.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}

.cggh {
  position: absolute;
  top: 10px;
  left: 0px;
  font-size: 15px;
  text-align: center;
  width: 60%;
  line-height: 15px;
}

.cggi {
  position: absolute;
  top: 25px;
  left: 0px;
  font-size: 10px;
  text-align: center;
  width: 60%;
  line-height: 10px;
}
.ety {
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}  
.ety1 {
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}
.ety2 {
  font-size: 8px;
  text-align: center;
  width: 55%;
  line-height: 8px;
  color: #0A4E80;
}
.wphead1 {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 7px;
  left: 0px;
  font-size: 35px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 40px;
  left: 0px;
  font-size: 18px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 50px;
  left: 0px;
  font-size: 30px;
  text-align: left;
  width: 60%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 8px;
  text-align: left;
  width: 40%;
  line-height: 7px;
}
.wpad1 {
 position: absolute;
  top: 110px;
  right: 0px;
  font-size: 15px;
  text-align: center;
  width: 100%;
  line-height: 15px;
}
.wpad2 {
 position: absolute;
  top: 125px;
  right: 0px;
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 10px;
}
.wpad3 {
 position: absolute;
  top: 160px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  text-align: center;
  width: 100%;
  line-height: 8px;
  color: #0A4E80;
}
.relmass1 {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 7px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}

.relmass2 {
  position: absolute;
  top: 58px;
  left: 22px;
  font-size: 5px;
  text-align: left;
  width: 25%;
  line-height: 5px;
}

.relmass3 {
  position: absolute;
  top: 102px;
  left: 23px;
  font-size: 5px;
  text-align: left;
  width: 25%;
  line-height: 5px;
}
.relmass4 {
  position: absolute;
  top: 147px;
  left: 24px;
  font-size: 5px;
  text-align: left;
  width: 25%;
  line-height: 5px;
}
.relcrd {
  position: absolute;
  top: 25px;
  right: 12px;
  font-size: 5px;
  text-align: left;
  width: 30%;
  line-height: 6px;
}
.relphn {
  position: absolute;
  top: 70px;
  left: 135px;
  font-size: 5px;
  text-align: left;
  width: 17%;
  line-height: 5px;
}
.relhkey {
  position: absolute;
  top: 61px;
  right: 13px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relckey {
  position: absolute;
  top: 158px;
  left: 143px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.relwlt {
  position: absolute;
  top: 150px;
  right: 26px;
  font-size: 5px;
  text-align: left;
  width: 20%;
  line-height: 5px;
}
.cggleft {
  position: absolute;
  top: 55px;
  left: 55px;
  font-size: 5px;
  text-align: left;
  width: 9%;
  line-height: 5px;
}
.cggmid {
  position: absolute;
  top: 88px;
  left: 65px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggright {
  position: absolute;
  top: 110px;
  right: 135px;
  font-size: 5px;
  text-align: right;
  width: 12%;
  line-height: 5px;
}
.cggbot {
  position: absolute;
  top: 145px;
  left: 15%;
  font-size: 7px;
  text-align: center;
  width: 60%;
  line-height: 7px;
  color: #0A4E80;
}
.cgg53 {
  position: absolute;
  top: 48px;
  right: 27px;
  font-size: 6px;
  text-align: center;
  width: 20%;
  line-height: 6px;
  color: white;
}
.cgg48 {
  position: absolute;
  top: 118px;
  right: 17px;
  font-size: 5px;
  text-align: center;
  width: 18%;
  line-height: 5px;
  color: white;
}
table, td, tr {
  background-color: white;
  text-align: center;
  font-size: 6px;
}
}
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%" />
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br />No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;" />
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2"><b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3"><b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd"><b>Your Beautiful Business Card</b><br />Size: 2" x 3.5"<br />Weight: 0.05216 oz</div>
<div class="relphn"><b>Your customers' 1000+ dollar phone</b><br />Size: 5.95" x 2.76"<br />Weight: 6.84 oz</div>
<div class="relhkey"><b>Your customers' key to their very expensive home</b><br />Size: 1.38" x 2.76"<br />Weight: 0.246918 oz</div>
<div class="relckey"><b> Your customers' key to their very expensive car</b><br />Size: 54mm<br />Weight: 3.80 oz</div>
<div class="relwlt"><b>The thing that holds your customers' money and important personal information</b><br />Size: 3.5" x 4.5"<br />Weight: 5 oz</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%" />
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br />handwritten note for maximum oxytocin levels)</div>
</div>
<div class="ety">EMPLOYEE THANK YOU'S.</div>
<br />
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div>
<br /><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br />
<table width="100%">
<tbody>
<tr>
<td width="33%"><b>High Five</b><br />Surface is covered in germs <br />which spread on contact.</td>
<td width="33%"><b>Pizza Party</b><br />While everyone loves pizza, <br />the effects are not long-lasting.</td>
<td width="33%"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br /> Made of durable material that lasts,<br /> it is very functional with their lifestyle,<br /> and can be given with the company logo.</td>
</tr>
</tbody>
</table>
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/employee_icons.png?v=1604957829" alt="EIcons" width="100%" />
Questioner
Noob Pat
Viewed
11
分享
A Haworth 2020-12-03 21:19:40

问题在于找到可以在不同视口尺寸下使用的样式。问题包括一些初始HTML，但不包括来自其他站点的样式以及已应用在顶部的一些样式。

问题在于问题中应用的样式在某些地方使用固定单位，但是原始站点使用的是相对于视口的完全相对大小，包括字体大小。这是必要的，因为尽管在适当的地方（例如网格）使用了“现代” CSS，但必须在需要在几个GIF上正确放置文本的地方应用相对定位和大小调整。

如果我们不使用问题中给出的样式元素，而是使用样式作为原始网站中的主要元素，我们将（几乎）获得所需的内容，即有人已经完成了查找文本覆盖位置的工作GIF应该是正确的，而且所有这些都相对定位。

这就是全部。需要进行一些调整才能正确填充，我不得不更正原始CSS中的错误（缺少；并且object-fit应用于包含元素，而不是img本身），但否则事情似乎就在正确的地方并且可以正常工作关于调整大小，尽管你可能要考虑在此处使用的一个断点处实际发生的情况，即600px宽度。

<main class="main-content mobile-main " style="margin-top: initial; padding-top: 0px;">

<!-- /templates/page.liquid -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  #PageContainer {
    background-color: #ffffff;
}
</style>

<div class="grid--full section__standard-spacing--even">
    <div class="rte page-text">
<style>
:root {
    --swiper-navigation-size: 44px;
}
* {
  box-sizing: border-box;
}
.container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}
.wphead1 {
  position: absolute;
  top: 0%;
  left: 0%;
  font-size: 5.05vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 3%;
  left: 0%;
  font-size: 10.8vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 23.5%;
  left: 0%;
  font-size: 5.2vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 28.5%;
  left: 0px;
  font-size: 8.2vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 5%;
  right: 0%;
  font-size: 1.4vw;
  text-align: left;
  width: 35%;
}
.wpad1 {
 position: absolute;
  top: 65%;
  right: 0%;
  font-size: 3vw;
  text-align: center;
  width: 100%;
}
.wpad2 {
 position: absolute;
  top: 74%;
  right: 0%;
  font-size: 2vw;
  text-align: center;
  width: 100%;
}
.wpad3 {
 position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2vw;
  text-align: center;
  width: 55%;
  color: #0A4E80;
}

.relmass1 {
  position: absolute;
  top: 10%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  line-height: 100%;
  width: 25%;
}

.relmass2 {
  position: absolute;
  top: 28%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass3 {
  position: absolute;
  top: 50.8%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass4 {
  position: absolute;
  top: 74%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relcrd {
  position: absolute;
  top: 17.8%;
  right: 3.8%;
  font-size: 1vw;
  text-align: left;
  width: 30%;
  line-height: 100%;
}
.relphn {
  position: absolute;
  top: 34%;
  left: 43.3%;
  font-size: 1vw;
  text-align: left;
  width: 17%;
  line-height: 100%;
}
.relhkey {
  position: absolute;
  top: 34%;
  right: .8%;
  font-size: 1vw;
  text-align: left;
  width: 24%;
  line-height: 100%;
}
.relckey {
  position: absolute;
  top: 82%;
  left: 45.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}
.relwlt {
  position: absolute;
  top: 81%;
  right: 8.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}

.cggh {
  position: absolute;
  top: 6%;
  left: 0%;
  font-size: 3vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}

.cggi {
  position: absolute;
  top: 13%;
  left: 0%;
  font-size: 2vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}
  
.cggleft {
  position: absolute;
  top: 35%;
  left: 17%;
  font-size: 1vw;
  text-align: left;
  width: 8%;
  line-height: 100%;
}

.cggmid {
  position: absolute;
  top: 58%;
  left: 20%;
  font-size: 1vw;
  text-align: right;
  width: 13%;
  line-height: 100%;
}
  
.cggright {
  position: absolute;
  top: 73%;
  right: 41%;
  font-size: 1vw;
  text-align: right;
  width: 12%;
  line-height: 100%;
}

.cggbot {
  position: absolute;
  bottom: 3%;
  left: 15%;
  font-size: 1.5vw;
  text-align: center;
  width: 45%;
  line-height: 100%;
  color: #0A4E80;
}

.cgg53 {
  position: absolute;
  top: 30%;
  right: 9%;
  font-size: 1.3vw;
  text-align: center;
  width: 20%;
  line-height: 100%;
  color: white;
}

.cgg48 {
  position: absolute;
  top: 71%;
  right: 5%;
  font-size: 1.3vw;
  text-align: center;
  width: 18%;
  line-height: 100%;
  color: white;
}
  
  
.ety {
  font-size: 2.5vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}  
.ety1 {
  font-size: 1.7vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}
.ety2 {
  font-size: 1.3vw;
  text-align: center;
  width: 55%;
  line-height: 100%;
  color: #0A4E80;
}
  

.grid-container {
  display: grid;
  rgrid-template-columns: auto auto auto;
  width: 100%;
}
.grid-item {
  font-size: 1.5vw;
  text-align: center;
}

.grid-item img {
  object-fit: contain;
  width: 10vw;
  rwidth: 33.33%;
}
@media only screen and (max-width: 600px) {
  .container1 {
  position: relative;
  text-align: center;
  color: black;
  font-size: 2.5vw;
}
.wphead1 {
  position: absolute;
  top: 0%;
  left: 0%;
  font-size: 4.2vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead2 {
  position: absolute;
  top: 3%;
  left: 0%;
  font-size: 9vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead3 {
  position: absolute;
  top: 21%;
  left: 0%;
  font-size: 4.3vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wphead4 {
  position: absolute;
  top: 27%;
  left: 0px;
  font-size: 6.8vw;
  text-align: left;
  width: 100%;
  color: #c25e36;
}

.wpright {
  position: absolute;
  top: 0%;
  right: 0%;
  font-size: 1.4vw;
  text-align: left;
  width: 45%;
}
.wpad1 {
 position: absolute;
  top: 60%;
  right: 0%;
  font-size: 3vw;
  text-align: center;
  width: 100%;
}
.wpad2 {
 position: absolute;
  top: 68%;
  right: 0%;
  font-size: 2vw;
  text-align: center;
  width: 100%;
}
.wpad3 {
 position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  text-align: center;
  width: 55%;
  color: #0A4E80;
}

.relmass1 {
  position: absolute;
  top: 10%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  line-height: 100%;
  width: 25%;
}

.relmass2 {
  position: absolute;
  top: 28%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass3 {
  position: absolute;
  top: 50.8%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relmass4 {
  position: absolute;
  top: 74%;
  left: 8.5%;
  font-size: 1.4vw;
  text-align: left;
  width: 26%;
  line-height: 100%;
}

.relcrd {
  position: absolute;
  top: 17.8%;
  right: 3.8%;
  font-size: 1vw;
  text-align: left;
  width: 30%;
  line-height: 100%;
}
.relphn {
  position: absolute;
  top: 34%;
  left: 43.3%;
  font-size: 1vw;
  text-align: left;
  width: 17%;
  line-height: 100%;
}
.relhkey {
  position: absolute;
  top: 34%;
  right: .8%;
  font-size: 1vw;
  text-align: left;
  width: 24%;
  line-height: 100%;
}
.relckey {
  position: absolute;
  top: 82%;
  left: 45.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}
.relwlt {
  position: absolute;
  top: 81%;
  right: 8.5%;
  font-size: 1vw;
  text-align: left;
  width: 20%;
  line-height: 100%;
}

.cggh {
  position: absolute;
  top: 6%;
  left: 0%;
  font-size: 3vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}

.cggi {
  position: absolute;
  top: 13%;
  left: 0%;
  font-size: 2vw;
  text-align: center;
  width: 60%;
  line-height: 100%;
}
  
.cggleft {
  position: absolute;
  top: 35%;
  left: 17%;
  font-size: 1vw;
  text-align: left;
  width: 8%;
  line-height: 100%;
}

.cggmid {
  position: absolute;
  top: 58%;
  left: 20%;
  font-size: 1vw;
  text-align: right;
  width: 13%;
  line-height: 100%;
}
  
.cggright {
  position: absolute;
  top: 73%;
  right: 41%;
  font-size: 1vw;
  text-align: right;
  width: 12%;
  line-height: 100%;
}

.cggbot {
  position: absolute;
  bottom: 3%;
  left: 15%;
  font-size: 1.5vw;
  text-align: center;
  width: 45%;
  line-height: 100%;
  color: #0A4E80;
}

.cgg53 {
  position: absolute;
  top: 30%;
  right: 9%;
  font-size: 1.3vw;
  text-align: center;
  width: 20%;
  line-height: 100%;
  color: white;
}

.cgg48 {
  position: absolute;
  top: 71%;
  right: 5%;
  font-size: 1.3vw;
  text-align: center;
  width: 18%;
  line-height: 100%;
  color: white;
}
  
  
.ety {
  font-size: 3vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}  
.ety1 {
  font-size: 2vw;
  text-align: center;
  width: 100%;
  line-height: 100%;
}
.ety2 {
  font-size: 1.5vw;
  text-align: center;
  width: 55%;
  line-height: 100%;
  color: #0A4E80;
}
  

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}
.grid-item {
  font-size: 1.5vw;
  text-align: center;
  object-fit: contain;
}
.grid-item img {
  object-fit: contain;
}
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  width: 100%;
}
.grid-item {
  font-size: 1.5vw;
  text-align: center;
  object-fit: contain;/* wrong place */
}
.grid-item img {
  object-fit: contain;
}  
  
</style>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%">
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br>No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;">
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2">
<b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3">
<b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd">
<b>Your Beautiful Business Card</b><br>Size: 2" x 3.5"<br>Weight: 0.05216 oz</div>
<div class="relphn">
<b>Your customers' 1000+ dollar phone</b><br>Size: 5.95" x 2.76"<br>Weight: 6.84 oz</div>
<div class="relhkey">
<b>Your customers' key to their very expensive home</b><br>Size: 1.38" x 2.76"<br>Weight: 0.246918 oz</div>
<div class="relckey">
<b> Your customers' key to their very expensive car</b><br>Size: 54mm<br>Weight: 3.80 oz</div>
<div class="relwlt">
<b>The thing that holds your customers' money and important personal information</b><br>Size: 3.5" x 4.5"<br>Weight: 5 oz</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%">
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br>handwritten note for maximum oxytocin levels)</div>
</div><br><br>
      
<!-- Not attached to any card, free floating -->      

<div class="ety">EMPLOYEE THANK YOU'S.</div>
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br><br>
  <div class="grid-container">
  <div class="grid-item"><b>High Five</b><br>Surface is covered in germs <br>which spread on contact. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/hands_1.png?v=1606939061" height=""></div>
  <div class="grid-item"><b>Pizza Party</b><br>While everyone loves pizza, <br>the effects are not long-lasting. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/pizza_1.png?v=1606939061"></div>
  <div class="grid-item"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br> Made of durable material that lasts,<br> it is very functional with their lifestyle,<br> and can be given with the company logo. <br><br>  <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/drinkwear_1.png?v=1606939061"></div><br>
  </div>
  </div></div>
</main>

注意：原始网站将样式元素放入HTML中，但如今还不行，因此需要进行一些整理。

Noob Pat 2020-12-03 16:50:42

是的，昨天我花了大约6个小时来编辑所有内容。正是我想要的，谢谢！

A Haworth 2020-12-03 17:05:16

很高兴，它的GIF很有趣-但是要使文本正确对齐有些棘手，所以请其他人为我们做这件事！

热门帖子

1
浙江 ISP 会屏蔽 Wireguard UDP 端口
2
vercel 免费版 3 个指标都超了，好像我的网站已经获得了基础流量。还好套了 cloudflare 不然流量也超了。
3
最近换了真我手机，发现这系统连应用的数据都无法备份
4
MacBook Pro 决赛圈
5
杭州岗位太少了
6
求推荐硬路由（1000 内）
7
DevOps Engineer-兼职远程-每日工作量 3-4 个小时-薪资可议
8
有没有新加坡地区的 vps 推荐？
9
使用了这么多年水果机，才发现竟然不能指定某日设置闹钟
10
求推荐一款无风扇能上机架的万兆电口交换机

热门github

1
Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information (翻译：论文实现——YOLOv9: Learning What You Want to Learn using Programmable Gradient Information（利用可编程梯度信息学习您想学的内容）)
2
A Windows and Office activator using HWID / Ohook / KMS38 / Online KMS activation methods, with a focus on open-source code and fewer antivirus detections. (翻译：使用 HWID / KMS38 / Online KMS 激活方法激活 Microsoft 产品的脚本集合，重点是开源代码、较少的防病毒检测和用户友好性。)
3
Get up and running with Llama 2, Mistral, Gemma, and other large language models. (翻译：启动并运行 Llama 2、Mistral、Gemma 和其他大型语言模型。)
4
该项目可以让你通过订阅的方式使用Cloudflare WARP+，自动获取流量。This project enables you to use Cloudflare WARP+ through subscription, automatically acquiring traffic.
5
Multi functional app to find duplicates, empty folders, similar images etc. (翻译：多功能应用程序可查找重复项、空文件夹、相似图像等。)
6
Xray panel supporting multi-protocol multi-user expire day & traffic & ip limit (Vmess & Vless & Trojan & ShadowSocks & Wireguard) (翻译：Xray面板支持多协议多用户到期日&流量&IP限制（Vmess & Vless & Trojan & ShadowSocks & Wireguard)
7
The Free Software Media System (翻译：Jellyfin 是一个免费软件媒体系统，可让您控制管理和流式传输您的媒体。它是专有 Emby 和 Plex 的替代方案，通过多个应用程序从专用服务器向最终用户设备提供媒体。)
8
lightweight, standalone C++ inference engine for Google's Gemma models. (翻译：适用于 Google Gemma 模型的轻量级独立 C++ 推理引擎。)
9
📚 Freely available programming books (翻译：📚 免费提供的编程书籍)
10
A collective list of free APIs (翻译：免费 API 的集合列表)
11
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java (翻译：十亿行挑战 —— 使用 Java 对文本文件中的 10 亿行数据进行聚合的有趣探索)
12
🎓 Path to a free self-taught education in Computer Science! (翻译：🎓计算机科学免费自学教程！)
13
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA... (翻译：从零开始学习 Python 编程语言的课程，适合初学者)
14
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems (翻译：该存储库包含系统设计资源，在准备面试和学习分布式系统时非常有用)
15
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention. (翻译：Mamba 是一种新的状态空间模型架构，在信息密集型数据（例如语言建模）上显示出良好的性能，而之前的二次模型在 Transformers 方面存在不足。它基于结构化状态空间模型的进展，并本着FlashAttention的精神进行高效的硬件感知设计和实现。)