博客系统的前端页面设计

库里不会投三分

已于 2022-08-10 18:00:37 修改

阅读量467

点赞数 1

分类专栏：前端文章标签：前端 servlet java

于 2022-08-10 01:18:44 首次发布

本文链接：https://blog.csdn.net/qq_50985215/article/details/126258236

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首页的设计

首页的导航栏

 <div class="导航栏">
        <div class="导航栏左边">
            <div class="logo-shell">
                <img class="logo" src="./img/logo.jpg">
            </div>
            我的博客系统
        </div>
        <div class="导航栏右边">
            <a href="/list.html">主页</a>
            <a href="/edit.html">写博客</a>
            <a href="/login.html">注销</a>
        </div>
    </div>

下面的部分由介绍栏和文章展示栏

首页的介绍栏

 <div class="简介栏">
            <div class="头像展示区">
                <img src="./img/head.jpg">
            </div>
            <div class="用户名称">刘颂成</div>
            <div class="gitee地址">
                <a href="https://gitee.com/song-cheng-liu">码云地址</a>
            </div>
            <div class="统计信息">
                <div class="文章数量区域">
                    <div>文章</div>
                    <div class="文章数量">2</div>
                </div>
                <div class="分类数量区域">
                    <div>分类</div>
                    <div class="分类数量">2</div>
                </div>
            </div>
 </div>

首页的内容展示区

        <div class="内容区">
            <div class="博客项">
                <h3 class="博客标题">我的一篇博客</h3>
                <p class="发表日期">2022-08-09 09-31-28</p>
                <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                    adipisicing elit. Cum distinctio ullam eum ut veroab laborum numquam tenetur
                    est in dolorum a sint, assumenda
                    adipisci similique quaerat vel. Facere, et.</p>
                <div class="按钮区">
                    <a href="/serch.html">查看全文</a>
                </div>
            </div>
            <div class="博客项">
                    <h3 class="博客标题">我的一篇博客</h3>
                    <p class="发表日期">2022-08-09 09-31-28</p>
                    <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                        adipisicing elit. Cum distinctio ullam eum ut veroab laborum numquam tenetur
                        est in dolorum a sint, assumenda
                        adipisci similique quaerat vel. Facere, et.</p>
                    <div class="按钮区">
                        <a href="/serch.html">查看全文</a>
                    </div>
            </div>
            <div class="博客项">
                        <h3 class="博客标题">我的一篇博客</h3>
                        <p class="发表日期">2022-08-09 09-31-28</p>
                        <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                            adipisicing elit. Cum distinctio ullam eum ut veroab laborum numquam tenetur
                            est in dolorum a sint, assumenda
                            adipisci similique quaerat vel. Facere, et.</p>
                        <div class="按钮区">
                            <a href="/serch.html">查看全文</a>
                        </div>
            </div>
        </div>

下面框架的布局

space-between是第一个元素在最左边，最后一个在最右边，其他在中间有空格的排列

登录页面的样式

导航栏跟上面一样，只需要套用一下就行

登录框的设计

关于具体博客的页面设置

这里我们的导航栏和介绍栏都是一样的，就内容区的格式是不一样的

内容区的格式

    <div class="内容区">
        <h3 class="博客标题">我的一篇博客</h3>
        <p class="发表日期">2022-08-09 09-31-28</p>
        <div class="正文">
            <p>
                从今天起我要好好敲代码. Lorem ipsum dolor sit amet, consectetur
                adipisicing elit. Aut recusandae omnis natus ut! Autem alias
                ullam sit facilis ipsa dolore, molestiae neque aperiam in a
                facere dolor mollitia dolorum animi. Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem
                alias ullam sit facilis ipsa dolore, molestiae neque aperiam in
                a facere dolor mollitia dolorum animi. Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Aut recusandae omnis natus ut! Autem
                alias ullam sit facilis ipsa dolore, molestiae neque aperiam in a facere
                dolor mollitia dolorum animi.
            </p>
            <p> Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Laudantium sint accusantium, enim iste corrupti itaque, omnis
                alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                pariatur delectus perferendis. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Laudantium sint accusantium, enim iste corrupti itaque, omnis alias maiores
                nemo quae rerum deleniti facere officiis iure velit.
                Blanditiis pariatur delectus perferendis.
            </p>
            <p> Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Laudantium sint accusantium, enim iste corrupti itaque, omnis
                alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                pariatur delectus perferendis. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Laudantium sint accusantium, enim iste corrupti itaque, omnis alias maiores
                nemo quae rerum deleniti facere officiis iure velit.
                Blanditiis pariatur delectus perferendis.
            </p>
            <p> Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Laudantium sint accusantium, enim iste corrupti itaque, omnis
                alias maiores nemo quae rerum deleniti facere officiis iure velit. Blanditiis
                pariatur delectus perferendis. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Laudantium sint accusantium, enim iste corrupti itaque, omnis alias maiores
                nemo quae rerum deleniti facere officiis iure velit.
                Blanditiis pariatur delectus perferendis.
            </p>
        </div>

    </div>

写博客的界面

导航栏是一样的
关于编辑栏，太过复杂，我们直接引入开源项目的源码

 <div class="下面区域">
    <!-- POST 请求 /edit.do -->
    <!-- 由于 /edit.do 资源实际上是不存在的，所以会看到 404（资源不存在） -->
    <form method="post" action="/edit.do">
        <div class="首行">
                <input type="text" name="title" placeholder="博客标题">
                <input type="text" name="category" placeholder="博客分类">
                <button>发布文章</button>

        </div>
        <div id="编辑器"></div>
    </form>
    
</div>
<!-- 通过 JS 加载 editormd 这个开源编辑器代码的 JS 文件 -->
<script src="./js/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.min.js"></script>
<script>
        var editor = editormd("编辑器", {
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
        width: "100%",
        // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
        height: "calc(100% - 50px)",
        // 编辑器中的初始内容
        markdown: "# 在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path: "./editor.md/lib/"
    });
    </script>