关键词：
第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>
//可以直接设置宽度为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;
}
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>项目实战--PC端固定布局</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
<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>
<div id="search">
<div class="center"></div>
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>
</body>
</html>
@charset "utf-8";
body,h1,ul {
margin: 0;
padding: 0;
}
ul {
list-style: outside none none;
}
a {
text-decoration: none;
}
.none {
display: none;
}
#header {
width: 100%;
min-width: 1263px;
height: 70px;
background-color: #333;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 9999;
}
#header .center {
width: 1263px;
height: 70px;
margin: 0 auto;
}
#header .logo {
width: 240px;
height: 70px;
background-image: url(../img/logo.png);
text-indent: -9999px;
float: left;
}
#header .link {
width: 650px;
height: 70px;
line-height: 70px;
color: #eee;
float: right;
}
#header .link li {
width: 120px;
text-align: center;
float: left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#search {
width: 100%;
min-width: 1263px;
height: 600px;
background: url(../img/search.jpg) no-repeat center;
position: relative;
}
#search .center {
width: 600px;
height: 60px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -300px;
opacity: 0.6;
border-radius: 10px;
}
#search .search {
width: 446px;
height: 52px;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -27px 0 0 -296px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
padding: 0 10px;
outline: none;
}
#search .button {
width: 120px;
height: 54px;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -27px 0 0 175px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
outline: none;
cursor: pointer;
font-weight: bold;
}
第31章项目实战-pc端固定布局5
第31章项目实战-PC端固定布局[5]学习要点：1.底部区域2.说明区域3.版权及证件区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．底部区域本节课，我们将探讨一下首页中最底部的区域... 查看详情
第31章项目实战-pc端固定布局6
第31章项目实战-PC端固定布局[6]学习要点：1.分离CSS2.头部区域3.内容区域本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．分离CSS本节课，我们将要创建一个新的页面：旅游资讯。那么... 查看详情
第31章项目实战-pc端固定布局9
第31章项目实战-PC端固定布局[8]学习要点：1.资讯内容2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．资讯内容和首页一样，只不过这里，布局方式有所不同，具体如下：二... 查看详情
第31章项目实战-pc端固定布局10
第31章项目实战-PC端固定布局[10]学习要点：1.机票预定2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．机票预定机票预定页面，具体如下：二．代码详解//全部代码<formactio... 查看详情
第31章项目实战-pc端固定布局8
第31章项目实战-PC端固定布局[8]学习要点：1.归类合并2.子导航本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．归类合并在前面几节课中，有一部分HTML代码比较松散，没有统一到一个类... 查看详情
第31章项目实战-pc端固定布局7
第31章项目实战-PC端固定布局[7]学习要点：1.侧栏制作2.详细代码本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．侧栏制作本节课，主要设计一下内容页面的侧栏部分，分三个小块。经... 查看详情
第32章项目实战-移动端流体布局5
第32章项目实战-移动端流体布局[5]学习要点：1.导航固顶2.三个栏目3.公司简介本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．导航固定由于移动设备屏幕高度较低... 查看详情
第32章项目实战-移动端流体布局3
第32章项目实战-移动端流体布局[3]学习要点：1.搜索部分2.旅游部分3.媒体查询本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．搜索部分搜索部分包含三个内容，背... 查看详情
第33章项目实战-兼容式响应布局1
第33章项目实战-兼容响应式布局[1]学习要点：1.响应式初探2.起始部分本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用... 查看详情
第33章项目实战-兼容式响应布局3
第33章项目实战-兼容响应式布局[3]学习要点：1.标题响应式2.图片响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情
第32章项目实战-移动端流体布局6
第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情
第33章项目实战-兼容式响应布局6
第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情
第33章项目实战-兼容式响应布局2
第33章项目实战-兼容响应式布局[2]学习要点：1.搜索响应式2.底部响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情
第32章项目实战-移动端流体布局4
第32章项目实战-移动端流体布局[4]学习要点：1.旅游图片部分本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游图片部分//HTML部分<divclass="container"><figure>... 查看详情
第27章css传统布局（上）
第27章CSS传统布局[上]学习要点：1.布局模型2.表格布局3.浮动布局本章主要探讨HTML5中CSS早期所使用的传统布局，很多情况下，这些布局方式还是非常有用的。一．布局模型在早期没有平板和智能手机等移动设备大行其道的时期，... 查看详情
javassm开发大众点评后端项目实战教程javassm项目实战教程共9章
第1章课程概览 介绍课程目标、开发内容、功能划分、开发顺序，开发所需要的前置知识及环境准备，并且介绍了与课程相关的前后端分离的思想，架构演进过程。第2章开发准备 演示前端工程环境搭建以及启动... 查看详情
vue项目实战-pc端新闻网页
1、项目初始基于vue-cli搭建项目vuecreatenews-app页面采用flex布局、样式使用sass2、首页的搭建主要包括导航栏，轮播图，及主要新闻的展示 2、点击导航栏可进行不同新闻的切换通过id的不同获得不同的数据，进行页面... 查看详情
前端入门教程---从0开始手把手教你学习pc端和移动端页面开发第9章flexbox实战有路网(代码片段)
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网水平导航菜单category-nav.css.red-navheight:38px;background-color:#d80000;width:100%;.red-navuldisplay:flex;width:1200px;marg... 查看详情