CSS3扁平化风格博客（笔记）

来源：互联网发布：知乎suck for living 编辑：程序博客网时间：2024/05/18 02:26

案例

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">                &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;}

0 1