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

学习要点：

1.搜索区

2.插入大图

3.搜索框

主讲教师：李炎恢

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

一．搜索区

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

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

二．插入大图

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

我们从网上搜索一张风景图，原图的分辨率为：1920 x 1200。我们截取了中间一段变成：1920 x 600。那么被插入的背景区块应该怎么设置长度呢？

//创建一个搜索区域

   div   id  ="search"  >  div  >  

查看更多关于第31章项目实战-PC端固定布局[3]的详细内容...