克隆一个 dribbble 布局，link 文本稍微出现在顶部而不是中间

Question

我正在尝试从这个运球中克隆最左边的模板进行练习：https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

到目前为止，这是我的代码笔： https://codepen.io/TheKyleDev/project/editor/ZWbLbw

.hero a {
  background: #FFF;
  color: #000;
  font-size: 0.75em;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: 0.05em;
  font-size: 0.65em;
  padding: 8px 18px;
  border-radius: 3px;
}

出于某种原因，按钮 link 的行为很奇怪。尽管在顶部和底部有均匀的填充，但文本看起来更靠近顶部。有人可以给我解释一下吗？

Answer 1

您的代码中存在结构问题。我已经重写了它供您参考。希望这有帮助。

HTML

<!DOCTYPE html>
    <html>
        <head>
            <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <!-- <header class="hero">
                <p>Mark Manson</p>
                <h1>The<br />Dark Side<br />of the<br />Digital<br />Nomad</h1>

                <div class="btn"><a href="#">Travel</a></div>
           </header>
           <footer>Close</footer> -->

           <div class="container">
               <section class="data-chunk">
                   <h4>mark manson</h4>
                   <h1>the <br> dark side <br> of the <br> digital <br> nomad</h1>
                   <p class="tag">travel</p>
               </section>
               <section class="nav-chunk">
                   <p class="close-btn left"><a href="#">close</a></p>
                   <ul class="dots left">
                       <li class="selected"><a href="#">1</a></li>
                       <li><a href="#">2</a></li>
                       <li><a href="#">3</a></li>
                       <li><a href="#">4</a></li>
                   </ul>
                   <p class="chat right"><a href="#">chat with us</a></p>
                   <div class="clear"></div>
               </section>
           </div>
       </body>
   </html>

CSS

* {
  box-sizing: border-box;
}

html, body {
    background: #eaeaea;
    font-family: 'Josefin Sans', sans-serif;
    margin: 0;
    padding: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.container {
    background: transparent url(https://static.pexels.com/photos/6706/light-sky-beach-sand.jpg) top left;
    background-size: cover;
    box-shadow: 0px 0px 10px #ccc;
    height: 640px;
    margin: 4%;
    position: relative;
    width: 360px;
}

.data-chunk {
    bottom: 48px;
    padding: 15% 7%;
    position: absolute;
    width: 100%;
}

.data-chunk h4 {
    font-weight: normal;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    text-transform: uppercase;
}

.data-chunk h1 {
    font-size: 2.4rem;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 2px #333;
    text-transform: uppercase;
}

.tag {
    background: #fff;
    box-shadow: 1px 1px 1px #333;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    max-width: 80px;
    font-size: .75rem;
    display: block;
    padding: 3.5% 2% 2% 2%;
    border-radius: 2px;
    letter-spacing: 2px;
}

.nav-chunk {
    background: #fff;
    bottom: 0;
    left: 0;
    padding: 2% 6%;
    position: absolute;
    width: 100%;
}

.close-btn a{
    color: #000;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.dots {
    list-style-type: none;
    margin-left: 26%;
    padding: 0;
}

.dots li {
    background: #ccc;
    border-radius: 6px;
    float: left;
    height: 6px;
    margin: 3px;
    text-indent: -9999px;
    width: 6px;
}

.dots li.selected {
    background: #333;
}

.chat {
    background: transparent url(chat.jpg) no-repeat 0 0;
    background-size: cover;
    height: 20px;
    margin: 12px 0;
    text-indent: -9999px;
    width: 20px;
}


/*html, body { height:100%; }
body {
  padding: 0;
  margin: 0;
}
h1 {
}
header.hero {
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  line-height: 3rem;
  letter-spacing: -0.04rem;
  width: 100%;
  max-width: 350px;
  height: 600px;
  background-image: url(https://static.pexels.com/photos/6706/light-sky-beach-sand.jpg);
  background-size: cover;
  text-shadow: 2px 3px 3px rgba(0,0,0,0.3);
  padding: 100px 0 30px 20px;
  color: white;
}
.hero a {
  background: #FFF;
  color: #000;
  font-size: 0.75em;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: 0.05em;
  font-size: 0.65em;
  padding: 8px 18px;
  border-radius: 3px;
}
.hero p {
  margin-top: 0;
  font-size: 0.75em;
}*/

克隆一个 dribbble 布局，link 文本稍微出现在顶部而不是中间

Cloning a dribbble layout and the link text is appearing slightly at the top vs the middle

html

css

fonts

codepen

HTML

CSS