网页制作实战项目九：飘城旅行社（分步教程）精

江山如画 • 2019年1月13日下午8:25 • 网页设计 • 阅读 19687

四、完成头部 header

头部 header 包含LOGO+导航nav，最终代码

<header id="nav">
    <div class="center">
        <h1 class="logo">瓢城旅行社</h1>
        <nav class="link">
            <h2 class="none">网站导航</h2>
            <ul>
                <li class="active">
                    <a href="###">首页</a>
                </li>
                <li>
                    <a href="###">旅游资讯</a>
                </li>
                <li>
                    <a href="###">机票订购</a>
                </li>
                <li>
                    <a href="###">风景欣赏</a>
                </li>
                <li>
                    <a href="###">公司简介</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

五、搜索区

header 头部往下，设计一块搜索区。这个区域，可以是广告大图，也可以是用户注册，也可以是一个搜索条，都是一个大幅背景，内嵌一个表单。

从网上搜索一张风景图，原图的分辨率为：1920 x 1200。我们截取了中间一段变成：1920 x 600。

<div id="search"></div>

//可以直接设置宽度为 1920 吗？

#search {
    width: 1920px;
    height: 600px;
}

如果使用 1920 的宽度，势必在底部产生滚动条，非常的难看。那不采用 1920 的宽度，整张大图无法全面显示。那么我们的设计理念是，1280 分辨率显示大图中部区域的图片内容，而浏览器不断增大，就显示的内容越多。超过 1920 分辨率，让图片居中，两边空白即可。

//使用 100%，并插入背景图片

#search {
    width: 100%;
    height: 600px;
    background: url(../img/search.jpg);
}

当我们故意缩小分辨率时，小于 1280 时，底部会出现滚动条。当我们拉动滚动条时，发现右侧出现的大量空白。这时由于之前采用了 100%自适应导致的，那我们强行设置这里虽然是 100%。但如果小于 1280 分辨率，就必须固定在 1280 即可。

//不能小于 1280 分辨率

#header {
    min-width: 1263px;
}

#search {
    min-width: 1263px;
}

对于大于 1920 的分辨率，我们将背景图片居中显示即可，两边留白。当然，还有一种方式，是专门设计这张大图的过渡渐变，两边快要接近纯色是，添加背景过渡。

//大于 1920 分辨率时

#search {
    background: url(../img/search.jpg) no-repeat center;
}

六、搜索框

我们希望在大图中间安插一个搜索框，先安插一个半透明的区块。

//创建一个区块

<div id="search">
    <div class="center"></div>
    <input type="text" class="search" placeholder="请输入旅游景点或城市">
    <button class="button">搜索</button>
</div>

//将区块半透明且居中

#search .center {
    width: 600px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -300px;
    border-radius: 10px;
    opacity: 0.6;
}

//父元素设置相对点

#search {
    position: relative;
}

//搜索框和按钮样式

#search .search {
    width: 446px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -296px;
    border-radius: 10px;
    border: 1px solid #666;
    font-size: 24px;
    color: #666;
    outline: none;
    padding: 0 10px;
}

#search .button {
    width: 120px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    margin: -27px 0 0 175px;
    font-size: 22px;
    border-radius: 10px;
    border: none;
    color: #666;
    font-weight: bold;
    outline: none;
}