第31章 项目实战-PC端固定布局[3]

2017年10月7日07:00:03 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.搜索区

本节课,我们接着 header 头部往下,来设计一块搜索区。这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单。具体造型如下:

第31章 项目实战-PC端固定布局[3]

从表面上来分析,就是插入一张背景大图,然后居中一个搜索条。但是,我们要求最小在 1280 分辨率、最大在 1920 分辨率能保持最佳的观看效果。而对于超过 1920 分辨率还要保持大图的位置合理。

二.插入大图

首先,为了满足最小的 1280 分辨率,大图本身的宽度必须大于 1280。而主流分辨率一般小于 1920, 所以图片宽度设置为 1920 即可满足几乎所有用户。 注: 超过 1920 分辨率,即 2k+以上的分辨率一般不适合浏览网页了,会眼瞎。

我们从网上搜索一张风景图,原图的分辨率为: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;
    background-color: #000;
    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;
    background-color: #eee;
}

注:本章为第43课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: