                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /HTML5和CSS3扁平化風格博客

我今天重新給碼了一遍這個網頁沒有看教程完全憑之間感覺寫的分享一下我的代碼希望對大家有用

<!DOCTYPE html>

<html>

<head>

<title>扁平化博客</title>

</head>

<body>

<div>

<nav>

</div>

</nav>

<div>

<div ><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ab nemo illum quibusdam </p></div>

</div>

</header>

<div>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, id qui nostrum ad vero minus et nesciunt asperiores odio aliquid voluptatem facere</p>

</div>

<div>

</div>

<div>

</div>

<div>

<h3>我當然是副標題</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A nostrum necessitatibus, provident quaerat explicabo ullam sequi blanditiis molestias, molestiae, aperiam delectus. Ullam nesciunt numquam cupiditate eos non, laboriosam ipsa omnis.</p>

</div>

<div>

<h3>我當然是副標題</h3>

</div>

<div>

</div>

<div>

</div>

<div>

<h3>我當然是副標題</h3>

</div>

<div>

<h2>又冒出個標題</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, placeat. Eaque fuga harum voluptatibus cum tempora distinctio dolor est eius illum corporis culpa facere, consequuntur velit doloribus, rerum perspiciatis error!</p>

</div>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>

</div>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>

</div>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>

</div>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>

</div>

<footer>?

<div>

</div>

<div><p>&copy小賢子&nbsp| 2016年4月23日</p></div>

</footer>

</div>

</body>

</html>

/*公用*/

a{text-decoration: none; color: #fff;}

.fl{float: left;}

.fr{float: right;}

h1{font-size: 40px;}

h2{font-size: 25px;}

p{line-height: 25px; font-size: 20px;}

/*頁頭部分*/

header{background: rgba(0,0,0,0.4);}

nav{ ?height: 50px; }

nav .nav_l{ line-height: 50px; padding-left: 15px; font-weight:700; }

nav .nav_r a{ display: inline-block; line-height: 50px; color: #fff; margin-right: 20px; }

#banner{ height: 845px; color: #fff;}

#banner .inner{ max-width: 300px; margin: 0 auto; text-align: center; }

#banner .inner .title1{ padding-top: 160px; height: 60px; }

#banner .inner .title1 h1{ border-top: 5px solid #fff; border-bottom: 5px solid #fff; ?line-height: 60px; ?}

#banner p { margin-top: 30px; }

#banner button{ height: 50px; width:90px;background: #C37079; color: #eee; ?margin-top: 80px; font-size: 20px; border:none; }

#banner .more{padding-top: 110px;font-size: 20px;}

/*內容部分*/

.center1{background: ?#0FD097; text-align: center; padding-top: 100px;}

.ct1_section {max-width: 600px; margin: 0 auto;}

.ct1_section hr{width: 600px; height: 2px; background:#267D07;}

.ct1_section p{ max-width: 500px;margin: 0 auto; margin-bottom: 50px;}

.icon_group span{display:inline-block; width: 70px; height: 70px; border:1px solid #ccc; margin-bottom: 100px; margin-left: 30px; transform: rotate(45deg); }

.img_txt:after{content: ''; display: block; clear: both; }

.center2{background: ?#565A5a; color: #fff; font-size: 0;}

.center2 .images{width: 40%; float: left;}

.center2 .images img{width: 100%; }

.center2 .c_text{float: left; position:relative;top: 0;left: 100px;max-width: 45%; padding-top: 50px; padding-right: 15%;}

.center2 .c_text h2{margin-bottom: 10px;}

.center2 .c_text h3{margin-bottom: 10px; font-size: 18px;}

.img_txt:nth-child(odd){background-color: rgba(0,0,0,0.59);}

.table{background: #3D024A; text-align: center; padding-top: 100px;}

.table1{margin-bottom: 50px;}

.table .table1 hr{width: 600px; height: 2px; background: #fff; margin: 15px auto;}

.table .table1 h2{color: #fff;}

.table .table1 p{color: #fff; max-width: 70%; margin: 0 auto;}

.card_group{max-width: 70%;margin: 0 auto;}

.card_group .card{max-width: 50%;float: left; ?color: #fff; border:2px solid ?white; min-height: 300px; padding: 50px 20px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.card_group:after{content: ""; display: block; clear:both;}

.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; text-align: center; min-height: 150px; padding-top: 50px; }

footer span a{ padding-right: 20px; font-size: -999em; }

footer .copy p{ color: #fff; font-size: 14px ; }

/*背景圖片*/

.bck{background: url(../images/backgroundimg.jpg); background-attachment: fixed;background-repeat: no-repeat; background-size: cover; background-position: center center;}