我正在移动我的代码以集成到网站中。但我似乎无法将我的内容放在我想要的特定位置,当我尝试绝对位置时,内容本身的格式化了而且我不知道如何继续。 例如,我想把它转移到网站中间的某个地方。 非常感谢帮助
<!DOCTYPE html>
<html>
<head>
<title>News page</title>
<style type="text/css">
/* To align the articles left to right rather than up to down*/
#newssection article{
width: 275px;
display: inline-block;
*display: inline;
zoom:1;
vertical-align: top;
margin: 0 38px 0 0;}
/* To add background to the photos as well as resizing*/
article > img {height:250px;
width:250px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100;%}
/* To draw line above and below latest happening*/
.line{
width: 300px;
height: 3px;
background: url('newimg/line.png') repeat-x ;
margin-bottom: 10px;}
/* color when hovering read more*/
.read:hover{
background-color: #60EC10;}
</style>
</head>
<body>
<div>
<div class="line"></div>
<h1>Latest Happening</h1>
<div class="line"></div>
</div>
<div id="newssection">
<article>
<h1>Foreign exchange was a success</h1>
<img src="newimg/success.jpg" alt="" />
<p>content</p>
<a href="fullwidth.html" class="read">Read More</a>
</article>
<article>
<h1>Congratulations to our winners</h1>
<img src="newimg/winner.jpg" alt="" />
<p>content</p>
<a href="fullwidth.html" class="read">Read More</a>
</article>
<article class="lastarticle">
<h1>Unknown bear species found in school grounds</h1>
<img src="newimg/bear.jpg" alt="" />
<p>content</p>
<a href="fullwidth.html" class="read">Read More</a>
</article>
</div>
</body>
</html>
答案 0 :(得分:0)
对于标题,请尝试
h1 { text-align: center; }
对于新闻报道
#newssection {
width:1000px;
margin:auto;
}
这将使新闻报道成为焦点。
答案 1 :(得分:0)
您的css代码中发现了一些错误,修复了css错误,并添加了额外的div main-conatiner
并添加了text-align:center
#newssection article{
width: 275px;
display: inline-block;
display: inline;
zoom:1;
vertical-align: top;
margin: 0 38px 0 0;}
article > img {height:250px;
width:250px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100);
}
.line{
width: 300px;
height: 3px;
background: url('newimg/line.png') repeat-x ;
margin-bottom: 10px;}
/* color when hovering read more*/
.read:hover{
background-color: #60EC10;}
.main-container
{
padding-left:100px;
padding-top:100px;
padding-right:100px;
padding-bottom:100px;}
<!DOCTYPE html>
<html>
<head>
<title>News page</title>
</head>
<body>
<div class="main-container">
<div>
<div class="line"></div>
<h1>Latest Happening</h1>
<div class="line"></div>
</div>
<div id="newssection">
<article>
<h1>Foreign exchange was a success</h1>
<img src="newimg/success.jpg" alt="" />
<p>content</p>
<a href="fullwidth.html" class="read">Read More</a>
</article>
<article>
<h1>Congratulations to our winners</h1>
<img src="newimg/winner.jpg" alt="" />
<p>content</p>
<a href="fullwidth.html" class="read">Read More</a>
</article>
<article class="lastarticle">
<h1>Unknown bear species found in school grounds</h1>
<img src="newimg/bear.jpg" alt="" />
<p>content</p>
<a href="fullwidth.html" class="read">Read More</a>
</article>
</div>
</div>
</body>
</html>