Question

你好我试图编写一个模板（我的第一个），（不使用bootstrap，提高我的css技能），我在网上找到了，我在投资组合区域有问题，我打电话给＃34;画廊＆＃34;在我的代码中。

此区域的结果是我http://i.imgur.com/0Y6Dsb3.png

我得到的是： https://codepen.io/Kestvir/pen/BReraN

我认为这是一个明确的问题，但<section>已被清除。我该如何解决这个问题？

其次，模板中的图像是使用<img>元素导入的，因此我决定这样做，但不会将它们作为背景图像导入，更好更正确的方法？

此外，是否有任何好的教程，或任何其他方法来改善编码PSD模板？因为，尽管如此，我已经观看了十亿次＆＃34; CSS基础知识＆＃34;视频，我真的很难编写PSD设计，不知道最佳实践，并且没有能够找到任何好的视频，这些视频是英文的，没有使用bootstrap 。

Answer 1

每个块看起来都像这样，将文本移动到img块中，然后用另一个带有类img-text的子div块包装它：

  <div class="projects">
    <div class="gallery-image">
      <a href="">
        <img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
      <div class="img-text">
        <h4>A project</h4>
        <p>Some text</p>
      </div>
    </div>
  </div>

然后添加以下css：

.gallery-image a {
  background: white;
}

.img-text {
  background: white;
}

这可以帮助您继续编写您想要实现的目标

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

HTML5 display-role reset for older browsers article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

////////////* CSS reset end *////////////////
body {
  background: #fff;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

p,
a {
  font-family: 'Open Sans', sans-serif;
}

* {
  box-sizing: border-box;
  outline: none;
}

.wrapper {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2%;
}

#gallery {
  background: #dfdfdf;
  text-align: center;
  padding: 125px 0;
  margin-left: auto;
  margin-right: auto;
}

h2 {
  color: #282828;
  margin-top: 10px;
  font-size: 45px;
}

h3 {
  color: #777;
  font-weight: 400;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 75px;
}

.projects {
  background: #fff;
}

section:after {
  content: "";
  display: table;
  clear: both;
}

.gallery-image {
  float: left;
  width: 33.333%;
  padding-left: 1%;
  padding-right: 1%;
  text-align: center;
}

#gallery img {
  width: 100%;
  height: 289px;
}

.img-text {
  background: white;
}

<main>
  <section id="gallery">
    <div class="wrapper">
      <h2>Our Gallery</h2>
      <h3>Lorem bizzle dolizzle sizzle amet</h3>

      <div class="projects">
        <div class="gallery-image">
          <div class="img-text">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <h4>A project</h4>
            <p>Some text</p>
          </div>
        </div>
      </div>


      <div class="projects">
        <div class="gallery-image">
          <div class="img-text">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <h4>A project</h4>
            <p>Some text</p>
          </div>
        </div>
      </div>

      <div class="projects">
        <div class="gallery-image">
          <div class="img-text">
            <a href=""><img src="http://i.stack.imgur.com/WCveg.jpg" alt="gallery-image"></a>
            <h4>A project</h4>
            <p>Some text</p>
          </div>
        </div>
      </div>


    </div>

  </section>

</main>

在浮动图像之后直接添加内容

1 个答案: