从零开始一步步带你开发自己的博客系列教程一 前台页面公共头部开发

胡新能
169 阅读3分钟

今天是我的博客上线的第一天，几年前就想开发一个属于自己的独立博客，由于各种原因迟迟没有上手，经过好几个月的时间，因为有本职工作，生活琐事，开发的周期有点长，现在第一版已经上线。新功能也会后续更新，本系列教程分三个部分，第一部分为前台页面，第二部分为接口中台，后端开发提供接口，第三部分为后台管理开发，本项目为全栈开发，所有代码都是手写， 真正的手把手带你开发一个完整的项目。本人第一次写作，文笔不好，望大家海涵；好了现在进入我们的系列教程正题，开发前台页面公共头部部分；

适合什么人看

  1. 有html、css基础人员；
  2. 后端研发人员，前端很薄弱；
  3. 应届毕业生，计算机相关专业且学校开设过html、css相关课程；
  4. 互联网技术人员，想拥有自己的技术博客人员；

      本博客分为头部，左右两栏，底部信息，是非常常见的布局模式，主要内容1100px 背景淡灰色，主色白色，代码界面简单清晰美观。       头部部分高度60px，固定在顶部，分左右两部分，左边属于网站名称，和副标题，右边属于菜单导航，栏目存在子栏目时，移入到父级栏目显示下拉子栏目；  

前台页面布局代码目录结构
0220112154036.jpg 

index.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>
    <meta name="keywords" content="我的博客" />
    <meta name="description" content="我的博客" />
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <header>
        <div class="header-nav">
            <div class="header-logo">
                <a href="#" title="胡新能">胡新能</a>
                <span>专注web开发</span>
            </div>
            <div class="header-list">
                <div class="item active">
                    <a href="#" title="首页">
                        <i class="icon icon-shouyeshouye-copy"></i>
                        <span>首页</span>
                    </a>
                </div>
                <div class="item">
                    <a title="web前端" target="_blank" href="#">
                        <i class="icon icon-web"></i>
                        <span>web前端</span>
                    </a>
                    <div class="item-son" style="display:none;">
                        <a href="#" title="html/css">
                            <i class="icon icon-html"></i>
                            <span>html/css</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>
</html>

CSS部分 在css目录新建common.css文件

body{
    background-color: #f4f5f5;
    color: #4f5a70;
}

header{
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px #EEEEEE solid;
    position: fixed;
    top: 0;
    z-index: 999;
}

.header-nav{
    max-width: 1100px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}

.header-nav .header-logo{
    float: left;
}

.header-nav .header-logo a{
    color:#1e80ff;
    font-size: 18px;
}

.header-nav .header-logo span{
    font-size: 14px;
    color: #4f5a70;
    padding-left: 10px;
}

.header-list{
    float: right;
}
.header-list .item{
    min-width: 65px;
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 0 5px;
}
.header-list .item a{
    color: #4f5a70;
    display: block;
    padding: 0 10px;
}
.header-list .item a:hover{
    color:#1e80ff;
}
.header-list .item span{
    margin-left: 5px;
}

.header-list .active a{
    color:#1e80ff;
}

.header-list .active .item-son a{
    color: #4f5a70;
}

.header-list .item .item-son{
    position: absolute;
    top: 50px;
    background-color: #fff;
    border: 1px #f1f1f1 solid;
    min-width: 120px;
    border-radius: 2px;
}

.header-list .item .item-son .active{
    color:#1e80ff;
}

.header-list .item .item-son a{
    float: left;
    height: 40px;
    width: 100%;
    line-height: 40px;
    text-align: left;
    padding-left: 10px;
    font-size: 14px;
    box-sizing: border-box;
    display: inline-block;
}
.header-list .item .item-son a:hover{
    background-color: #f1f1f1;
}

网上找一份css初始化文件 normalize.css ，放入 css目录里

本博客栏目引用了字体图标，字体图标如何使用，请转至 项目中如何引用阿里iconfont字体图标库 文章

到此网页头部部分已经完成了，离你的独立博客又更近了一步。

avatar
文章
阅读
粉丝