第九十一节，html5+css3pc端固定布局，完成首页
html5+css3pc端固定布局，完成首页
此时我们的首页就完成了
首页效果
其他页面我就不做了，原理相同，做其他页面时将头尾css分离调用即可
大纲算法
我们看看大纲算法比较清晰，说明符合规则
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瓢城旅行社</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body> <!--导航-->
<header class="dao-hang">
<div class="dao-hang2">
<h1 class="log">瓢城旅行社</h1>
<nav>
<h2>网站导航</h2>
<ul>
<li class="dao-hang-lie-biao"><h3><a href="index.html">首页</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">旅游资讯</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">机票订购</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">风景欣赏</a></h3></li>
<li class="dao-hang-lie-biao"><h3><a href="#">公司简介</a></h3></li>
</ul>
</nav>
</div>
</header> <!--搜索区域-->
<div class="sou-suo">
<h2>站内搜索</h2>
<div class="sou-suo2"></div>
<div class="sou-suo3">
<input type="text" placeholder="请输入搜索内容">
<button>搜索</button>
</div>
</div> <!--主体-->
<section class="zhu-ti">
<div class="zhu-ti2">
<h2>热门旅游</h2>
<p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
</div>
<div class="tu">
<img src="img/tour1.jpg">
<h3>曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游曼谷-芭提雅6日游</h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度70%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour2.jpg">
<h3>马尔代夫双鱼岛Olhuveli4晚6日自助游上海出发，机+酒 包含:早晚餐+快艇 </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度20%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour3.jpg">
<h3>海南双飞5日游含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送</h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度69%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour4.jpg">
<h3>富山-大阪-东京8日游暑期亲子，2天自由，无导游安排自费项目，全程不强迫购物 </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度36%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour5.jpg">
<h3>法瑞意德12日游4至5星，金色列车，少女峰，部分THE MALL </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度12%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour6.jpg">
<h3>巴厘岛6日半自助游蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩 </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度10%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour7.jpg">
<h3>塞舌尔迪拜9日自助游一游两国，4晚塞舌尔，2晚迪拜，香港EK往返 </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度5%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour8.jpg">
<h3>花样姐姐土耳其9日或10日游最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味蕾 </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度46%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
<div class="tu">
<img src="img/tour9.jpg">
<h3>大阪-京都-箱根双飞6日游盐城直飞，不走回头路，境外无自费，超值之旅 </h3>
<div class="jia-ge">
<span>¥<strong>2864</strong>起</span>
<em>满意度19%</em>
</div>
<div class="shu-xing">
<span>自助旅游</span>
</div>
</div>
</section> <!--尾部-->
<footer class="wei-bu">
<div class="wei-bu2">
<div class="yy dd1">
<h2>合作伙伴</h2>
<hr>
<ul>
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅行社</li>
</ul>
</div>
<div class="yy dd1">
<h2>旅游FAQ</h2>
<hr>
<ul>
<li>旅游合同签订方式？</li>
<li>儿童价是基于什么制定的？</li>
<li>旅游的线路品质怎么界定的？</li>
<li>单房差是什么？</li>
<li>旅游保险有那些种类？</li>
</ul>
</div>
<div class="yy dd1">
<h2>联系方式</h2>
<hr>
<ul>
<li>微博：weibo.com/ycku</li>
<li>邮件：ycku@ycku.com</li>
<li>地址：江苏盐城无名路123号</li>
</ul>
</div>
</div>
<div class="ban-quan">
<p>Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号 | 旅行社经营许可证：L-YC-BK12345</p>
</div>
</footer>
</body>
</html>
css代码
@charset "utf-8";
/*通用样式*/
*{
margin:;
padding:;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
/*通用样式结束*/ /*导航区域*/
.dao-hang{
width: 100%;
min-width:1263px;
height: 70px;
background-color: #333;
color: azure;
}
.dao-hang .dao-hang2{
width: 1263px;
height: 70px;
margin: 0 auto;
}
.dao-hang .dao-hang2 .log{
width: 240px;
height: 70px;
float: left;
background-image: url("../img/logo.png");
text-indent:-9999px;
}
.dao-hang .dao-hang2 h2{
display: none;
}
.dao-hang .dao-hang2 ul{
float: right;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao{
width: 120px;
height: 70px;
float: left;
text-align: center;
line-height: 70px;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao a{
display: block;
width: 120px;
height: 70px;
color: azure;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao a:hover{
background-color: #ff4d51;
}
/*导航区域结束*/ /*搜索区域*/
.sou-suo{
width: 100%;
min-width:1263px;
height: 600px;
background: url("../img/search.jpg") no-repeat center;
position: relative;
}
.sou-suo h2{
display: none;
}
.sou-suo .sou-suo2{
width: 600px;
height: 60px;
background-color: #000000;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -30px;
border-radius: 8px;
opacity: 0.7;
}
.sou-suo .sou-suo3{
width: 600px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -30px;
border-radius: 8px;
}
.sou-suo .sou-suo3 input{
width: 500px;
height: 50px;
border: none;
border-radius: 8px;
margin: 5px 0 5px 5px;
padding: 0 5px 0 5px;
font-size: 22px;
line-height: 50px;
}
.sou-suo .sou-suo3 button{
width: 70px;
height: 50px;
border: none;
border-radius: 8px;
float: right;
margin: 5px 8px 5px 0;
font-size: 22px;
line-height: 50px;
cursor: pointer;
}
.sou-suo .sou-suo3 button:hover{
background-color: #C6C6C6;
} /*主体区*/
.zhu-ti{
width: 1263px;
height: 1150px;
margin: 0 auto;
}
.zhu-ti .zhu-ti2{
text-align: center;
padding: 10px 0 10px 0;
}
.zhu-ti .zhu-ti2 h2{
margin: 10px 0 10px 0;
font-size: 45px;
color: #666666;
}
.zhu-ti .zhu-ti2 p{
margin: 10px 0 10px 0;
color: #666666;
}
.zhu-ti .tu{
display: inline-block;
vertical-align: bottom;
padding: 5px 5px 5px 5px;
border: 1px solid #DDDDDD;
border-radius: 6px;
position: relative;
margin: 14px 0 10px 15px;
}
.zhu-ti .tu img{
vertical-align: middle;
}
.zhu-ti .tu h3{
width: 380px;
height: 32px;
font-size: 14px;
font-weight: normal;
line-height: 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zhu-ti .tu .jia-ge{
width: 380px;
height: 40px;
line-height: 40px;
}
.zhu-ti .tu .jia-ge span{
font-size: 14px;
color: #FF6600;
}
.zhu-ti .tu .jia-ge span strong{
font-size: 20px;
margin: 0 5px 0 5px;
}
.zhu-ti .tu .jia-ge em{
font-style: normal;
float: right;
font-size: 14px;
color: #999999;
}
.zhu-ti .tu .shu-xing{
background-color: #59B200;
width: 92px;
height: 26px;
line-height: 26px;
text-align: center;
border-radius: 0 0 6px 0;
position: absolute;
top: 5px;
left: 5px;
color: #fff6fc;
}
/*尾部*/
.wei-bu{
min-width:1263px;
height: 360px;
background-color: #222222;
margin: 20px 0 0 0;
}
.wei-bu .wei-bu2{
width: 1263px;
height: 280px;
/*background-color: #5dff59;*/
margin: 0 auto;
}
.wei-bu .wei-bu2 .yy{
width: 385px;
height: 280px;
/*background-color: #1232ff;*/
display: inline-block;
margin: 0 0 0 20px;
vertical-align: top;
overflow: hidden;
}
.wei-bu .wei-bu2 .yy h2{
/*background-color: #ffe627;*/
color: #CCCCCC;
padding: 20px 0 0 20px;
}
.wei-bu .wei-bu2 .yy hr{
padding: 3px 0 3px 0;
border: none;
border-bottom: 1px dashed #333;
}
.wei-bu .wei-bu2 .yy ul{
height: 200px;
/*background-color: #ff4450;*/
padding: 5px 5px 8px 20px;
overflow: hidden;
}
.wei-bu .wei-bu2 .yy ul li{
font-size: 20px;
line-height:;
color: #666666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wei-bu .ban-quan{
height: 79px;
background-color: #000000;
margin: 0 auto;
line-height: 79px;
text-align: center;
color: #fffdfd;
}
第九十一节，html5+css3pc端固定布局，完成首页的更多相关文章
- 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析
html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...
- 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
- 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区
html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
- 第 31 章 项目实战-PC 端固定布局[5]
学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...
- 第 31 章 项目实战-PC 端固定布局[4]
学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门 ...
- 第 31 章 项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...
- 第 31 章 项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法 ...
随机推荐
- for循环和while循环
for循环和while循环 --道心 for循环 name1_list=['daoxin','wuxin','zhixin']for ele in name1_list: #找到"wuxin ...
- JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...
- 实际开发中，后台回传的错误格式的Json数据处理
现在很多学习刚学习移动开发的同学,相信在培训机构,拿到后台数据的时候,格式都是正确的,甚至有的还是plist文件.但是实际开发中,我们获取数据都是通过网络接口从服务器获取数据,这些数据的格式都是后台写 ...
- SublimeText快捷键
在我做了一次包含一些现场编码的演示后,一些观众问我是如何操作这么快.当然这里没有唯一的答案,答案是一堆简单的快捷键和大量的实践的组合.为了回应那些询问,我觉得有必要看看我每天想都不用想且使用的快捷键. ...
- nodeValue、firstChild和lastChild属性
nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...
- python3 列表 函数
python3中list的所有函数 list是有序的,元素个数无限的,元素类型多样的,可变的 增加 # 'append', 增加对象# 'insert', 指定位置增加# 'extend', 增加可迭 ...
- noip 2016 提高组题解
前几天写的那个纯属搞笑.(额,好吧,其实这个也不怎么正经) 就先说说day2吧: T1:这个东西应该叫做数论吧. 然而我一看到就照着样例在纸上推了大半天(然而还是没有看出来这东西是个杨辉三角) 然后就 ...
- DevExpress的SpinEdit控件无法输入数字的问题
今天在发布程序后突然发现了这个问题,刚开始很莫名其妙的,因为在调试时从来没碰到过.然后经过测试发现,这个问题的原因和输入法有很大关系: 当你的输入法是中文状态时,是无法向框中输入数字的,此时只能点击上 ...
- JTree单击事件
import javax.swing.*; import javax.swing.tree.*; import java.awt.FlowLayout; import java.awt.GridLay ...
- Chrome 开发者工具的使用
Console 那里是可以调节上下文的,不同的文档上下文互相隔离,默认是top,也就是当前打开的页面.这个功能在页面包含 iframe 或者开发插件的时候才用得到. 早期版本的 Resource 已经 ...