学习笔记——慕课网HTML5+CSS3扁平化风格博客

作者: fatcatcoder | 来源:发表于2017-03-27 10:13 被阅读0次

直接贴代码吧，需要的图片另存为下载到自己电脑上，给需要的同学作为参考：

效果图：

2017-03-27_100146_副本.jpg

网页用图：

banner.jpg

pic01.jpg

pic02.jpg

pic03.jpg

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邹小胖的主页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="main-wrapper">
        <header>  <!-- 页头开始 -->
            <nav>
                <div class="logo"><a href="./index.html">邹小胖</a></div>
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">项目</a></li>
                    <li><a href="#">列表</a></li>
                    <li><a href="#">关于</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 id="main-btn">了解我</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 clearfix">
                    <div class="img-section">
                        ![](./img/pic01.jpg)
                    </div>
                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">
                            我是副标题你好
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.</p>
                    </div>
                </div>
                <div class="article-preview clearfix">
                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">
                            我是副标题你好
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.</p>
                    </div>
                    <div class="img-section">
                        ![](./img/pic02.jpg)
                    </div>
                </div>
                <div class="article-preview clearfix">
                    <div class="img-section">
                        ![](./img/pic03.jpg)
                    </div>
                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">
                            我是副标题你好
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam commodi nulla, blanditiis itaque veritatis. Voluptas ratione optio sint enim non, sapiente, odio, assumenda porro rerum deserunt a libero officia unde.</p>
                    </div>
                </div>
            </section>
            <section class="purple-section">
                <div class="wrapper">
                    <div class="heading-wrapper">
                        <h2>又一个标题</h2>
                        <div class="hr"></div>
                        <div class="sub-heading">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quo placeat, magni. Debitis numquam sunt odit nisi quo officiis dolores expedita, distinctio quos neque molestiae ducimus iure commodi optio provident?
                        </div>
                    </div>
                    <div class="card-group clearfix">
                        <div class="card">
                            <h3>标题三</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
                        </div>
                        <div class="card">
                            <h3>标题三</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
                        </div>
                        <div class="card">
                            <h3>标题三</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
                        </div>
                        <div class="card">
                            <h3>标题三</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
                        </div>
                        <div class="card">
                            <h3>标题三</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
                        </div>
                        <div class="card">
                            <h3>标题三</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus libero facere, consectetur corporis? Illo blanditiis perferendis atque laudantium quisquam et delectus ut, quos, iure tempora dolor error quis debitis eligendi.</p>
                        </div>
                    </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>

h1 {
    padding: 12px;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
h2 {
    font-size: 25px;
    margin: 0;
}
h3 {
    font-size: 22px;
}
p {
    font-size: 18px;
    letter-spacing: 1px;
}
.hr {
    height: 2px;
    width: 100%;
    margin: 20px auto;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
ul {
    margin: 0;
}
header {
    background: rgba(0, 0, 0, 0.4);
}
nav {
    background: transparent;
    height: 50px;
    position: fixed;
    left:0;
    right: 0;
}
nav ul {
    list-style: none;
    float: right;
    margin-right: 30px;
}
nav ul li, nav .logo {
    display: inline-block;
    line-height: 50px;
    margin-right: 20px;
}
nav ul li a {
    text-decoration: none;
    line-height: 50px;
    display: inline-block;
    height: inherit;
    color: #fff;
}
nav .logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    float: left;
    margin-left: 30px;
}
nav .logo a {
    color: #fff;
    text-decoration: none;
}
.active {
    border-bottom: 4px solid #fff;
}
#banner {
    background: transparent;
    height: 700px;
    color: #fff;
}
#banner .inner {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 160px;
}
#banner .inner h1 {
    margin: 0;
}
#banner .inner .more {
    margin-top: 230px;
}
.sub-heading {
    line-height: 30px;
    margin: 30px 0;
}
button {
    border: none;
    background: #333;
    color: #eee;
    padding: 10px;
}
#main-btn {
    padding: 14px 28px;
    font-size: 20px;
    letter-spacing: 4px;
    border-radius: 6px;
    background: #18a;
}
.green-section {
    text-align: center;
    background: #089080;
    color: #fff;
    padding: 100px 0;
}
.green-section .hr {
    background: #fff;
    width: 60%;
}
.green-section .icon-group .icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid #0D6F7C;
    transform: rotate(45deg);
    margin: 20px;
}
.icon-group {
    margin-top: 30px;
}
.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}
.sub-heading {
    font-size: 18px;
}
.gray-section {
    background: #252F34;
    color: #fff;
}
.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);
}
.text-section {
    position: relative;
    top: 68px;
    left: 50px;
}
.text-section > * {
    max-width: 90%;
}
.text-section h2 {
    margin-bottom: 20px;
}
.text-section .sub-heading {
    font-size: 20px;
}
.purple-section {
    background: #3F3965;
    color: #fff;
    padding: 80px;
}
.purple-section .heading-wrapper {
    text-align: center;
}
.purple-section .hr {
    background: #373259;
    width: 50%;
}
.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(../img/banner.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

学习笔记——慕课网HTML5+CSS3扁平化风格博客

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读