前端页面项目——博客系统

最新推荐文章于 2023-03-05 10:41:12 发布

bluepad

最新推荐文章于 2023-03-05 10:41:12 发布

阅读量545

点赞数 1

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_59092234/article/details/126080994

版权

本文详细介绍了如何构建一个前端博客系统，包括实现博客列表页、导航栏、个人信息、博客正文页、登录页以及博客编辑功能，涉及到HTML、CSS和编辑器的集成。通过创建不同页面和应用样式，实现了用户友好的交互体验。

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

展示

1）登录页面

2）博客列表页

3）博客详情页

4）博客编辑页

，项目所需目录表

1.实现博客列表页

创建 blog_list.html, 编写博客列表页

1.1实现导航栏

编辑 blog_list.html, 创建导航栏的 html 代码。

导航栏里面包含 logo, 标题 , 以及一些按钮 ( 跳转链接 )。

为了实现左右排列 , 在 logo 和按钮之间加一个 spacer 作为占位器。

1）先将页面需要得创建好

其中主页和写博客两个标签都加上对于的网址，方面跳转，后面的也一样

<!-- 导航栏 -->
    <div class="nav">
        <img src="image/deng.jpg" alt="">
        <span>我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

这是页面展示效果

2）对页面进行排版设计

创建一个common.css 用来存放整个博客系统的页面设计代码，同时要将common.css引入blog_list.html

<head>
    <link rel="stylesheet" href="css/common.css">
</head>

编辑common.css ，先对照导航栏的内容进行设计

/* 放置一些各个页面都会用到的公共样式 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav {
    width: 100%;
    /* 此处没设计稿, 具体的尺寸取决于我自己的喜好 */
    height: 50px;
    background-color: rgba(51, 51, 51, 0.4);
    color: white;
    /* 导航栏内部的内容, 都是一行排列的. 就需要使用 flex 布局来进行操作 */
    display: flex;
    /* 实现子元素垂直居中效果 */
    align-items: center;
}

.nav img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 30px;
    margin-right: 10px;
}

.nav .spacer {
    /* 相对于父元素的宽度, 如果父元素(.nav) 宽度是 1000px, 此时 .spacer 就是 700px */
    width: 70%;
}

.nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}

排版效果如下：

3）给页面加背景

直接在common.css 下添加背景图和设计

/* 给整个页面加上背景图 */

html,
body {
    height: 100%;
}

body {
    background-image: url(../image/jing.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

效果展示

1.2 实现中间版心

版心设计有两个区域。.

左侧是个人信息。右侧是博客列表

1）编辑 blog_list.html

container 作为版心, 实现居中对齐的效果

<!-- 这里的 .container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区域. -->
            <div class="card">

            </div

最低0.47元/天解锁文章

bluepad

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端页面项目——博客系统

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。并将blog_detail.css引入blog_detail.htm，在上面创建blog_detail.htm时，已经提前引入文件的，现在只需编辑保存即可使用。创建一个common.css用来存放整个博客系统的页面设计代码，同时要将common.css引入blog_list.html。使用伪类选择器.blog.detailhover,实现光标悬停时修改样式的功能....
复制链接

扫一扫