html和css扁平化

矫情吗；* 2022-06-06 02:10 207阅读 0赞

html部分：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="fontawesome-4.2.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
    <div class="main-wrapper">
        <header>
            <nav>
                <div class="logo"><a href="">王小窝</a></li></div>
                    <ul>
                        <li><a href="" class="active">首页</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. Veniam numquam in, qui. Ex, tempora velit dolor molestias rerum, ipsum praesentium. Excepturi, commodi. Accusantium praesentium provident, assumenda commodi odit, delectus facilis!
                  </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. Assumenda dolorum culpa rerum doloremque beatae, molestiae totam, ea atque rem corporis sed fuga nesciunt, impedit ab et, fugiat ipsa! Id, autem?</p>
                    </div>
                    <div class="icon-grop">
                    <span class="icon">items2</span>
                        <span class="icon">items2</span>
                        <span class="icon">items3</span>
                    </div>
                </div>
            </section>
            <section class="gray-section">
                <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. Quaerat sunt praesentium, magni, architecto numquam nam id quis eaque quidem, adipisci porro hic beatae reprehenderit! Ab eum natus, similique in ut.</p>
                    </div>
                    <div class="img-section">
                        <img src="img/pic01.jpg" alt="">
                    </div>
                </div>
                <div class="article-preview clearfix">
                    <div class="img-section">
                        <img src="img/pic02.jpg" alt="">
                    </div>
                    <div class="text-section">
                        <h2>又一个标题</h2>
                        <div class="sub-heading">我是副标题</div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio nam, rem sed fugiat quia impedit reprehenderit dolorem voluptate aperiam alias harum saepe! Molestiae, repellendus! Magni mollitia neque, dicta similique amet.</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. Reiciendis illum blanditiis possimus unde aperiam at praesentium sapiente, nemo iste? Placeat quidem libero similique architecto cupiditate dolorum expedita temporibus harum asperiores.</p>
                    </div>
                    <div class="img-section">
                        <img src="img/pic03.jpg" alt="">
                    </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. Magnam tenetur corporis iste sit nesciunt reprehenderit sed neque recusandae ducimus, laudantium, assumenda totam architecto, blanditiis est veritatis aspernatur perferendis nulla qui.</div>
                    </div>
                    <div class="card-group clearfix">
                        <div class="card">
                            <h3>标题</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim fugiat repellendus, harum aliquam provident aut commodi. Nam, cumque veritatis magni sapiente earum! Excepturi necessitatibus soluta modi. Ut rerum eveniet veniam.</p>
                        </div>
                        <div class="card">
                            <h3>标题</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ratione atque, dolores odio, eligendi totam eveniet quo minus fugiat obcaecati, labore delectus? Officiis vitae aliquid sequi culpa, sunt rem odio.</p>
                        </div>
                        <div class="card">
                            <h3>标题</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic at, vitae veniam labore, quis fugit, sequi enim error tempora, nulla ipsam quae harum praesentium fuga tenetur tempore. Dolore, molestiae, repellat?</p>
                        </div>
                        <div class="card">
                            <h3>标题</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi deleniti nobis perferendis nostrum. Natus molestiae magnam eligendi totam, aperiam fugiat earum quisquam ratione, tempore expedita aliquam sequi culpa delectus doloremque.</p>
                        </div>
                        <div class="card">
                            <h3>标题</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ad consectetur voluptatem explicabo rerum perferendis quae alias, dicta tenetur. Quis, eius, voluptates. Incidunt molestiae saepe voluptates odio alias et quam.</p>
                        </div>
                        <div class="card">
                            <h3>标题</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore harum dolorum at molestiae iure, quisquam officiis suscipit laudantium voluptatum inventore similique, consectetur nobis totam, dicta veritatis tenetur quasi expedita ad.</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">
                &copy 王小窝 - 2017
            </div>
        </footer>
    </div>
    
    
    </body>
    </html>

css部分：

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

浏览器默认设置reset.css，一开始我用的是它，但使用后h1的标题大小失效，有点暴力。用normalize.css还是比较温和的，如果前端了解很深的可以，自己写默认设置。

选择器：nth-child（）和nth-of-type（）选择器匹配属于其父元素的第n个元素，n可以是数字和关键字或公式。odd和even是比较常见的。

本人初学者，如有错误请勿怪。