美文网首页
Web_6 极简博客开发(2)

Web_6 极简博客开发(2)

作者: kerooooo | 来源:发表于2020-01-11 13:15 被阅读0次

    1 index.html

    <!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>王花花</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./normalize.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!--侧边-->
    <div class="side-bar">
        <div class="header">
            <a href="simpleBlog.html" class="logo">王花花</a>
            <div class="intro">我是王花花</div>
        </div>
        <div class="nav">
            <a href="#" class="item">关于我</a>
            <a href="#" class="item">联系我</a>
            <a href="#" class="item">关注我</a>
        </div>
        <div class="tag-list">
            <a href="#" class="item"># Scratch</a>
            <a href="#" class="item"># 前端</a>
            <a href="#" class="item"># php</a>
        </div>
    </div>
    <div class="main">
        <div class="article-list">
            <div class="item">
                <a href="./article1.html" class="title">One Day</a>
                <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
                <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
                    dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
                </div>
            </div>
            <div class="line"></div>
            <div class="item">
                <a href="./article1.html" class="title">One Day</a>
                <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
                <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
                    dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
                </div>
            </div>
            <div class="line"></div>
            <div class="item">
                <a href="./article1.html" class="title">One Day</a>
                <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
                <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
                    dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
                </div>
            </div>
            <div class="line"></div>
            <div class="item">
                <a href="./article1.html" class="title">One Day</a>
                <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
                <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
                    dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
                </div>
            </div>
            <div class="line"></div>
            <div class="item">
                <a href="./article1.html" class="title">One Day</a>
                <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
                <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
                    dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
                </div>
            </div>
            <div class="line"></div>
            <div class="item">
                <a href="./article1.html" class="title">One Day</a>
                <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
                <div class="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                    Ad accusantium aspernatur consequatur odit quo at ullam non aut? Quos eveniet,
                    dicta facere iure quam necessitatibus. Voluptas ipsum nostrum nulla eius?
                </div>
            </div>
            <div class="line"></div>
        </div>
    </div>
</body>

</html>

    2 article1.html

    <!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>王花花</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./normalize.css">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!--侧边-->
    <div class="side-bar">
        <div class="header">
            <a href="simpleBlog.html" class="logo">王花花</a>
            <div class="intro">我是王花花</div>
        </div>
        <div class="nav">
            <a href="#" class="item">关于我</a>
            <a href="#" class="item">联系我</a>
            <a href="#" class="item">关注我</a>
        </div>
        <div class="tag-list">
            <a href="#" class="item"># Scratch</a>
            <a href="#" class="item"># 前端</a>
            <a href="#" class="item"># php</a>
        </div>
    </div>
    <div class="main">
        <div class="article">
            <h1 class="title">One Day</h1>
            <div class="status">发布于：2020-1-1 | 阅读：3500 | 前端 </div>
            <div class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto cumque tempora, vitae natus quos molestiae nulla consectetur temporibus dolor officia velit, laudantium nemo odio unde perspiciatis animi ad consequuntur autem.
                <br>Sed quis iusto ut, asperiores possimus voluptatem! Illo officiis non magni ipsum ipsam eos quasi libero fugit iste ex. Nostrum eius fugit voluptatem error aut labore accusantium voluptates expedita ratione!
                <br>Magni earum velit eum obcaecati quaerat ea nobis voluptatum, commodi excepturi vel architecto officiis similique, quam odit, fugit sapiente voluptatem culpa nemo consequatur. Distinctio corporis dolores iure illum, porro molestiae.
                <br>Voluptate odio vitae fuga nam necessitatibus explicabo eveniet corporis. Mollitia id alias veritatis, recusandae asperiores est cumque. Quis, ex dolor! Explicabo fugit ipsum quisquam quibusdam quam magni! Doloribus, ullam similique!
                <br>Accusantium beatae, eius impedit minus qui earum inventore ad aliquid dolorum cupiditate, aperiam delectus consectetur exercitationem incidunt maiores vitae eligendi rerum, repudiandae natus. Ipsa eligendi illum accusamus? Quaerat, provident repellat.
                <br>Tenetur recusandae dolorem quisquam maiores exercitationem ipsum commodi eaque beatae, amet ad doloremque esse dolorum dicta nostrum. Fuga quae optio ducimus doloremque dolores dicta quis repellat assumenda consectetur? Iste, sed!
                <br>Quos doloribus non, rem voluptas deleniti deserunt ea architecto tenetur eius quia quidem placeat, laboriosam aliquid adipisci impedit quasi, aliquam praesentium voluptatum minima et reiciendis accusantium. Omnis eum atque deleniti!
                <br>Natus non quisquam accusantium excepturi perspiciatis ratione ipsum provident fuga, dolores veritatis voluptatum nihil, necessitatibus, accusamus consequatur aliquam eos velit beatae veniam illo porro. Odio cumque labore nihil cupiditate quisquam.
                <br>Accusantium beatae, eius impedit minus qui earum inventore ad aliquid dolorum cupiditate, aperiam delectus consectetur exercitationem incidunt maiores vitae eligendi rerum, repudiandae natus. Ipsa eligendi illum accusamus? Quaerat, provident repellat.
                <br>Tenetur recusandae dolorem quisquam maiores exercitationem ipsum commodi eaque beatae, amet ad doloremque esse dolorum dicta nostrum. Fuga quae optio ducimus doloremque dolores dicta quis repellat assumenda consectetur? Iste, sed!
                <br>Quos doloribus non, rem voluptas deleniti deserunt ea architecto tenetur eius quia quidem placeat, laboriosam aliquid adipisci impedit quasi, aliquam praesentium voluptatum minima et reiciendis accusantium. Omnis eum atque deleniti!
                <br>Natus non quisquam accusantium excepturi perspiciatis ratione ipsum provident fuga, dolores veritatis voluptatum nihil, necessitatibus, accusamus consequatur aliquam eos velit beatae veniam illo porro. Odio cumque labore nihil cupiditate quisquam.
            </div>
        </div>
    </div>
</body>

</html>

    3 index.css（包含article1.html的样式）

    body{
    background:#454545;
    line-height:1.7;/*用于改变行距*/
}
a{
    text-decoration: none;/*无文字装饰：去除下划线*/
}
a,body{
    color:#eee;
}
.side-bar{
    float:left;
    width:20%;
    position:fixed;/*侧边栏固定*/
}
.side-bar > *{ /*side-bar 下面的子元素*/
    padding:10px 15px;

}
.side-bar .nav a,
.side-bar .tag-list a{
    display:block; /*占母元素的整宽*/
    padding:8px;
    color:#888;
    transition: color 200ms;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
   color:#eee;
}
.side-bar .nav a{
    font-weight: 700;
}
.main{
    float:right;
    width:80%;
    color:#454545;
}
.header .logo{
    margin-bottom:10px;
    border:5px solid #eee;
    padding:10px 20px;
    font-size:30px;
    display:inline-block; /*使padding和margin有效 还不占一行*/
    line-height:1;
}
.article-list,.article{
    background:#fff;
    margin-right:30%;
    padding:20px 30px;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.article-list .item .title,
.article .title{
    font-size:25px;
    font-weight: 700;
    color:#454545;
    
}
.article-list .item .status,
.article .status{
    font-size:13px;
    color:#ccc;

}
.article-list .item > *,
.article > *{
    margin:10px 0;
}
.article-list .item{
    margin-bottom:20px;
}
.line{
    height:2px;
    background:#454545;
}

    4 normalize.css

    下载地址：http://necolas.github.io/normalize.css/

    相关文章

      网友评论

          本文标题：Web_6 极简博客开发(2)

          本文链接：https://www.haomeiwen.com/subject/frgvactx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Web_6 极简博客开发(2)|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！