Html5 学习笔记 【PC固定布局】 实战5 咨询页面 侧栏
2024-04-24 06:36:29
最终效果图：
提出公共页脚和导航部分：
新建infomatino.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><!-- 导航了部分 --><!-- 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><a href="index.html">首页</a></li><li class="active"><a href="infomation.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"><div class="sidebox recommend"><h2>景点推荐</h2><div class="tag"><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a><a href="###">曼谷(12)</a></div></div><div class="sidebox hot"><h2>热门旅游</h2><figure class="figure"><img src="img/hot1.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure> <figure class="figure"><img src="img/hot2.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure><figure class="figure"><img src="img/hot3.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure> <figure class="figure"><img src="img/hot4.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure><figure class="figure"><img src="img/hot5.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure> <figure class="figure"><img src="img/hot6.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure><figure class="figure"><img src="img/hot7.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure> <figure class="figure"><img src="img/hot8.jpg" alt="曼谷芭提雅6日游"><figcaption>曼谷芭提雅6日游</figcaption></figure></div><div class="sidebox treasure"><h2>旅游百宝箱</h2><div class="box"><a href="###" class="trea1">天气预报</a><a href="###" class="trea2">火车票查询</a><a href="###" class="trea3">航空查询</a><a href="###" class="trea4">地铁线路查询</a></div></div></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>旅游咨询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>
页面column.css 内容：
@charset "utf-8";/*-------------------------------咨询页面 侧栏主页---------------------------------------*/
#headline {width: 100%;/*缩小页面滚动条右侧出现白色区域*/min-width: 1263px;height: 300px;/*渐变 方位 颜色 透明度 rgba *//*向右下方 黑色渐变 透明度0.7 - 全透明*/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;margin: 30px auto;
}#container .sidebar {width: 340px;/*background-color: #eee;*/float: right;
}#container .sidebox {border: 1px solid #eee;/*下面的边距10px 上右下左*/margin: 0 0 10px 0;text-align: center;
}#container .sidebox h2 {font-size: 20px;font-weight: normal;letter-spacing: 1px;/*首行缩进*/text-indent: 8px;height: 40px;line-height: 40px;background-color: #fafafacolor: #666;text-align: left;
}#container .tag {margin: 10px 0;
}#container .tag a {background-color: #eee;display: inline-block;width: 100px;height: 35px;line-height: 35px;margin: 2px 0;color: #999;
}#container .tag a:hover {background-color: #458b00;color: white;
}#container .figure {padding: 10px 0;
}#container figure {display: inline-block;padding: 4px;color: #666;
}#container .box {margin: 10px 0;
}#container .box a {background-color: #eee;display: inline-block;width: 157px;height: 40px;line-height: 40px;margin: 2px 0;color: #999;
}#container .box a:hover {color: green;
}/*旅游百宝箱背景图片*/
#container .box a.trea1 {background: #eee url(../img/trea1.png) no-repeat 10px center;
}
#container .box a.trea2 {background: #eee url(../img/trea2.png) no-repeat 10px center;
}
#container .box a.trea3 {background: #eee url(../img/trea3.png) no-repeat 10px center;
}
#container .box a.trea4 {background: #eee url(../img/trea4.png) no-repeat 10px center;
}#container .list {width: 900px;/*background-color: #ccc;*/float: left;
}抽取基础css文件内容 basic.css：
@charset "utf-8";/*------------------------------------第一节 导航栏部分------------------------------------*/
/*本身外边距*/
body, h1, ul, h2, p, figure, h3{margin: 0;padding: 0;
}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: 9999;
}#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;
}#footer {min-width: 1263px;height: 360px;background-color: #222;clear: both;position: relative;top: 20px;
}#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: 2;
}/*所有权*/
#footer .bottom {height: 80px;color: #777;text-align: center;line-height: 80px;background-color: #000;/*距上边框的一条线 好看*/border-top: 1px solid #444;
}将style.css basic.css 抽取出来的部分进行删除
转载于:https://www.cnblogs.com/lixuchun/p/9157961.html
Html5 学习笔记 【PC固定布局】 实战5 咨询页面 侧栏相关推荐
- Html5 学习笔记 【PC固定布局】 实战7 风景欣赏 联系我们
风景欣赏最终效果: 关于公司最终效果: 风景欣赏Html代码: <!DOCTYPE html> <html lang="zh-cn"> <head&g ...
- Html5 学习笔记 【PC固定布局】 实战6 咨询页面
最终效果: Html页面代码: <!DOCTYPE html> <html lang="zh-cn"> <head><meta chars ...
- Html5 学习笔记 【PC固定布局】 实战7 机票预订页面
最终实际效果: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head><meta chars ...
- HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识 标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读 评论(0) 收藏 举报 分类: JavaScr ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- 【一文弄懂】张正友标定法-完整学习笔记-从原理到实战
张正友标定法-完整学习笔记-从原理到实战 文章目录 张正友标定法-完整学习笔记-从原理到实战 (零)前言: 1 为什么需要标定? 2 相机标定的已知条件和待求解是什么? 标定前的已知条件: 待求信息: ...
- HTML5 学习笔记
HTML5 学习笔记 前言 该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂 目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容 目录 HTML5 学习笔记 前言 ...
- 学习笔记之数据可视化（二）——页面布局（上）
~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- 弃Java、Swift于不顾，为何选Python？
- JS实现Trim()
- 一个三非渣本的Java校招秋招之路，吊打面试官
- HotSpot 虚拟机的算法实现
- matlab充分利用性能,Matlab高性能编程——代码优化和并行计算
- oracle exp imp
- 算法-二分搜索-找出最大值和最小值
- C++异常之异常说明
- 1.2）深度学习笔记------神经网络的编程基础
- 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
- 看完这一篇，你就对 Spring Security 略窥门径了 | 原力计划
- Ubuntu安装nextcloud-17.0.1
- 做个插件MaterialSpinner笔记
- 万人云峰会DevSecOps论坛：数字化浪潮下，安全开发与运维该如何破局？
- 双系统下如何切换到ubantu界面及如何切换到windows界面
- 应用EtherNet IP转Modbus网关连接施耐德PLC和AB PLC
- Vue中配置代理服务器
- 棋盘dp 牛牛的DRB迷宫I
- python scapy 抓包_Python3下基于Scapy库完成网卡抓包解析
- 在Centos7中配置NIS的详细过程