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

第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;
}

时间: 2024-10-31 14:26:12

第31章 项目实战-PC端固定布局3的相关文章

第31章 项目实战-PC端固定布局8

第31 章项目实战-PC 端固定布局[8]学习要点:1.归类合并2.子导航 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.归类合并在前面几节课中,有一部分HTML 代码比较松散,没有统一到一个类别块里.比如:很多的标签超链接没有归类到UL 里,导致一些问题等.//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京

第31章 项目实战-PC端固定布局7

第31 章项目实战-PC 端固定布局[7]学习要点:1.侧栏制作2.详细代码 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块.经过思考,侧栏会包含一些图片,而主要部分也会包含图片,那么侧栏放在左边可能会和主栏的图片冲突导致不协调,所以,我们把侧栏更换到右边.//实际上,还去掉了高度,让其自适应#container {width: 1263px;margin: 30px auto

第31章 项目实战-PC端固定布局5

第31 章项目实战-PC 端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号.//底部区域父元素<footer id="footer">...</footer>//底部父元

第31章 项目实战-PC端固定布局4

第31 章项目实战-PC 端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下://热门旅游区父元素<div id="tour">...</div>//旅游父元素#tour {width

第31 章项目实战-PC 端固定布局10

第31 章项目实战-PC 端固定布局[10]学习要点:1.机票预定2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.机票预定机票预定页面,具体如下:二.代码详解//全部代码<form action="###"><h2>机票预定</h2><div class="type"><p>航程类型<mark>单程</mark>

第31章 项目实战-PC端固定布局9

第31 章项目实战-PC 端固定布局[8]学习要点:1.资讯内容2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.资讯内容和首页一样,只不过这里,布局方式有所不同,具体如下:二.代码详解//全部代码<figure class="tour"><img src="img/tour1.jpg" alt="曼谷-芭提雅6 日游"><figcaption&

第31章 项目实战-PC端固定布局6

第31 章项目实战-PC 端固定布局[6]学习要点:1.分离CSS2.头部区域3.内容区域 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.分离CSS本节课,我们将要创建一个新的页面:旅游资讯.那么,现在需要解决的问题是,如果把首页重复的部分移植到新的页面而减少冗余.最恰当的方法就是:将CSS 部分中重复的部分分离出来,单独创建一个CSS,以便后续的页面重复调用.而首页的HTML 重复的部分,一般是通过动态网页,比如PHP 等解决重复问

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

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门旅游区 本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w

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

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一.准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计