Html5 学习笔记 【PC固定布局】 实战4 footer 区域
最终效果图：
Html代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>项目实战 PC端固定布局</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航了部分 -->
<!-- body nav section 需要h1~h6标题大纲 div header不需要 -->
<header id="header">
<div class="center">
<!-- 一个页面最好就一个h1 让搜索引擎能更好的抓取关键字 -->
<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> <!-- 旅游产品展示部分 -->
<div id="tour">
<section class="center">
<h2>热门旅游</h2>
<p>国内旅游,国外旅游,自助旅游,自驾旅游,游轮签证,主题游各种最新最热旅游推荐</p>
</section>
<!-- 图文并茂使用figure标签 -->
<!-- figcaption 进行图片说明 -->
<figure>
<img src="img/tour1.jpg" alt="热门旅游">
<figcaption><strong class="title"><曼谷-芭提雅6日游></strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>
<div>
<em class="sat">满意度77%</em>
<span class="price">￥ <strong>2846</strong>起</span>
</div>
<div class="type">国内长线</div>
</figure>
--------------------------其余 8 个 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>旅游咨询QA</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/lvyou</li>
<li>邮件:lvyou@lvyou.com</li>
<li>地址:沈阳铁西金桂路123号</li>
</ul>
</div>
</div>
<div class="bottom">
Copyright© jjjj | ICP 备 131313312112号 | 旅行社经营许可证 : L-YC-BB12313212
</div>
</footer> </body>
</html>
@charset "utf-8"; /*------------------------------------第一节 导航栏部分------------------------------------*/
/*本身外边距*/
body, h1, ul, h2, p, figure{
margin:;
padding:;
} /* 去除ul小圆点 */
ul {
list-style: outside none none;
} /* a 标签不需要下划线 */
a {
text-decoration: none;
} .none {
display: none;
} #header {
width: 100%;
min-width: 1263px;
height: 70px;
background: #333;
/*header做个阴影*/
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
position: relative;
z-index:;
} #header .center {
width: 1263px;
height: 70px;
margin: 0 auto;
} #header .logo {
width: 240px;
height: 70px;
background-image: url(../img/logo.png);
/* h1中的字向左移动到不能看到 */
text-indent: -9999px;
float: left;
} #header .link {
width: 650px;
height: 70px;
float: right;
/* 字体淡灰 */
color: #eee;
/* 文字垂直居中 设定高度和 ul高度相同即可 */
line-height: 70px;
} #header .link li {
width: 120px;
/* li 文字横向铺平 */
float: left;
text-align: center;
} #header .link a {
color: #eee;
display: block;
} #header .link a:hover,
#header .active a {
background-color: #000;
} /*--------------------------------第二节 搜索框部分---------------------------------*/
/*search 搜索图片*/
#search {
width: 100%;
/*缩小页面滚动条右侧出现白色区域*/
min-width: 1263px;
height: 600px;
background: url(../img/search.jpg) no-repeat center;
position: relative;
} /*背景色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;
} /*input 输入框部分*/
#search .search {
width: 446px;
height: 54px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
/*上右下左*/
margin: -28px 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: #fff;
position: absolute;
top: 50%;
left: 50%;
/*上右下左*/
margin: -28px 0 0 175px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
cursor: pointer;
/*处理某些浏览器点击后出现外边框*/
outline: none;
font-weight: bold;
}
/*---------------------------------第三节 旅游部分 -------------------------------------*/
#tour {
width: 1263px;
height: 1250px;
/*background-color: #ccc;*/
margin: 30px auto;
text-align: center;
} #tour .center h2 {
font-size: 45px;
/*字体间距*/
letter-spacing: 2px;
color: #666;
/*2参数 1为上下 2为左右*/
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;
/*父元素相对定位 figure 子元素可以绝对定位*/
position: relative;
} /*图片居中*/
#tour figure img {
width: 380px;
height: 230px;
vertical-align: middle;
} #tour figure 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;
/*绿色*/
background-color: #59b200;
color: white;
text-align: center;
position: absolute;
top: 4px;
left: 4px;
} /*---------------------------------第四节 footer部分-------------------------------*/
#footer {
height: 360px;
background-color: #222;
} #footer .top {
width: 1263px;
height: 280px;
/*background-color: red;*/
/*居中水平*/
margin: 0 auto;
text-align: center;
} /*footer 合作伙伴等信息*/
#footer .left { } #footer .center { } #footer .right { } #footer .block {
width: 410px;
height: 280px;
/*background-color: green;*/
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;
} #footer ul {
font-size: 18px;
color: #777;
/*文本首行缩进*/
text-indent: 20px;
line-height:;
} /*所有权*/
#footer .bottom {
height: 80px;
color: #777;
text-align: center;
line-height: 80px;
background-color: #000;
/*距上边框的一条线 好看*/
border-top: 1px solid #444;
}
Html5 学习笔记 【PC固定布局】 实战4 footer 区域的更多相关文章
- CSS学习笔记--Div+Css布局实战(入门)
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...
- [html5] 学习笔记-响应式布局
1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- 微信小程序开发：学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- Html5 学习笔记 【PC固定布局】 实战3 热门旅游展示区
最终效果图: html 代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta char ...
随机推荐
- [LeetCode] 182.查找重复的电子邮箱
编写一个 SQL 查询,查找 Person 表中所有重复的电子邮箱. 示例: +----+---------+ | Id | Email | +----+---------+ | 1 | a@b.co ...
- 《剑指offer》面试题9 斐波那契数列 Java版
书中方法一:递归,这种方法效率不高,因为可能会有很多重复计算. public long calculate(int n){ if(n<=0){ return 0; } if(n == 1){ r ...
- [暑假集训Day1T2]北极通讯网络
这题主要考察对“卫星电话”的理解,k个卫星电话相当于可以让k个联通块保持联通,因此我们只需要让原图连成k个联通块,然后给每个联通块的任意一个节点发一部卫星电话即可.因此我们需要连n-k条边,特别地,当 ...
- python学习第三十一天函数的嵌套及函数的作用域
python函数的嵌套是指在函数里面嵌套另外一个函数,可以嵌套更多,函数一旦套用了另外一个函数,他的作用域就已经形成,可以通过global关键词改变变量的作用域,下面详细说明函数的嵌套及函数的作用域 ...
- vue-froala-wysiwyg 富文本编辑器
近期需要在vue3项目上做一个富文本编辑器,找了很多插件组件,最终决定用 froala.虽然不是免费的,但是功能实在是太强大了. froala 文档:https://www.froala.com/wy ...
- shell函数的结束与返回值
- Oracle 数据库恢复命令
前提是oracle服务能正常启动,但是客户端怎么都连接不上. 首先打开命令行,输入:sqlplus / as sysdba; 回车 连上数据库后,屏幕会显示:已连接到空闲例程. 接下来在SQL> ...
- token和session的区别及其发展史
其实token与session的问题是一种时间与空间的博弈问题, session是空间换时间,而token是时间换空间. 一.发展史 很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为 ...
- 牛客网NOIP赛前集训营-提高组（第七场）A-中国式家长 2
题目描述 有一天,牛牛找到了一个叫<中国式家长>的游戏,游戏中需要靠"挖脑洞"来提升悟性. 挖脑洞在一个\(N\)行\(M\)列的地图上进行,一开始牛牛有\(K\)点行 ...
- centos 6.5 关闭防火墙
关闭防火墙分为临时关闭和永久关闭.临时关闭重启系统后恢复正常,永久关闭重启系统后仍然是关闭状态 临时关闭与开启 service iptables stop service iptables start ...