CSS 3フラットスタイルブログ(メモ)
48972 ワード
ケース
HTMLコード
CSSコード
HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="D:\CSS\reset.css">
<link rel="stylesheet" href="D:\CSS\bianping.css">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
<div class="logo"><a href="#"> </a></div>
<ul>
<li><a href="#" class="active"> </a></li>
<li><a href="#"> 2</a></li>
<li><a href="#"> 3</a></li>
<li><a href="#"> 4</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1> </h1>
<p class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<button> </button>
<div class="more"> </div>
</div>
</div>
</header>
<div class="content">
<section class="green-section">
<div class="wrapper">
<div>
<h2> </h2>
<div class="hr"></div>
<p class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="icon-group">
<span class="icon">item1</span>
<span class="icon">item2</span>
<span class="icon">item3</span>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="C:\Users\Administrator\Desktop\I\picture\img\pic01.jpg" alt="">
</div>
<div class="text-section">
<h2> </h2>
<div class="sub-heading"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis soluta ex quia cum et facere temporibus similique harum maxime architecto quod reprehenderit veniam, quaerat, minus eveniet eos magnam, corrupti ducimus?</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2> </h2>
<div class="sub-heading"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis soluta ex quia cum et facere temporibus similique harum maxime architecto quod reprehenderit veniam, quaerat, minus eveniet eos magnam, corrupti ducimus?</p>
</div>
<div class="img-section">
<img src="C:\Users\Administrator\Desktop\I\picture\img\pic02.jpg" alt="">
</div>
</div>
<div class="article-preview">
<div class="img-section">
<img src="C:\Users\Administrator\Desktop\I\picture\img\pic03.jpg" alt="">
</div>
<div class="text-section">
<h2> </h2>
<div class="sub-heading"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis soluta ex quia cum et facere temporibus similique harum maxime architecto quod reprehenderit veniam, quaerat, minus eveniet eos magnam, corrupti ducimus?</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="heading-wrapper">
<h2> </h2>
<div class="hr"></div>
<div class="sub-heading">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora esse, inventore incidunt consequatur magni animi autem veniam neque laudantium quod, nihil illo unde nemo odio sint, itaque quidem ea suscipit.
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.</p>
</div>
<div class="card">
<h3> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.</p>
</div>
<div class="card">
<h3> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.</p>
</div>
<div class="card">
<h3> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.</p>
</div>
<div class="card">
<h3> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.</p>
</div>
<div class="card">
<h3> </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque dolorum praesentium hic nulla velit adipisci ipsum soluta placeat quae, officiis architecto similique eos possimus qui modi? Voluptatum, aliquid hic. Repellat.</p>
</div>
</div>
</section>
</div>
<footer>
<ul class="share-group">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div class="copy">
©
</div>
</footer>
</div>
</body>
</html>CSSコード
.clearfix:after{ content: ''; display: block; clear: both; }
ul{ margin: 0; }
header{ background:rgba(0,0,0,0.4); }
nav{ background: transparent; height:50px; }
#banner{ background: transparent; height: 700px; }
nav ul{ list-style: none; margin: 0; float: right; }
nav ul li,nav.logo{ display: inline-block; line-height: 50px; margin: -20px auto; }
nav ul li a{ line-height: inherit; text-decoration: none; display: inline-block; height: inherit; color: #fff; }
nav ul li.logo{ float: left; padding:10px; }
#banner .inner{ max-width: 300px; text-align: center; margin: 0 auto; position: relative; top: 160px; }
#banner .inner h1{ margin: 0; }
button{ border: none; background: #333; color: #eee; padding: 10px; }
#banner button{ padding: 14px 60px; }
#banner .inner .more{ margin-top: 280px; }
.sub-heading{ line-height: 30px; margin: 30px 0; }
.logo{ font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.logo a{ color: #fff; }
.green-section{ background: #089DB0; color: #fff; text-align: center; padding: 100px 0; }
.green-section .hr{ background: #078494; width: 60%; }
.icon-group{ margin-top: 60px; }
.wrapper{ max-width: 1080px; margin: 0 auto; }
h2{ font-size: 30px; }
h3{ font-size: 24px; }
p{ font-size: 18px; letter-spacing: 1px; }
.hr{ width: 100%; height: 2px; margin: 0 auto; margin: 20px 0; }
.sub-heading{ font-size: 18px; }
.gray-section{ background: #252F34; color: #fff; }
.green-section .icon-group .icon{ display: inline-block; width: 80px; height: 80px; border: 1px solid #0D6F7C; transform:rotate(45deg); margin: 20px; }
.gray-section .img-section{ width: 45%; }
.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-right: 80px; background: #3F3965; color: #fff; }
.purple-section .heading-wrapper{ text-align: center; }
.purple-section .hr{ background: #373259; width: 60%; }
.card{ float: left; width: 50%; min-height: 300px; padding: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.card:first-child{ background: rgba(0, 0, 0,0.04); }
.card:nth-child(2){ background: rgba(0, 0, 0,0.08); }
.card:nth-child(3){ background: rgba(0, 0, 0,0.12); }
.card:nth-child(4){ background: rgba(0, 0, 0,0.16); }
.card:nth-child(5){ background: rgba(0, 0, 0,0.20); }
.card:nth-child(6){ background: rgba(0, 0, 0,0.24); }
footer{ background: #333; color: #fff; min-height: 200px; text-align: center; }
ul.share-group{ display: block; width: 1080px; margin: 0 auto; padding:50px; }
.share-group li{ display: inline-block; padding: 10px; }
.copy{ padding-bottom: 20px; }
.main-wrapper{ background: #444 url(C:\Users\Administrator\Desktop\I\picture\img\banner.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size:cover; background-position: center center; }