HTML 前端学习（5）—— 静态简易博客页面搭建

最新推荐文章于 2023-03-08 23:51:46 发布

世界的隐喻

最新推荐文章于 2023-03-08 23:51:46 发布

阅读量1.2k

点赞数 2

分类专栏： HTML 前端开发学习文章标签：学习 HTML

本文链接：https://blog.csdn.net/shijiedeyinyu/article/details/124294197

版权

本文介绍了如何使用HTML和CSS搭建一个静态的简易博客页面，包括HTML结构设计和CSS样式实现，最终呈现了演示结果。

摘要由CSDN通过智能技术生成

HTML 前端学习（5）—— 静态简易博客页面搭建

HTML 代码
CSS 代码
演示结果

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title>博客页面搭建</title>
    <link rel="stylesheet" href="08-博客页面搭建.css">
</head>
<body>
<div class="blog_user clearfix">
    <div class="blog_photo">
        <img src="06-奥特曼.jpg" alt="头像">
    </div>
    <div class="user_msg">
        <div class="username">
            <h2>世界的隐喻</h2>
        </div>
        <div class="user_data">
            <span class="interviewed_num">&nbsp;被访问</span>
            <span class="articles_num">&nbsp;原创</span>
            <span class="rank">&nbsp;排名</span>
            <span class="fans">&nbsp;粉丝</span>
        </div>
        <div class="introduce">我是一个在黑暗中大雪纷飞的人啊......</div>
    </div>
</div>
<div class="reward_rank">
    <div class="reward">
        <span class="total_rank">原力等级&nbsp;3</span>
    </div>
    <div class="total">
        <span class="total_score">总分&nbsp;</span>
        <span class="mouth">当月&nbsp;</span>
    </div>
</div>
<div class="achievement">
    <div class="user_achievement">个人成就</div>
    <hr>
    <div class="praise">
        <img src="" alt="!">
        获得&nbsp;108&nbsp;次点赞
    </div>
    <div class="commen">
        <img src="" alt="!">
        内容获得&nbsp;33&nbsp;次评论
    </div>
    <div class="collection">
        <img src="" alt="!">
        获得&nbsp;9&nbsp;次收藏
    </div>
</div>
<div class="column">
    <div class="user_column">TA&nbsp;的专栏</div>
    <hr>
    <ul