我一直在努力與一些CSS樣式。問題是我無法正確定位圖像。由於某種原因,圖像無法以正確的預期流程顯示。我也想集中整個內容。調整瀏覽器大小時,它不能正確集中。一旦你複製過我的代碼,你可以很容易地注意到所有這些問題。這是我的代碼。由於 HTML需要幫助在我的代碼中的CSS定位
body {
font-family: 'Open sans',sans-serif;
}
#content p {
padding: 5px;
font-size: 0.8em;
}
#wrap {
max-width: 900px;
padding: 3%;
margin: 0 auto;
}
ul {
list-style-type: none;
padding: 0;
}
#contact a {
padding-left: 35px;
background-repeat: no-repeat;
background-size: 20px;
}
#content a {
width: 100%;
display: inline-block;
height: 100%;
}
#content li img {
width: 100%;
}
a {
text-decoration: none;
}
#content li {
float: left;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
footer {
clear: both;
text-align: center;
}
footer img {
width: 25px;
}
h1 {
font-weight: normal;
font-family: 'Change one', sans-serif;
color: #fff;
font-size: 2.4em;
padding: 0px;
margin: 0px;
display: inline-block;
}
h2 {
font-size: .9em;
font-weight: normal;
color: #fff;
margin: 10px 0;
}
#content ul {
padding: 0;
margin: 0;
}
<div id="wrap">
<div id="content">
<ul>
<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg">
<p>Experimentation with color and texture Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg">
<p>Experimentation with color and textureExperimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg">
<p>Experimentation with color and texture</p></a>
</li>
</ul>
</div>
<footer>
<img src="img/twitter-wrap.png">
<img src="img/facebook-wrap.png">
<p>© 2014 Chimed.</p>
</footer>
</div>
在#content裏設置2個屬性li {height:200px; margin-bottom:100px;}它會更好,但你會遇到色彩背景的問題 – Alexander 2014-12-13 15:54:49