我今天重新给码了一遍 这个网页 没有看教程 完全凭之间感觉写的 分享一下我的代码 希望对大家有用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扁平化博客</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<header>
<nav>
<div class="nav_l fl"><a href="#"><h2>小贤子</h2></a></div>
<div class="nav_r fr">
<span><a href="#">首页</a></span>
<span><a href="#">菜单</a></span>
<span><a href="#">联系我</a></span>
</div>
</nav>
<div id="banner">
<div>
<div class="title1 "><a href="#"><h1 >小贤子</h1></a></div>
<div ><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ab nemo illum quibusdam </p></div>
<button>养我</button>
<div>更多信息</div>
</div>
</div>
</header>
<div>
<div>
<div>
<h2>我很帅</h2>
<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>
<span>icon1</span>
<span>icon2</span>
<span>icon3</span>
</div>
</div>
<div>
<div>
<div>
<img src="E:\xxwjdmk\bphfgbk\images\image1.jpg" alt="小贤子">
</div>
<div>
<h2>我是标题</h2>
<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>
<div>
<div>
<h2>我是标题</h2>
<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>
<img src="E:\xxwjdmk\bphfgbk\images\image2.jpg" alt="小贤子">
</div>
</div>
<div>
<div>
<img src="E:\xxwjdmk\bphfgbk\images\image3.jpg" alt="小贤子">
</div>
<div>
<h2>我是标题</h2>
<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>
</div>
<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>
<div>
<h3>标题1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>
</div>
<div>
<h3>标题1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>
</div>
<div>
<h3>标题1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>
</div>
<div>
<h3>标题1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt a, culpa aspernatur esse sunt! .</p>
</div>
</div>
</div>
</div>
<footer>
<div>
<span><a href="#">微信</a></span>
<span><a href="#">QQ</a></span>
<span><a href="#">手机</a></span>
<span><a href="#">座机</a></span>
</div>
<div><p>©小贤子 | 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;}
