博客页面练习代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园</title>
    <link rel="stylesheet" href="练习.css">

</head>
<body>
<!--左边栏开始-->
<div class="left">

    <!--头像开始-->
    <div class="head-imag">
        <img src="https://i.meizitu.net/2019/04/26b01.jpg" alt="">
    </div>
    <!--头像结束-->

    <div class="blog-name">孤独一生</div>
    <div class="blog-info">但叫方寸无诸恶,虎狼丛中也立身</div>

    <!--接下来是一组连接，本应该是url但是这里还是放在div里面-->
    <div class="blog-links">
        <ur>
            <li type="none"><a href="">自我简介</a></li>
            <li type="none"><a href="">微博</a></li>
            <li type="none"><a href="">微信</a></li>
        </ur>
    </div>
<!--注意，如果不加type="none"，那么最终在浏览器上显示有黑点-->
    <!--文章内容区开始-->
    <div class="blog-tags">
        <ur>
            <li type="none"><a href="">CSS</a></li>
            <li type="none"><a href="">JS</a></li>
            <li type="none"><a href="">HTML</a></li>
        </ur>
    </div>
    <!--文章内容区结束-->

</div>
<!--左边栏结束-->


<!--右边栏开始-->
<div class="right">
    <!--首先是一个文章的列表-->
    <div class="article-list">

        <!--里面就是众多文章-->
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-04-29</span>
            </div>
            <div class="article-content">
                半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。
            </div>
            <div class="article-tags">
                #JS #CSS
            </div>
        </div>


    </div>
    <div class="article-list">

        <!--里面就是众多文章-->
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-04-29</span>
            </div>
            <div class="article-content">
                半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。
            </div>
            <div class="article-tags">
                #JS #CSS
            </div>
        </div>


    </div>
    <div class="article-list">

        <!--里面就是众多文章-->
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-04-29</span>
            </div>
            <div class="article-content">
                半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。
            </div>
            <div class="article-tags">
                #JS #CSS
            </div>
        </div>


    </div>
    <div class="article-list">

        <!--里面就是众多文章-->
        <div class="article">
            <div class="article-title">
                <h1 class="article-name">海燕</h1>
                <span class="article-date">2018-04-29</span>
            </div>
            <div class="article-content">
                半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。
            </div>
            <div class="article-tags">
                #JS #CSS
            </div>
        </div>


    </div>

</div>
<!--右边栏结束-->
</body>

</html>

CSS

/*blog页面相关的*/


/*共用样式*/
*{
    font-family: "微软雅黑","Microsoft YaHei UI";
    font-size: 14px;
    margin: 0;
    padding: 0;
}

/*去掉a标签的下划线*/

a{
    text-decoration: none;
}

li{
    margin-bottom: 4px;/*将li标签中的文字间距调整为4像素*/
}

/*左边栏开始*/
.left{
    width: 20%;
    background-color: rgb(76,77,76);
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;/*这里能够实现左边鼠标滑动，右边不动的状态*/
}

/*头像样式*/
.head-imag{
    height:120px;
    width: 120px;
    border:2px solid white;
    overflow: hidden;
    border-radius: 100%;
    margin: 0 auto;/*居中*/
    margin-top: 20px; /*向下移动20像素*/
}
.head-imag>img{
    max-width: 100%;
}

/*blog名称*/
.blog-name{
    font-size: 24px;
    color: white;
    font-weight: bold; /*加粗*/
    text-align: center; /*居中*/
    margin-top: 15px; /*向下移动15像素*/
}

/*blog的信息*/
.blog-info{
    font-size: 18px;
    color: white;
    font-weight: bold; /*加粗*/
    text-align: center; /*居中*/
    border: 2px solid white; /*加上边框*/
    margin: 20px 15px; /*边框上下5像素，左右15像素*/
}

/*链接组和分类组*/
.blog-links,
.blog-tags {
    text-align: center; /*居中*/
    margin-top: 15px; /*向下移动15像素*/
}

.blog-links a,
.blog-tags a{
    color: white;
}

/*在所有的标签内容前面加上"#"这里需要用到伪元素*/
.blog-tags a:before{
    content: "#";
}


/*右边栏开始*/

.right{
    width: 80%;
    background-color: rgb(238,237,237);
    height: 1000px;
    float: right;
}

.article-list{
    margin-left: 30px;
    margin-right: 15px;
    margin-top: 10px;
}

.article{
    background-color: white;
}

.article-title{
    border-left: 2px solid yellow;
    padding: 15px;
}
.article-name{
    display: inline-block;/*如果这里还是继续使用float的话，那么就无法撑开白色的区域，所以这里使用display*/
}

.article-date{
    float: right;
}

.article-content{
    padding: 15px;
}

.article-tags{
    padding: 15px;
    font-weight: bold;
    border-top: 1px solid blue;
    margin: 15px;

 实现效果

 https://dummyimage.com/

这个网站可以对纯色图片进行编辑设计

posted @ 2019-04-29 22:15  舒畅123  阅读(109)  评论(0)    收藏  举报