HTML和CSS设计技术

Question

我用很多位置对附件进行编码：绝对和其他补充标签。我称它们为补充，因为我确定它们并不是要以这种方式使用（快捷方式，黑客程序，基于情况的等等）。

问题是我对前端完全陌生，所以我不确定如何解决此问题并生成真实/正确的代码，因此无论在什么环境（分辨率，平台等）下设计元素保持原样，并且不会因环境变化而丢失其设计。

最后，我听说过媒体查询和SASS / LASS mixin。我已经在寻找的那些。有人可以看看并建议正确的方法（不是代码）。还是这就是它的外观，查询是处理更改的唯一方法（这意味着我的代码是正确的8）？）？

所需输出/ PSD的屏幕截图

<div class="body_caption" style="width:30%;">
  <img src="/mnt/n1/Office/<client name>/dev/res/png/Body/bracket-left.png" style="float:left;">
  <div style="clear:none;">
    <button style="background-color:#01acc8;padding:5px 15px;border-radius:12px;border:0;font-weight:bold;color:white;position:absolute;top:22%;left:5%;">INTRODUCING</button>
    <span style="position:absolute;left:5%;top:25%;">
	<span style="font-weight:bold;font-size:50px;color:#ffe658;">FRESH</span><span style="font-weight:bold;font-size:70px;color:#ffffff;">&</span><span style="font-weight:bold;font-size:50px;color:#03acc9;">CLEAN</span>
    </span>
    <span style="color:#ffffff;position:absolute;top:120%;left:6%;">WE HELP CLEAN ALL YOUR NEEDS WITH OUR VARIOUS SKILLS AND RANGE OF SERVICES.</span>
    <img src="/mnt/n1/Office/<cleint name>/dev/res/png/Body/bracket-right.png" style="position:absolute;top:100%;left:95%;">
    <button style="position:absolute;top:210%;left:5%;width:52%;background:transparent;font-size:8pt;font-weight:bold;color:#ffffff;border-width:2pt;border-color:#ffffff;border-radius:5px;border-style:solid;padding:5px 40px;">FIND OUT MORE</button>
    <button style="position:absolute;top:210%;left:59%;width:52%;background:transparent;font-size:8pt;font-weight:bold;color:#ffffff;border-width:2pt;border-color:#ffffff;border-radius:5px;border-style:solid;padding:5px 40px;">GET A FREE QUOTE</button>
  </div>

Answer 1

 <div class="body_caption" style="width:30%;position: relative;">
  <img src="https://image.ibb.co/nsrpRz/111.jpg" style="background-size: cover;background-position: center;background-repeat: no-repeat;width: 100%;">
  <div style="clear:none;">
    <button style="background-color:#01acc8;padding:5px 15px;border-radius:12px;border:0;font-weight:bold;color:white;position:absolute;top:22%;left:5%;">INTRODUCING</button>
    <span style="position:absolute;left:5%;top:25%;">
	<span style="font-weight:bold;font-size:50px;color:#ffe658;">FRESH</span><span style="font-weight:bold;font-size:70px;color:#ffffff;">&amp;</span><span style="font-weight:bold;font-size:50px;color:#03acc9;">CLEAN</span>
    </span>
    <span style="color: #ffffff;position:absolute;top: 44%;left:6%;font-size: 21px;font-weight: 500;">WE HELP CLEAN ALL YOUR NEEDS WITH OUR VARIOUS SKILLS AND RANGE OF SERVICES.</span>
    <button style="position:absolute;top: 86%;left:5%;background:transparent;font-size: 12px;font-weight: 800;color:#ffffff;border-width: 2pt;border-color: #ffffff;border-radius:5px;border-style:solid;padding: 10px 60px;">FIND OUT MORE</button>
    <button style="background:transparent;border-width:2pt;position: absolute;top: 86%;left: 47%;font-size: 12px;font-weight: 800;color: #ffffff;border-color: #ffffff;border-radius: 5px;border-style: solid;padding: 9px 60px;">GET A FREE QUOTE</button>
  </div>
 
  
  
  
  
  

https://codepen.io/asiyafatima_12/pen/YJwVPR