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

author author     2022-08-05     755

关键词:

第31 章项目实战-PC 端固定布局[6]
学习要点:
1.分离CSS
2.头部区域
3.内容区域

本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端
固定布局来实现。
一.分离CSS
本节课,我们将要创建一个新的页面:旅游资讯。那么,现在需要解决的问题是,如果
把首页重复的部分移植到新的页面而减少冗余。最恰当的方法就是:将CSS 部分中重复的
部分分离出来,单独创建一个CSS,以便后续的页面重复调用。而首页的HTML 重复的部分,
一般是通过动态网页,比如PHP 等解决重复问题,这里暂时不用解决。
分离CSS,引入到新的页面后,还要为子栏目创建一个标头,不能使用首页的search
那么大的了。只能,重新做一个小的,放在标头部分,如下图:
//将重复的header 和footer 的CSS 分离到basic.css 中
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" href="css/style.css">
二.头部区域
//子栏目头部区域
<div id="headline">
<div class="center">
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>
</div>
//CSS 部分
#headline {
width: 100%;
min-width: 1263px;
height: 300px;
background: linear-gradient(to bottom right, rgba(0,0,0,0.7),
rgba(0,0,0,0.0)), url(../img/headline.jpg) no-repeat center ;
}
#headline .center {
width: 1263px;
height: 300px;
margin: 0 auto;
}
#headline hgroup {
padding: 100px 0 0 50px;
}
#headline h2 {
color: #eee;
font-size: 36px;
letter-spacing: 1px;
}
#headline h3 {
color: #eee;
letter-spacing: 1px;
font-size: 20px;
}
三.内容区域
首先,分为侧栏和主栏。
//侧栏和主栏
<div id="container">
<aside class="sidebar">
sidebar
</aside>
<div class="list">
list
</div>
</div>
//CSS 部分
#container {
width: 1263px;
height: 1200px;
margin: 30px auto;
}
#container .sidebar {
width: 320px;
height: 1200px;
background-color: #eee;
float: left;
}
#container .list {
width: 920px;
height: 1200px;
background-color: #ccc;
float: right;
}

代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>项目实战--PC端固定布局</title>
<link rel="stylesheet" href="css/basic.css">
<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="index.html">首页</a></li>
<li><a href="information.html">旅游资讯</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>

<div id="tour">
<section class="center">
<h2>热门旅游</h2>
<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
</section>
<figure>
<img src="img/tour1.jpg" >
<figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 包团特惠,超丰富景点,升级1晚国五,无自费,更赠送600元/成人自费券</figcaption>
<div>
<em class="sat">满意度 77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figure>
<figure>
<img src="img/tour2.jpg" alt="马尔代夫双鱼岛Olhuveli4晚6日自助游">
<figcaption><strong class="title">&lt;马尔代夫双鱼岛Olhuveli4晚6日自助游&gt;</strong> 上海出发,机+酒包含:早晚餐+快艇</figcaption>
<div>
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figure>
<figure>
<img src="img/tour3.jpg" alt="海南双飞5日游">
<figcaption><strong class="title">&lt;海南双飞5日游&gt;</strong> 含盐城接送,全程挂牌四星酒店,一价全含,零自费“自费项目”免费送</figcaption>
<div>
<em class="sat">满意度 90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
<div class="type">自助旅游</div>
</figure>
<figure>
<img src="img/tour4.jpg" alt="富山-大阪-东京8日游">
<figcaption><strong class="title">&lt;富山-大阪-东京8日游&gt;</strong> 暑期亲子,2天自由,无导游安排自费项目,全程不强迫购物</figcaption>
<div>
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
<div class="type">自助旅游</div>
</figure>
<figure>
<img src="img/tour5.jpg" alt="法瑞意德12日游">
<figcaption><strong class="title">&lt;法瑞意德12日游&gt;</strong> 4至5星,金色列车,少女峰,部分THE MALL</figcaption>
<div>
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figure>
<figure>
<img src="img/tour6.jpg" alt="巴厘岛6日半自助游">
<figcaption><strong class="title">&lt;巴厘岛6日半自助游&gt;</strong> 蓝梦出海,独栋别墅,悦榕庄下午茶,纯玩</figcaption>
<div>
<em class="sat">满意度 95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figure>
<figure>
<img src="img/tour7.jpg" alt="塞舌尔迪拜9日自助游">
<figcaption><strong class="title">&lt;塞舌尔迪拜9日自助游&gt;</strong> 一游两国,4晚塞舌尔,2晚迪拜,香港EK往返</figcaption>
<div>
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>9669</strong> 起</span>
</div>
<div class="type">游轮观光</div>
</figure>
<figure>
<img src="img/tour8.jpg" alt="花样姐姐土耳其9日或10日游">
<figcaption><strong class="title">&lt;花样姐姐土耳其9日或10日游&gt;</strong> 最高立减3000!中餐六菜一汤+土耳其当地美食满足您挑剔味蕾</figcaption>
<div>
<em class="sat">满意度 93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
<div class="type">出境长线</div>
</figure>
<figure>
<img src="img/tour9.jpg" alt="大阪-京都-箱根双飞6日游">
<figcaption><strong class="title">&lt;大阪-京都-箱根双飞6日游&gt;</strong> 盐城直飞,不走回头路,境外无自费,超值之旅</figcaption>
<div>
<em class="sat">满意度 100%</em>
<span class="price">¥ <strong>5284</strong> 起</span>
</div>
<div class="type">国内短线</div>
</figure>
</div>

<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订方式?</li>
<li>儿童价是基于什么制定的?</li>
<li>旅游的线路品质怎么界定的?</li>
<li>单房差是什么?</li>
<li>旅游保险有那些种类?</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博:weibo.com/ycku</li>
<li>邮件:[email protected]</li>
<li>地址:江苏盐城无名路123 号</li>
</ul>
</div>
</div>
<div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证:L-YC-BK12345</div>
</footer>

</body>
</html>

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>项目实战--PC端固定布局</title>
<link rel="stylesheet" href="css/basic.css">
<link rel="stylesheet" href="css/column.css">
</head>
<body>

<header id="header">
<div class="center">
<h1 class="logo">瓢城旅行社</h1>
<nav class="link">
<h2 class="none">网站导航</h2>
<ul>
<li><a href="index.html">首页</a></li>
<li class="active"><a href="information.html">旅游资讯</a></li>
<li><a href="###">机票订购</a></li>
<li><a href="###">风景欣赏</a></li>
<li><a href="###">公司简介</a></li>
</ul>
</nav>
</div>
</header>

<div id="headline">
<div class="center">
<hgroup>
<h2>旅游资讯</h2>
<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
</hgroup>
</div>
</div>

<div id="container">
<aside class="sidebar">
sidebar
</aside>
<div class="list">
list
</div>
</div>

<footer id="footer">
<div class="top">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订方式?</li>
<li>儿童价是基于什么制定的?</li>
<li>旅游的线路品质怎么界定的?</li>
<li>单房差是什么?</li>
<li>旅游保险有那些种类?</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博:weibo.com/ycku</li>
<li>邮件:[email protected]</li>
<li>地址:江苏盐城无名路123 号</li>
</ul>
</div>
</div>
<div class="bottom">Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号| 旅行社经营许可证:L-YC-BK12345</div>
</footer>

</body>
</html>

 

@charset "utf-8";

body,h1,h2,h3,ul,p,figure {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
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;
}
#footer {
height: 360px;
background-color: #222;
}
#footer .top {
width: 1263px;
height: 281px;
margin: 0 auto;
text-align: center;
}
#footer .block {
width: 410px;
height: 280px;
display: inline-block;
text-align: left;
color: #ccc;
vertical-align: top;
}
#footer h2 {
font-size: 24px;
font-weight: normal;
padding: 20px 0 0 20px;
}
#footer hr {
width: 90%;
border: 1px dashed #333;
}
#footer ul {
font-size: 18px;
color: #777;
text-indent: 20px;
line-height: 2;
}
#footer .bottom {
height: 80px;
line-height: 80px;
text-align: center;
color: #777;
background-color: #000;
border-top: 1px solid #444;
}

 

@charset "utf-8";

#headline {
width: 100%;
min-width: 1263px;
height: 300px;
background: linear-gradient(to right bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(../img/headline.jpg) no-repeat center;
}
#headline .center {
width: 1263px;
height: 300px;
margin: 0 auto;
}
#headline hgroup {
padding: 100px 0 0 50px;
}
#headline h2 {
color: #eee;
font-size: 36px;
letter-spacing: 1px;
}
#headline h3 {
color: #eee;
font-size: 20px;
letter-spacing: 1px;
}
#container {
width: 1263px;
height: 1200px;
margin: 30px auto;
}
#container .sidebar {
width: 320px;
height: 1200px;
background-color: #eee;
float: left;
}
#container .list {
width: 920px;
height: 1200px;
background-color: #ccc;
float: right;
}

 

@charset "utf-8";

#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;
}
#tour {
width: 1263px;
height: 1150px;
/*background-color: #ccc;*/
margin: 30px auto;
text-align: center;
}
#tour .center h2 {
font-size: 45px;
letter-spacing: 2px;
color: #666;
margin: 10px 0;
}
#tour .center p {
color: #666;
margin: 10px 0;
}
#tour figure {
border: 1px solid #ddd;
display: inline-block;
padding: 4px;
border-radius: 4px;
margin: 15px 12px;
width: 380px;
text-align: left;
position: relative;
}
#tour figure img {
vertical-align: middle;
}
#tour figcaption {
color: #777;
line-height: 1.5;
letter-spacing: 1px;
font-size: 14px;
padding: 7px 0 5px 0;
}
#tour .title {
color: #333;
font-weight: normal;
}
#tour .sat {
float: right;
font-size: 13px;
color: #999;
font-style: normal;
position: relative;
top: 5px;
right: 5px;
}
#tour .price {
color: #f60;
font-size: 14px;
}
#tour .price strong {
font-size: 20px;
letter-spacing: 1px;
}
#tour .type {
width: 90px;
height: 25px;
line-height: 25px;
font-size: 14px;
text-align: center;
color: #fff;
background-color: #59b200;
position: absolute;
top: 4px;
left: 4px;
}

第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端固定布局4

第31章项目实战-PC端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现。一.热门旅游区本节课,我们将探讨一下首页最核心的部... 查看详情

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

第31章项目实战-PC端固定布局[3]学习要点:1.搜索区2.插入大图3.搜索框本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现。一.搜索区本节课,我们接着header头部往下,来设计一块搜索区。这... 查看详情

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

第31章项目实战-PC端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现。一.底部区域本节课,我们将探讨一下首页中最底部的区域... 查看详情

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

第31章项目实战-PC端固定布局[7]学习要点:1.侧栏制作2.详细代码本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现。一.侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块。经... 查看详情

第32章项目实战-移动端流体布局6

第32章项目实战-移动端流体布局[6]学习要点:1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。一.旅游资讯这个如果做成移动端,那么一切从简,... 查看详情

第33章项目实战-兼容式响应布局6

第32章项目实战-移动端流体布局[6]学习要点:1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。一.旅游资讯这个如果做成移动端,那么一切从简,... 查看详情

第32章项目实战-移动端流体布局5

第32章项目实战-移动端流体布局[5]学习要点:1.导航固顶2.三个栏目3.公司简介本章主要开始如果通过第一个PC端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。一.导航固定由于移动设备屏幕高度较低... 查看详情

第33章项目实战-兼容式响应布局1

第33章项目实战-兼容响应式布局[1]学习要点:1.响应式初探2.起始部分本章主要开始如果将前两个项目再进行重构,设计成既可以在PC端正常显示,又可以在PAD上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使用... 查看详情

第32章项目实战-移动端流体布局3

第32章项目实战-移动端流体布局[3]学习要点:1.搜索部分2.旅游部分3.媒体查询本章主要开始如果通过第一个PC端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。一.搜索部分搜索部分包含三个内容,背... 查看详情

第33章项目实战-兼容式响应布局2

第33章项目实战-兼容响应式布局[2]学习要点:1.搜索响应式2.底部响应式本章主要开始如果将前两个项目再进行重构,设计成既可以在PC端正常显示,又可以在PAD上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使... 查看详情

第32章项目实战-移动端流体布局4

第32章项目实战-移动端流体布局[4]学习要点:1.旅游图片部分本章主要开始如果通过第一个PC端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。一.旅游图片部分//HTML部分<divclass="container"><figure>... 查看详情

第33章项目实战-兼容式响应布局3

第33章项目实战-兼容响应式布局[3]学习要点:1.标题响应式2.图片响应式本章主要开始如果将前两个项目再进行重构,设计成既可以在PC端正常显示,又可以在PAD上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使... 查看详情

javassm开发大众点评后端项目实战教程javassm项目实战教程共9章

第1章课程概览  介绍课程目标、开发内容、功能划分、开发顺序,开发所需要的前置知识及环境准备,并且介绍了与课程相关的前后端分离的思想,架构演进过程。第2章开发准备  演示前端工程环境搭建以及启动... 查看详情

visualc++典型模块与项目实战大全的目录

参考技术A《visualc++典型模块与项目实战大全》第1篇visualc++项目开发基础第1章vc++6.0程序设计简介2教学视频:11分钟1.1visualc++6.0集成开发环境21.1.1vc++6.0集成开发环境菜单栏及工具栏简介31.1.2vc++6.0集成开发环境工作区简介31.2visualc+... 查看详情

哈士奇赠书活动-18期-〖flaskweb全栈开发实战〗

...发网站的各项技术要点。全书共11章,首先讲解了Flask项目开发中的环境搭建、项目配置、URL与视图、Jinja2模板、数据库、表单、Flask进阶、缓存系统等。然后拓展了知识面,在项目实战中分别介绍了RESTfulAPI、邮箱验证码... 查看详情

java仿短视频小程序全栈开发实战视频教程+课程代码

...章开发视频的留言板第9章开发短视频后台办理体系第10章项目上线与发布下载地址:百度网盘 查看详情