设计一个博客页面

蓝莓味营养快线

已于 2022-05-10 14:01:09 修改

阅读量1k

点赞数 1

于 2022-05-10 13:57:46 首次发布

本文链接：https://blog.csdn.net/zhanghangqian/article/details/124684766

版权

1.设计博客列表页

总代码：这里面的link标签是CSS修改颜色样式的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏页面结构 -->
    <div class="nav">
        <img src="image/logo.jpg" alt="">
        <span>我的博客系统</span>
        <!-- spacer是个空白元素，用来占位置，将导航栏的字左右分开 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 这里的 .container作为页面的版心-->
    <div class="container">
       <!-- 左侧个人信息 -->
       <div class="left">
           <!-- 表示整个用户信息 -->
         <div class="card">
             <img src="image/dog.jpg" alt="">
             <h3>张--</h3>
             <a href="#">github 地址</a>
              <div class="counter">
                  <span>文章</span>
                  <span>分类</span>
              </div>
              <div class="counter">
                  <span>2</span>
                  <span>1</span>
              </div>
            </div>
       </div>
       <!-- 右侧内容详情 -->
       <div class="right">
           <!-- .blog就对应一个博客 -->
           <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                     我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-05-07 21:43:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    今天是写博客第一天,Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius error minus, accusamus architecto sapiente excepturi dolores ducimus ullam iste provident similique necessitatibus inventore, dolore ipsam modi nisi itaque a autem.
                </div>
                <a href="#">查看全文 &g

最低0.47元/天解锁文章

蓝莓味营养快线

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
设计一个博客页面

1.设计博客列表页总代码：这里面的link标签是CSS修改颜色样式的文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device..
复制链接

扫一扫

专栏目录