基于Flexbox 的响应式个人博客样式

最新推荐文章于 2022-11-19 14:37:14 发布

三哥自尊心强

最新推荐文章于 2022-11-19 14:37:14 发布

阅读量185

点赞数

分类专栏：前端文章标签： html flex css3

本文链接：https://blog.csdn.net/yaoguoxing/article/details/113173965

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简介：
这是个一个比较典型的基于Flexbox的blog布局案例，最高一层的是以行为主轴的flex，然后使用width来控制换行与否，适合初学者了解flex的布局以及语法特征。

效果图：
在这里插入图片描述

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式Blog -- 基于Flexbox</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            box-sizing: border-box;
        }
        .container{
            background-color: #ccc;
            width: 90%;
            max-width: 1000px;
            margin:auto;
            display:flex;
            flex-flow: row wrap;
        }

        body{
            background-color: #e9e9e9;
        }
        /* start of header  */
        header{
            background-color: #2c3e50;
            width: 100%;
            padding: 20px;

            /* flex  */
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-flow: row wrap;

        }
        header .logo{
            color: #fff;
            font-size: 30px;
        }
        header .logo img{
            width: 150px;
            /* 保证图片和文字居中的关键 */
            vertical-align: top;
        }

        header .logo a{
            color: #fff;
            text-decoration: none;
            line-height: 50px;;
        }
        header nav{
            width: 50%;
            display:flex;
            flex-wrap: wrap;
            align-items: center;

        }
        header nav a{
            background-color: #c0392b;
            color: #fff;
            text-align: center;
            text-decoration: none;
            padding:10px;
            width: 2rem;
            display: inline-block;
            /* flex  */
            flex-grow: 1;
        }
        header nav a:hover{
            background-color: #e74c3c;
        }
        /* end of header  */

        /* start of main  */
        .main{
            background-color: #fff;
            padding: 20px;
            flex: 1 1 70%;

        }
        .main article{
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #000;
        }
        .main article:nth-last-child(1){
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }


        aside{
            background-color: #e67e22;
            padding:20px;
            
            display: flex;
            flex: 1 1 30%;
            flex-wrap: wrap;
            justify-content: flex-start;
            flex-direction: column ;
        }
        aside .widget{
            background-color: #d35400;
            height: 150px;
            margin: 10px;
        }

        /* start of footer  */
        footer{
            background-color: #2c3e50;
            padding: 20px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }
        footer .links{
            background-color: #c0392b;
            display: flex;
            flex-wrap: wrap;
        }
        footer .links a{
            flex-grow: 1;
            color: #fff;
            width:5rem;
            padding: 10px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }
        footer .links a:hover{
            background-color: #e74c3c;
        }
        footer .social{
            background-color: #e67e22;
        }
        footer .social a{
            color: #fff;
            text-decoration: none;
            padding: 10px;
            display: inline-block;
        }


        @media screen and (max-width:800px){
            .container{
                flex-direction: column;
            }
            header{
                flex-direction: column;
                padding: 0;
            }
            header .logo{
                margin:20px 0;
            }
            header nav{
                width: 100%;
            }
            aside{
                flex-direction: row;
                flex:0;
            }
            aside .widget{
                flex-grow:1;
            }

        }
        @media screen and (max-width:600px){
            aside{
                flex-direction: column;
            }
            footer{
                justify-content: space-between;
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <img src="images/logo.jpg" alt="" width="150">
                <a href="">My Blog Demo</a>
            </div>
            <nav>
                <a href="">Home</a>
                <a href="">About me</a>
                <a href="">Contact</a>
                <a href="">Email</a>
            </nav>
            
        </header>
        <section class="main">
            <article>
                <h2 class="title">Lorem, ipsum dolor.</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore, esse accusantium corporis corrupti totam ipsa? Provident, corrupti dolorum error unde expedita iste similique quis praesentium molestias nihil cum, voluptates labore accusantium incidunt consectetur rem nam aspernatur dolore excepturi, sit animi non? Voluptas voluptatum eveniet, cum tenetur commodi assumenda culpa? Similique?</p>
            </article>
            <article>
                <h2 class="title">Lorem ipsum dolor sit.</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore, esse accusantium corporis corrupti totam ipsa? Provident, corrupti dolorum error unde expedita iste similique quis praesentium molestias nihil cum, voluptates labore accusantium incidunt consectetur rem nam aspernatur dolore excepturi, sit animi non? Voluptas voluptatum eveniet, cum tenetur commodi assumenda culpa? Similique?</p>
            </article>
            <article>
                <h2 class="title">Lorem, ipsum dolor.</h2>                
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore, esse accusantium corporis corrupti totam ipsa? Provident, corrupti dolorum error unde expedita iste similique quis praesentium molestias nihil cum, voluptates labore accusantium incidunt consectetur rem nam aspernatur dolore excepturi, sit animi non? Voluptas voluptatum eveniet, cum tenetur commodi assumenda culpa? Similique?</p>
            </article>
        </section>
        <aside>
            <div class="widget">
                <div class="image"></div>
            </div>
            <div class="widget">
                <div class="image"></div>
            </div>
            <div class="widget">
                <div class="image"></div>
            </div>
        </aside>
        <footer>
            <section class="links">
                <a href="">I</a>
                <a href="">Blog</a>
                <a href="">Protytype</a>
                <a href="">Contact</a>
            </section>
            <div class="social">
                <a href="">Facebook</a>
                <a href="">Twitter</a>
            </div>
        </footer>   
    </div>
</body>
</html>

三哥自尊心强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于Flexbox 的响应式个人博客样式

效果图：源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式Blog -- 基于Flexbox</title> <style>
复制链接

扫一扫