博客系统01--前端页面设计

最新推荐文章于 2024-09-14 13:06:42 发布
最新推荐文章于 2024-09-14 13:06:42 发布
阅读量1.1k 收藏 18
点赞数
文章标签： 前端 html css chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60007218/article/details/130024838
版权
本文介绍了如何使用HTML、CSS和JavaScript基础创建一个简单的博客系统前端页面，包括博客列表、详情页、登录页和编辑页。在列表页和详情页中展示了博客标题、日期和内容摘要，编辑页引入了Markdown编辑器editor.md。此外，还讨论了登录页的设计和编辑器的初始化配置。
摘要由CSDN通过智能技术生成

文章目录


我们前面了解了HTML、CSS、JS相关基础知识，我们可以利用了解到的前端知识做一个简单项目的前端页面，用来展示我们项目所要实现功能的具体操作页面，博客系统前端页面包含但不限于列表页、正文页、登录页及编辑页，下面我们来进行一一实现。

1 博客列表页面

博客列表页我们放入导航栏、个人信息介绍以及文章列表：
在这里插入图片描述
HTML代码：

<!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>

    <!-- 引入公共样式css文件 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="img/logo2.jpg" alt="">
        <!-- 标题 -->
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <!-- 超链接跳转页面 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面的主区域 -->
    <div class="container">
        <!-- 左侧的用户信息 -->
        <div class="container-left">
            <!-- 用户的信息 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="img/cat.jpg" alt="">
                <!-- 用户的名字 -->
                <h3>miao</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="container-right">
            <!-- 每个 .blog 用来表示一篇博客 -->
            <div class="blog">
                <div class="title">博客01</div>
                <div class="date">2022-12-08 12:00:00</div>
                <div class="desc">
                    第一篇博客. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id veritatis repudiandae, at quas temporibus iure minima aliquid facilis! Odit unde veniam, veritatis qui illum tenetur in dolores sint asperiores aliquam?
                </div>
                <!-- 转义字符&gt;&gt，>>   &lt表示< -->
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <!-- 每个 .blog 用来表示一篇博客 -->
            <div class="blog">
                <div class="title">博客02</div>
                <div class="date">2022-12-10 12:00:00</div>
                <div class="desc">
                    第二篇博客. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id veritatis repudiandae, at quas temporibus iure minima aliquid facilis! Odit unde veniam, veritatis qui illum tenetur in dolores sint asperiores aliquam?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <!-- 每个 .blog 用来表示一篇博客 -->
            <div class="blog">
                <div class="title">博客03</div>
                <div class="date">2022-12-11 12:00:00</div>
                <div class="desc">
                    第三篇博客. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id veritatis repudiandae, at quas temporibus iure minima aliquid facilis! Odit unde veniam, veritatis qui illum tenetur in dolores sint asperiores aliquam?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <!-- 每个 .blog 用来表示一篇博客 -->
            <div class="blog">
                <div class="title">博客04</div>
                <div class="date">2022-12-15 12:00:00</div>
                <div class="desc">
                    第四篇博客. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id veritatis repudiandae, at quas temporibus iure minima aliquid facilis! Odit unde veniam, veritatis qui illum tenetur in dolores sint asperiores aliquam?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>
</body>
</html>

通用的CSS代码：

/* 这个文件放多个页面都需要使用的公共样式 */

/* 清除浏览器的默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* 设置让 html 的高度和浏览器窗口一样高 */
    height: 100%;
}

/* 要想给整个页面设置背景，需要给body标签设置背景 */
body {
    /* 设置让 body 的高度和 html 标签一样高 */
    height: 100%;
    /* 背景图片、位置、 */
    background-image: url(../img/fl111.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* 导航栏布局 */
.nav {
    /* 导航栏高度普遍都是 50px */
    height: 50px;
    /* 半透明效果的导航栏 */
    background-color: rgba(50, 50, 50, 0.4);
    /* 文字颜色设置成白色 */
    color: white;
    /* 给nav标签添加弹性布局，nav的子元素就会按照弹性布局排列 */
    display: flex;
    /* 靠左布局，子元素使用这个来控制元素在水平方向如何排列 */
    justify-content: flex-start;
    /* 居中布局，子元素使用这个来控制元素在垂直方向如何排列 */
    align-items: center;
}

.nav .title {

}

/* logo图片设置 */
.nav img {
    width: 40px;
    height: 40px;
    /* 左右侧外边距 */
    margin-left: 30px;
    margin-right: 10px;
    /* 圆形图标，尺寸为长宽的一半就是一个标准⚪ */
    border-radius: 20px;
}

/* 中间占位区域的样式 */
.nav .spacer {
    /* 宽度设置成百分比的形式, 以父元素为基准, 设置当前的尺寸 */
    width: 70%;
    height: 40px;
}

/* 设置a标签的样式 */
.nav a {
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    padding: 0 10px;
}

/* 页面主区域布局 */
.container {
    width: 1000px;
    /* 水平居中 */
    margin: 0 auto;
    /* 设置高度，整体高度减去导航栏高度，css3引入calc库计算页面高度，-两侧必须要有空格 */
    height: calc(100% - 50px);
    /* 为了让里面的 left 和 right 能够水平方向排列, 就需要使用弹性布局了 */
    display: flex;
    /* 让布局中间留有空白 */
    justify-content: space-between;
}

.container .container-left {
    height: 100%;
    width: 200px;
}

.container .container-right {
    height: 100%;
    /* 不设置成800 留有一定的间隙 */
    width: 796px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 20px;
    /* 如果内容超出范围了, 自动添加滚动条 */
    overflow: auto;
}

/* 对个人介绍页面布局调整 */
.card {
    background-color: rgba(255, 255, 255, 0.8);
    /* 设置内边距, 就是为了让文字和图片不要顶着边界 */
    padding: 30px;
    border-radius: 20px;
}

/* 个人图像布局调整 */
.card img {
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/* 昵称调整 */
.card h3 {
    text-align: center;
    padding: 10px;
}

/* 针对github地址的a标签调整 */
.card a {
    /* a 默认是行内元素. 默认尺寸就是和内容是一样的，因此要先转换为行内元素 */
    display: block;
    text-align: center;
    color: #999;
    text-decoration: none;
    /* 上下边距 */
    padding: 10px 0;
}

/* 文章分类布局 */
.card .counter {
    /* 弹性布局 */
    display: flex;
    /* 空格环绕 */
    justify-content: space-around;
    /* 边距 */
    padding: 5px;
}

列表页CSS代码：

/* 这个文件专门放 博客列表页 的专用样式 */

/* 博客的容器进行设置 */
/* .blog {

} */

/* 博客标题 */
.blog .title {
    font-size: 20px;
    font-weight: 700;
    /* 水平居中 */
    text-align: center;
    /* 标题边距 */
    padding: 10px 0;
}

/* 博客日期 */
.blog .date {
    text-align: center;
    color: rgb(44, 114, 143);
    padding: 10px 0;
}

/* 文章内容 */
.blog .desc {
    /* 文本缩进2字符 */
    text-indent: 2em;
}

/* 博客超链接a标签 */
.blog a {
    /* 转成块级元素, 容易设置尺寸 */
    display: block;
    width: 120px;
    height: 40px;
    /* 元素水平居中 */
    margin: 10px auto;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 40px;
    color: black;
    /* 去掉下划线 */
    text-decoration: none;
    /* 加上边框 */
    border: 2px solid black;
    /* 加上一个背景的渐变效果 */
    transition: all 0.7s;
}

/* 鼠标悬停的时候, 有个动态效果，在查看全文上面悬停，背景会变为黑色 */
.blog a:hover {
    background-color: black;
    color: white;
}

2 博客详情页

当我们点击博客列表页中的 查看全文 通过a标签自带的跳转功能跳转到博客详情页，这里的布局类似列表页的布局，引用通用的CSS，改变主区域右边的内容，展示某一篇博客的具体内容：
在这里插入图片描述
HTML代码：

<!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_detail.css">
</head>
<body>
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 这个 div 表示页面的主区域(版心) -->
    <div class="container">
        <!-- 左侧的用户信息 -->
        <div class="container-left">
            <!-- 用这个元素表示用户的信息 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="img/cat.jpg" alt="">
                <!-- 用户的名字 -->
                <h3>miao</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="container-right">
            <div class="blog-detail">
                <h3>博客01</h3>
                <div class="date">2022-12-08 12:00:00</div>
                <p>
                    第一篇博客. 
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. At provident quis fuga totam, voluptatem expedita quam vitae consectetur modi deserunt ipsam numquam quae cumque esse placeat. Earum molestiae reiciendis ullam!
                   
                </p>
            </div>
        </div>
    </div>
</body>
</html>

详情页CSS代码：

/* 给博客详情页提供具体的样式 */

/* 标题 */
.blog-detail h3 {
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
}

/* 日期 */
.blog-detail .date {
    color: rgb(0, 128, 0);
    text-align: center;
    padding: 10px 0;
}

/* 文本内容 */
.blog-detail p {
    text-indent: 2em;
}

当前页面的数据都是随机生成的数据，后面结合后端，就会显示markdown编辑器渲染出来的html

3 博客登录页

登陆页面和前面两个页面差距较大，导航栏和背景一样，中间是一个类似于对话框的卡片：
在这里插入图片描述
HTML代码：

<!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/login.css">
</head>
<body>
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
    </div>
    <!-- 页面主区域, 把对话框放到这个元素里面, 垂直水平居中 -->
    <div class="login-container">
        <!-- 登录对话框 -->
        <div class="dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <!-- 这两个框很关键, 后面还要用, 就起个 id 作为标识 -->
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <button id="login-btn">登录</button>
            </div>
        </div>
    </div>
    
</body>
</html>

登录页CSS代码：

/* 这个文件用来实现登录页的样式 */

.login-container {
    height: calc(100% - 50px);
    /* 这三个样式是为了让 .dialog 垂直水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 登录框 */
.dialog {
    width: 400px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
}

/* 标题 */
.dialog h3 {
    font-size: 20px;
    text-align: center;
    padding: 40px 0;
}

/* 两行文本框 */
.dialog .row {
    height: 50px;
    /* 弹性布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}

/* 用户名和密码 */
.dialog .row span {
    width: 80px;
}

/* 输入框 id选择器*/
#username, #password {
    height: 40px;
    width: 180px;
    /* 输入内容大小 */
    font-size: 18px;
    /* 和输入框边距 */
    padding-left: 5px;
}

/* 登录按钮 */
#login-btn {
    width: 260px;
    height: 40px;
    border-radius: 5px;
    background-color: rgb(44, 114, 143);
    color: white;
    border: none;
}

#login-btn:active {
    background-color: grey;
}

前面我们在写 查看全文的时候直接使用a标签的herf属性完成页面跳转，在这里的登录按钮是需要把用户名和密码发送到服务器的，不能直接使用a标签进行跳转，还需要搭配其他方式。同时在这个页面不需要注销按钮，注销指的是退出登录状态。

4 博客编辑页

这个页面是由导航栏、背景、输入标题的输入框、发布按钮及markdown编辑器构成的：
在这里插入图片描述
在这里插入图片描述

下载引入编辑器

上面的markdown编辑器是调用第三方库，editor.md是一个开源的markdown编辑器，直接在浏览器搜索editor.md，进入主页直接从GitHub上下载，解压缩后粘贴到项目下，命名改为editor.md 这里无论是目录结构还是命名都不能出现出现错误。
在这里插入图片描述
引入到代码中（务必要保证引入文件的路径是正确的）：

<!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <!-- 引入jquery 由于editor.md依赖了jquery，因此需要手动引入 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

初始化编辑器

先创建一个div，必须给个id

<!-- 正文的编辑区 -->
        <div id="editor">
        </div>

接下来就是初始化编辑器

<script>
        // 初始化编辑器, 代码截取自 官方文档 . 
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "## hello world",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>

HTML代码：

<!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_edit.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <!-- 这是另外一个第三方库 -->
    <!-- <script src="js/jquery.min.js"></script> -->
    <!-- 引入jquery 由于editor.md依赖了jquery，因此需要手动引入 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>
    <!-- 整个编辑页的主区域 -->
    <div class="blog-edit-container">
        <!-- 标题的编辑区 -->
        <div class="title">
            <!-- 输入的标题内容 placeholder是提示信息,不影响输入 -->
            <input type="text" id="blog-title" placeholder="在这里输入博客标题">
            <button id="submit">发布文章</button>
        </div>
        <!-- 正文的编辑区 -->
        <div id="editor">
        </div>
    </div>

    <script>
        // 初始化编辑器, 代码截取自 官方文档 . 
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "## hello world",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>

编辑页CSS代码：

/* 针对博客编辑页写的样式 */

/* 主区域 */
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/* 设置标题编辑区的样式 */
.blog-edit-container .title {
    height: 50px;
    /* 只要是水平方向排列多个元素, 就用弹性布局 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 输入框 */
#blog-title {
    height: 40px;
    width: 897px;
    font-size: 20px;
    padding-left: 5px;
    /* 去掉轮廓线, 选中输入框时候的黑圈 */
    outline: none;
    /* 去掉边框 */
    border: none;
    /* 圆角矩形 */
    border-radius: 5px;
    /* 加上背景半透明效果 */
    background-color: rgba(255, 255, 255, 0.8);
}

/* 发布文章按钮 */
#submit {
    height: 40px;
    width: 100px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: orange;
}

#submit:active {
    background-color: grey;
}

/* 编辑器设置成变透明 */
#editor {
    border-radius: 10px;
    /* 由于里面有很多子元素，这个方法不能实现半透明效果 */
    /* background-color: rgba(255, 255, 255, 0.8); */
    /* 这个属性的半透明是可以让子元素也一起生效的, 值是个百分数. 80% 就相当于 rgba 中的 0.8 */
    opacity: 80%;
}

上述就是我们博客系统的前端页面设计，对于前端页面，如果不走前端方向，我们不需要做到精通，理解代码意思就够用了。
前端知识到此结束，接下来我们继续了解后端知识。下面我们一起了解HTTP相关内容。

咸鱼没有不粘锅
关注
专栏目录
前端页面设计 博客系统
m0_67403076的博客
06-21 1147
博客列表页：显示了当前系统中都有哪些发布出来的博客列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮博客详情页：显示了当前博客，详细正文登录页面：包含了一个登录框，输入用户名，密码，登录按钮博客登录页 ：登录博客的界面博客编辑页：点击 “写博客" 进入的页面开发一个页面，不是在脑子里，凭空就搞出来的 而是要先设计好，然后再对照着这个设计稿来进行开发 一般是产品经理，或者美工 (UED) 提供的 如果没有个设计图，凭空去想，这个页面啥样，是特别不好做的 (既要实现代码，又要完成设计工作)设计稿
前端 - 博客系统(页面设计)
旧时言的博客
06-06 4336
博客系统(页面设计)实现一个简单的博客系统.当前先完成页面设计的部分. 通过前面学习的前端知识来构建出网页.主要分成四个页面:创建 blog_list.html, 编写博客列表页.编辑 blog_list.html, 创建导航栏的 html 代码. 准备一个 logo2.jpg, 放到 img 目录中.创建 common.css . 引入 common.css 实现版心 编辑 blog_list.html 编辑 common.css 实现个人信息 编辑 blog_list.html 编辑 common.cs
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
前端设计之 主页面、书架页面、数据分析页面
最新发布
weixin_47505105的博客
09-14 1198
下面的代码我把导入第三方包相关的代码都省略了。
前端页面设计 | 博客系统
1226
05-23 1万+
——页面介绍 博客列表页：显示了当前系统中都有哪些发布出来的博客 导航栏：logo，标题，主页，写博客，注销 左侧：当前用户信息，用户的头像＋名字＋其他的简单信息 右侧：博客列表 列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮 博客详情页：显示了当前博客，详细正文 导航栏：和博客列表页相同 左侧：显示的是当前文章的作者信息 右侧：显示当前文章的详细内容了 登录页面：包含了一个登录框，输入用户名，密码，登录按钮 博客登录页 ：登录博客的界面 输入用户名 输入密码 确认登录 博客
前端网页设计
new2MySQL的博客
08-11 1049
HTML基础标签
前端项目 - 博客系统(纯页面)
chenbaifan的博客
05-28 1万+
预览效果实现博客列表页导航栏 预览效果 这些内容基本就是前面学的内容的一些汇总,主要分为四个页面 1:博客列表页 2:博客正文页 3:博客登录(注销)页 4:博客编辑页 实现博客列表页 因为这个项目需要的文件还是有点多的,所以建议还是要学会分文件夹来存储对应的类容: 要先实现这个博客列表页,我们就得先把框架搭好(整体布局),一看样式大体是这样: 一步来实现它,边写边看 导航栏 先把 html 部分写下来: <!-- 这个是导航栏 --> <div class=.
个人博客系统-VueJS-NodeJs-MongoDB包括前端（前台和后台），后端Express.zip
08-03
这个压缩包文件“个人博客系统-VueJS-NodeJs-MongoDB包括前端（前台和后台），后端Express.zip”是一个完整的个人博客系统实现，涵盖了现代Web开发中的几个核心技术栈：Vue.js、Node.js和MongoDB。这个项目对于学习...
Javaweb博客系统页面设计
04-27
通过学习的前端知识来构建出网页.Javaweb博客系统页面设计，包含4个页面：博客登录页，博客列表页，博客详情页，博客编辑页。 实现一个简单的博客系统. 当前先完成页面设计的部分. 通过学习的前端知识来构建出网页....
个人博客系统-前端资源引入
11-07
在构建一个个人博客系统时，前端资源的组织和引入是至关重要的步骤，它涉及到用户体验、页面性能优化以及代码可维护性等多个方面。本资源包包含了`templates`、`i18n`和`static`三个目录，分别代表了前端开发中的...
实现一个博客系统(前端页面设计)
seeseeyoua的博客
11-03 431
所以说我们先把第一个的博客列表页中的导航栏和版心左侧的个人信息代码给拷贝过来，并引入CSS对应的代码 2)右侧只有三块部分，标题，博客的日期，还有文章的具体内容 3)当前我们已经实现了博客列表页和博客详情页，同时我们也把博客列表页和博客详情页通过a标签进行了关联(点击a标签之后，就跳转到指定的页面了) 4)但是此时还是出现了问题:点击了第一个博客的查看详情，进入到了第一篇博客的详情页面，再点击第二篇博客的查看详情，看到的还是第一篇的博客的详细页面；显然这是不科学的，这是需要解决的；4.实现博客登录界面。
个人博客前端界面
03-06
个人博客系统,精美界面,你值得拥有.做毕设的小伙伴可以参考使用.
web大作业（前端页面设计）
11-26
原始HTML+CSS+JS页面设计，可以学习学习，大学网页设计作业，很好的，很好的~~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
个人博客系统(前端展示+后端管理)
03-18
技术:Vue,Springboot,Hibernate,Redis,Mysql; 功能:主页展示+后台管理
前端网页的设计
qq_61141142的博客
09-18 1406
现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网站是未来企业开展电子商务的基础设施和信息平台，它是“知识经济”的制高点，企业的网址犹如企业的商标和品牌一样，是反映企业形象和文化的巨大的无形资产。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps双声道立体声，该标准接近CD标准，这样虽然增加了影片的大小，但是保证了声音的效果。
博客页面前端
m0_62734392的博客
05-26 654
博客页面(前端) 简单使用HTML进行实现
web前端——页面设计
weixin_65997960的博客
03-18 4426
为xhu.html添加CSS样式，设计实现西华大学主页导航栏的多级菜单，除了本实验明确要求的设置之外，页面效果。
Html前端网页设计
Breath_Healer的博客
11-28 940
HTML网页设计 第一天：初识HTML （标题部分） 主体部分 认识HBuilder软件 快捷键 ctrl+/ 注释代码 ctrl+y 恢复撤销 ctrl+x 剪切 ctrl+z 撤销 ctrl+c 复制 ctrl+p 在当前项目查找文件 ctrl+f 在当前文件查找字符串 ctrl+alt+f 在当前目录查找字符串 ctrl+k 格式化代码 ctrl+g 跳转到某行代码 ctrl+o 打开文件 ctrl+alt+s 保存所有文件 鼠标左键+ctrl选中多行(可进行多行修
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值