2020前端练习 —— 超级无敌简易版博客园

@ 2020.5.14

 如何快速搭建一个博客园风格的界面？只需两个文件，很多行代码就可搞定噢

下面带你一起来山寨DIY吧

1、思路

html

1、新建html 文件，用注释标注代码块

2、先用 div 划定区域——左栏 右栏

3、使用html 占位，再调节样式

　　为标签添加 id / class 属性 

CSS

1、新建CSS文件，使用注释标注区域

2、先写万金油

3、按照html 的划分，逐一添加样式（选择器的使用，从基础选择器到复杂选择器）

4、调试运行，修改样式

 

2、实现效果

 

 

3、具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>welcomeTo大诚小铺</title>
    <link rel="stylesheet" href="博客园样式.css">
</head>
<body>
    <!-- 先用div划分布局 -->
    <!-- 左侧栏 -->
    <div class="blog-left">
        <!-- 头像 -->
        <div class="blog-image">
            <img src="鸢尾花.jpg" alt="鸢尾花呀鸢尾花">
        </div>
        
        <div class="blog-title">
            <p>🐱大橙猫🐱</p>
        </div>
        <div class="blog-info">
            <p>人见人爱，花见花开</p>
        </div>
       
        
        <div class="blog-link">
            <ul>
                <li><a href="https://mp.weixin.qq.com/s/5-VfKF9jlrMIN2NvTOxO7A" 
                    title="欢迎光临小铺">大诚小铺</a></li>
                <li><a href="https://www.cnblogs.com/bigorangecc/" 
                    title="一枚假理工女写的博客">博客·园</a></li>
                <li><a href="https://member.bilibili.com/v2?timestamp=1584441340153#/upload-manager/audios" 
                    title="别听我瞎逼逼">B站在此</a></li>
            </ul>
        </div>
   
        
        <div class="blog-tag">
            <ul>
                <li>爱沾花惹草的文艺女汉子</li>
                <li>琴棋书画都不精通</li>
                <li>想搞开发的假理工女</li>
                <li>头发茂密数学不好</li>                
            </ul>            
        </div>

    </div>

    <!-- 右侧主要内容栏 -->
    <div class="blog-right">
        <div class="article">
            <div class="article-title">
                <span class="title"><a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw">
                    旧的童年</a></span>
                <span class="date">2020-3-4</span>
            </div>

            <div class="article-body">
                <p>曾经热闹一时的果园小屋，如今成为了野草挡风的屏障。</p>
            </div>
            <hr>
            <div class="article-bottom">
                <p>[大诚的解忧杂货铺·原创 @作者 铲屎官]</p>
            </div>    
        </div>        

        <div class="article">
            <div class="article-title">
                <span class="title"><a href="https://mp.weixin.qq.com/s/2sJQIHEMhLaLWf41IBOh1A">
                    星空</a></span>
                <span class="date">2020-2-26</span>
            </div>

            <div class="article-body">
                <p>星空之下，仰望繁星的我们，仍是孤独的</p>
            </div>
            <hr>
            <div class="article-bottom">
                <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p>
            </div>    
        </div>     


        <div class="article">
            <div class="article-title">
                <span class="title"><a href="https://mp.weixin.qq.com/s/2oxSm-3WDwFVXEaKeZSx6Q">
                    春天里的人间烟火</a></span>
                <span class="date">2020-2-15</span>
            </div>
            <hr>
            <div class="article-body">
                <p>这是春暖花开的人间烟火</p>
            </div>

            <div class="article-bottom">
                <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p>
            </div>    
        </div>
    

        <div class="article">
            <div class="article-title">
                <span class="title"><a href="https://mp.weixin.qq.com/s/ndJqAcrtprDzDNYeCLs6zQ">
                    立春一日</a></span>
                <span class="date">2020-3-4</span>
            </div>

            <div class="article-body">
                <p>旧物焕新芽，百花待争艳</p>
            </div>
            <hr>
            <div class="article-bottom">
                <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p>
            </div>   
        </div>     

    </div>
</body>
</html>
HTML
/* 这是博客园山寨版的CSS */

/* 通用样式 */
body {
    margin: 0;
    background-color: whitesmoke;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}

/* 左侧样式 */
.blog-left {
    float: left;
    width: 20%;
    height: 100%;
    position: fixed;
    background-color:cadetblue;
}

.blog-image {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 5px solid white;
    /* 控制头像圈的位置 */
    margin: 20px auto;
    /* 溢出属性--防止图像过大，盖住侧栏 */
    overflow: hidden;  
}
.blog-image img {
    /* 完全填充 */
    max-width: 100%;
}

.blog-title,.blog-info {
    color:whitesmoke;
    font-size: 14px;
    text-align: center;
}

.blog-link,.blog-tag {
    font-size: 14px;
}

.blog-link a,.blog-tag a {
    color: wheat;
}

.blog-link a:hover,.blog-tag a:hover {
    color:pink;
}

.blog-link ul,.blog-tag ul {
    text-align: center;
    margin-top: 50px;
}


/* 右侧样式 */

.blog-right {
    float: right;
    width: 80%;
    height: 1000px;
}

.article {
    background-color:gainsboro;
    margin: 20px 40px 10px 10px;
    /* 边框阴影 */
    box-shadow: 5px 5px 5px cadetblue;    
}

.title {
    font-size: 25px;
    
}
.title a:link {
    color:forestgreen;    
}
.title a:hover {
    color:pink;
}
.title a:active {
    color:olivedrab;
}
.title a:visited {
    color:black;
}



.date {
    /* 让其放置在右边 */
    float: right;
    margin: 20px 20px;
    font-weight: bolder;
}

/* 设置标题栏 的头饰 */
.article-title {
    border-left:8px solid forestgreen;
    /* 设置标题缩进 */
    text-indent: 18px;
}

.article-body {
    font-size: 18px;
    text-indent: 30px;

}

.article-bottom {
    padding-left: 30px;
    padding-bottom: 10px;
}
CSS

 

posted @ 2020-05-14 21:11  bigorangecc  阅读(486)  评论(1)  编辑  收藏  举报