个人博客开发记录-1（header）

1.顶栏横幅效果与制作

(1）效果图

（2）准备好素材：一张背景图、一张LOGO

（3）创建好工程目录包含img、js、css、lib等目录，在HTML文档中进行编写，文档结构如下：

<header>
    <div class="header-bg">
        <div class="header-img">
            <img class="header-imgSize" src="img/LOGO.png">
        </div>
    </div>
</header>

效果展示：

解释一下：这边之所以用两个div是为了通过div控制img图像的大小、位置

（4）分析效果，编写css样式：

1）由于只链接了img标签所以需要在img的父元素.header-img上设置背景图；用css中的background-image属性搭配url()方法实现。

.header-bg{
    width:100%;
    height:200px;
    background-image:url("../img/bg.jpg");
    display:flex;
    /*
    overflow:hidden;
    设置超出容器的部分隐藏，
    为了避免浏览器宽度变化的时候LOGO溢出影响页面效果
    */
    overflow:hidden;
}

效果如下：

2）设置图片大小

.header-img{
    /*
    设置图片父元素
    */
    padding:0;
    display:flex;
    /*父元素必须有宽度且必须大于子元素*/
    width:100%;
    margin-left:5%;
    /*
    align-items:center;
    设置弹性容器内的项目默认居中
    这里使用可避免图片被拉伸
    */
    align-items:center;
}
.header-imgSize{
    /*
    当屏幕宽度大于2040px是宽度为父元素的8%
    */
    width:8%;
}
​
@media only screen and (max-width:2040px){
    /*
    当屏幕宽度小于2040px时改变布局和样式
    */
    .header-imgSize{
        width:12%;
    }
}

效果：

2.导航栏制作

（1）文档结构：

<div class="row">
    <div class="col"><span><a>我的首页</a></span></div>
    <div class="col"><span><a>个人介绍</a></span></div>
    <div class="col"><span><a>我的作品集</a></span></div>
    <div class="col"><span><a>我的期望</a></span></div>
    <div class="col"><span><a>我的规划</a></span></div>
    <div class="col-seach">
        <input class="seach">
        <span>
            <a>
                <!--
                设置图片链接，为方便后续添加样式，将图片链接放置于span标签中
                这边是为了展示效果，后续如果要实现搜索功能，需要将input外添加from标签
                img添加点击事件而不是链接
                -->
                <img class="icon" src="">
            </a>
        </span>
    </div>
</div>

效果：

2）编写导航栏样式

a{
    /*
    取消所有的a标签的默认样式，并更改文字颜色为黑色
    */
    text-decoration:none;
    color:black;
}
.row{
    /*
    justify-content:space-evenly;
    浮动布局，使每个子元素之间平分盒模型剩余的空间
    由于是浮动布局，因此子元素和父元素都需设置浮动
    */
    display:flex;
    justify-content:space-evenly;
    text-align:conter;
    /*
    flex-shrink:1;
    设置元素宽度收缩1倍
    使用不当会导致页面脱结，慎用
    */
}
.col{
    /*
    设置导航栏文字大小块和分布
    为使居中分布属性（justify-content:space-evenly;）生效
    须设置元素样式为浮动
    */
    display:flex;
    font-sisze:1.5rem;
}
.col span{
    paddin:10px 20px;
}
.col:hove>span{
    /*
    使鼠标悬停于div元素上时span元素的背景变为米白色
    */
    background-color:cornsilk;
}

效果如下：

3.制作搜索框

在日常开发中搜索框是比较常见的开发需求，那这边就单独讲一下。

简单讲一下制作思路，首先把input标签和搜索图标放在同一个div里，调整div元素的背景和圆角，再取消input标签的背景、边框、默认样式，调整input元素和img元素的位置和大小，看一下实现代码：

.col-seach{
    /*
    设置div背景和圆角，同时使其子元素其能够纵轴方向居中
    */
    display:flex;
    background-color:white;
    align-items:center;
    
    height:40px;
    width:160px;
    padding-left:20px;
    padding-right:10px;
    
    border:1px solid black;
    border-radius:50px;
}
.seach{
    /*
    取消输入框默认样式，取消输入框背景，取消输入框边框
    设置输入框宽度
    */
    background:none;
    boder:none;
    padding:0%;
    outline:none;
    
    width:90px;
    
}
.icon{
    /*
    设置图片大小
    */
    height:30px;
}

实际效果如下：

这边的话主要是提供一个实现方法和思路，具体的实现效果需要根据具体需求去实现；例如UI设计中要求白字背景，并且鼠标悬停在div元素上时div背景变为白色字体颜色变为黑色，如果要实现这样的效果，那么就不能在盒模型中嵌套其他元素，否则影响代码的简洁性，不利于维护。

而要实现这类效果，这边提供一个思路，通常嵌套两层div，第二层div包裹文字，css设置参考上面.row、.col的写法；因为是导航栏，那么要实现点击时产生跳转，这里可以直接用onclick属性和open方法实现，如下：

<div class="row">
    <div class="col" onclick="window.open('/new_file.html')">
        我的首页
    </div>
</div>

那么头部的制作到此就先告一段落了。