Question

我正在进行代码测试，这是一个psd文件的模型，我以前从未做过。我遇到了移动问题的问题，我的主要经验是使用Ruby和Ruby on Rails框架的后端，所以这对我来说有点新鲜。

我需要帮助移动电话图标旁边的电话号码。我正在使用中间人app框架。

    @charset "utf-8";
@import "normalize";

body {
  background: #white;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
}

nav > ul > li > a {
   text-decoration: none;
}

.border{
   position:relative;
}
.border:hover::after{
   content:'';
   position:absolute;
   width: 100%;
   height: 0;
   left:0;
   bottom: -1px; /*Change this to increase/decrease distance*/
   border-bottom: 4px solid #FFA500;
}

nav {
  width: 100%;
  margin: 20px 0;
}

nav ul {
  list-style: none;
  overflow: hidden;
}

nav ul li {
  float: right;
  width: 10%;
}

nav ul li a {
  padding: 8px 0;
  display: block;
  width: 100%;
  margin-left: -10em;
  font-family: "HelveticaNeueLTCom Hv";
  color: #000000;
  font-weight: bolder;
}

.logo img {
  height: 100;
  width: 90;
  margin-left: 4.4em;
  margin-top: .5em;
}

.navlogo img {
  margin-left: 5em;
  margin-top: 5em;
  padding-bottom: 2em;
}

.socialicons {
 margin-left: 73.5em;
 margin-top: -32.3em;
 }

 .phone img{
   margin-left: 62em;
   margin-top: -9em;
   margin-bottom: 12em;

 }

 h4 {
   margin-left: 55em;

   margin-top: 11.6em;
   font-family: "HelveticaNeueLTCom Hv";
   font-size: 20px;
 }

 .mt h1 {
  color: #000000;
  position: relative;
  margin-left: 12em;
  font-family: Helvetica regular;
  font-size: 1.8em;
  font-weight: 400;
}

.doc {
  margin: 3em 0;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  font-weight: 300;

  a {
    border: 1px solid white;
    border-radius: 3px;
    padding: 0.75em 0.7em;
    color: white;
    text-decoration: none;
    transition: color 0.1s linear;
    &:hover {
      background: rgba(0,0,0,0.2);
      color: white;
      transition: all 0.15s linear;
    }
  }
}

.welcome {
  -webkit-animation-name: welcome;
  -webkit-animation-duration: .9s;
}

@-webkit-keyframes welcome {
  from {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  50% {
   -webkit-transform: scale(0);
   opacity: 0;
  }
  82.5% {
    -webkit-transform: scale(1.03);
    -webkit-animation-timing-function: ease-out;
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1);
  }
}

HTML就在这里

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

   <meta name="Author" content="Keith R. Bachand"/>
   <meta name="Keywords" content="Keith Bachand, Speed Digital"/>
   <meta name="Description" content="Speed Digital Mockup"/>
   <meta charset="utf-8">
      <title>Speed Digital Mockup</title>
</head>
<!--NAVBAR START-->
<div class="navlogo">
<%= image_tag "sdlogo.png" %>
</div>
<div class="phone">
<%= image_tag "phone.jpg" %>
</div>

<h4>800-900-9090</h4>

<div class="socialicons">
  <%= link_to image_tag("facebookicon.png"), "https://www.facebook.com/speeddigitalusa/" %>
  <%= link_to image_tag("youtubeicon.png"), "https://www.youtube.com/channel/UChY6iAIh9waeZ6EGAhuoAVQ" %>
  <%= link_to image_tag("twittericon.png"), "https://twitter.com/speeddigitalusa" %>
</div>

<nav>
   <ul>
       <li><a class="border" href="#">CONTACT</a>
       </li>
       <li><a class="border" href="#">ABOUT US</a>
       </li>
       <li><a class="border" href="#">CAR FINDER</a>
       </li>
       <li><a class="border" href="#">SERVICES</a>
       </li>
       <li><a class="border" href="#">INVENTORY</a>
       </li>
       <li><a class="border" href="#">HOME</a>
       </li>
   </ul>
</nav>

<!--NAVBAR END-->
<body>

<div class="welcome">
<div class="logo">
    <%= image_tag "mainimg.png" %>
</div>
<div class="mt">
  <h1>MODERN TECHNOLOGY</h1>
</div>
  <div class="cp">
  <h3>FUELED BY CLASSIC PASSION</h3>
</div>
  <p class="doc">
    <%= link_to "LEARN MORE >", "https://speeddigital.com", target: "_blank" %>
  </p><!-- .doc -->
</div><!-- .welcome -->

Answer 1

我不了解Middleman部分，但是从猜测布局来看，我会尝试这样的事情。

<style>
.inline {
    display: inline-block;
}
h4 {
   /*margin-left: 55em;*/
   /*margin-top: 11.6em;*/
   font-family: "HelveticaNeueLTCom Hv";
   font-size: 20px;
 }
</style>

<div class="phone">
    <%= image_tag "phone.jpg" %>
    <h4 class="inline">800-900-9090</h4>
</div>

这会将img和h4内联，然后你可以定位边距，宽度，等等......

如果你在没有中间人的情况下做出榜样，我可以提供更好的帮助。

使用HTML和CSS正确地移动东西

1 个答案: