网页制作实战项目九:飘城旅行社(分步教程)精

四、完成头部 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;
}

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3173.html

(4)
江山如画的头像江山如画管理团队
上一篇 2019年1月5日 下午9:55
下一篇 2019年1月19日 上午11:25

99%的人还看了以下文章

  • 网页设计中的字体选择以及常用字号

    网页设计中的字体 中文:宋体,微软雅黑,方正系列(无状态) 英文: Helvetica:被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体。 Arial: 和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。 Lucida Grande:是Mac OS U…

    2019年10月22日
    5.4K0
  • 网页制作中表单的设计及优化方法

    逐行验证要在用户填完一行之后进行(除非填写中验证更有帮助) 别在用户打字的时候进行逐行验证,除非这对他们有帮助——例如创建密码、用户名之类,或者字符数提示信息。 不要隐藏基本的帮助提示文案 尽可能直接展示基本的帮助提示文案。对于复杂的提示文案,可以考虑在输入框激活时,展现在它旁边。 区分主次操作项 对此还有一项更深刻的哲学争论,真的需要次要操作项吗? 用输入…

    2018年7月30日 网页设计
    3.2K0
  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

    想从事Web前端开发,需要掌握哪些知识? 中文网页设计网今天给大家分享0基础学习Web前端的课程大纲,从入门到精通,帮助你快速成长为Web前端工程师。 Web前端基础课程大纲 第一阶段:HTML+CSS 第二阶段:JavaScript基础知识 第三阶段:DOM、BOM与事件 第四阶段:面向对象与数据交互 第五阶段:JavaScript实战 第六阶段:数据类型…

    2018年10月24日
    2.2K0
  • 网页制作实战项目五:根据网页效果图制作网页

    了解网页制作全过程,能够根据网页效果图PSD源文件,切图并制作出网页。

    2018年5月3日
    7.0K0
  • 做个企业网站多少钱?

    联系中国网页设计站长做网站:QQ  41588872 很多企业要做网站,老板先问的是做个网站多少钱? 这个真没有办法直接回答,因为网站的价格跟网站的定位、功能需求、栏目等是息息相关的,你必须描述清楚你的要求才可以给出大致报价。 因此,首先要明确你做网站的目的是什么? 1、展示型网站 只是把网站作为一张“网络名片”,让别人知道你有网站,印在名片上,感觉企业高大…

    2018年9月30日
    1.7K0
  • 制作漂亮网页的窍门

    我们浏览任何一个网页,仅从界面上就可以轻易的识别出专业和非专业的区别,那么怎么才能让网页设计的专业、漂亮、好看?这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计,页面的色调处理,还有图片与文字的组合形式等。

    2019年11月16日 网页设计
    2.7K0

发表回复

登录后才能评论