先上的超級簡單的原型
然後是效果圖
然後上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
</nav>
<div id="banner">
<div class="inner">
<h1>標題一</h1>
<h4 class="sheading"></h4>
</div>
</div>
</header>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="./1.jpg"></div>
<div class="text-section">
<h2>標題一</h2>
<p>標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一</p>
<a href="#">瞭解更多</a>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>標題一</h2>
<p>標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一</p>
<p> 標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一</p>
</div>
<div class="img-section">
<img src="./1.jpg">
</div>
</div>
<div class="article-preview">
<div class="img-section">
<img src="1.jpg" >
</div>
<div class="text-section">
<h2>233</h2>
<p>標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一</p>
<p>標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一</p>
<p>標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一標題一 </p>
<a href="#">回到頂部</a>
</div>
</div>
</section>
</div>
</body>
</html>
header
{
background:url(1.jpg);
background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
}
#banner{
background: transparent;
height: 700px;
}
#banner .inner
{
background-color:rgba(255,255,255,0.3);
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1
{
margin: 0;
color: #000;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
color: #fff;
}
.sheading
{
line-height: 30px;
margin: 30px 0;
color: #000;
}
h2
{
font-size: 30px;
}
h3
{
font-size: 24px;
}
p
{
font-size: 18px;
letter-spacing: 1px;
}
a
{
font-size: 18px;
letter-spacing: 1px;
}
.sub-heading
{
font-size: 18px;
}
#main-btn
{
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-collapse: 6px;
background: #18a;
}
.icon-group
{
margin-top: 60px;
}
.wrapper
{
max-width: 1080px;
margin: 0 auto;
}
.gray-section
{
background: #252F34;
color: #fff;
}
.gray-section .img-section
{
width: 45%;
margin: 0;
}
.img-section img
{
width: 100%
}
.gray-section .text-section
{
width: 55%;
}
.article-preview > div
{
float: left;
font-size: 0;
}
.article-preview:nth-child(odd)
{
background-color: rgba(255,255,255,0.05);
}
.article-preview:after
{
content: '';
display: block;
clear: both;
}
.text-section
{
position: relative;
top: 68px;
left: 50px;
}
.text-section h2
{
margin-bottom: 20px;
}
.text-section .sub-heading
{
font-size: 22px;
margin-top: 0;
}
.text-section p
{
font-size: 18px;
letter-spacing: 1px;
}
.text-section > *{
max-width: 90%;
}
.purple-section
{
padding: 80px;
background: #3F3965;
color: #fff;
}
.main-wrapper
{
background: #444 url(img/icon04.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}