Html5 学习笔记【PC固定布局】实战6 咨询页面

最终效果：

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">

                    <ul>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                        <li><a href="###">曼谷(12)</a></li>

                    </ul>

                </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">

            <div class="infor">

                <ul class="left">

                    <li><a href="###">限时特价</a></li>

                    <li><a href="###">热门推荐</a></li>

                </ul>

                <ul class="right">

                    <li><a href="###" class="selected">推荐</a></li>

                    <li><a href="###">折扣</a></li>

                    <li><a href="###">价格</a></li>

                </ul>

            </div>

            <figure class="tour">

                <img src="img/tour1.jpg" alt="曼谷芭提雅6日游">

                <figcaption>

                    <article>

                        <header>

                            <hgroup>

                                <h2>曼谷-芭提雅6日游</h2>

                                <h3>抱团特惠，超丰富景点 升级1晚国五 无自费 赠送600成人卷。。。</h3>

                            </hgroup>

                        </header>

                        <ol>

                            <li><mark>交通</mark>：春秋航空:杭州出发，无需转机</li>

                            <li><mark>团期</mark>：11/01、11/03、11/08...</li>

                        </ol>

                        <div class="buy">

                            <div class="price">

                                ￥<strong>2864</strong>

                                <s>￥3600</s>

                            </div>

                            <div class="reserve">

                                <a href="###">立即抢购</a>

                            </div>

                        </div>

                        <div class="type">国内长线</div>

                        <div class="disc"><span>4.7折</span></div>

                        <footer>本团旅游中旅赞助截止时间<time>2050-05-05</time></footer>

                    </article>

                </figcaption>

            </figure>

            <div class="more">加载更多...</div>

        </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>

CSS 代码内容：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: #fafafa

    color: #666;

    text-align: left;

}

#container .tag {

    margin: 10px 0;

}

#container .tag li {

    background-color: #eee;

    display: inline-block;

    width: 100px;

    height: 35px;

    line-height: 35px;

    margin: 2px 0;

    color: #999;

}

#container .tag a {

    display: block;

    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: 910px;

    /*background-color: #ccc;*/

    float: left;

}

#container .infor {

    height: 45px;

    line-height: 45px;

    background-color: #eee;

    margin: 0 0 20px 0;

}

#container .left {

    display: inline-block;

    float: left;

}

#container .left li {

    display: inline-block;

    width: 150px;

    height: 43px;

    line-height: 43px;

    text-align: center;

}

#container .left li:first-child {

    background-color: #fff;

    border-top: 2px solid #458b00;

    /*向右偏移1像素 做边框线*/

    position: relative;

    left: 1px;

}

#container .left a {

    color: #666;

}

#container .right {

    display: inline-block;

    float: right;

    padding: 0 20px 0 0;

}

#container .right li {

    display: inline-block;

    width: 60px;

    height: 45px;

    line-height: 45px;

    text-align: center;

}

#container .right a {

    padding: 3px 8px;

    color: #666;

}

#container .right a.selected,  #container .right a:hover {

    background-color: #458b00;

    color: #fff;

}

#container .tour {

    width: 910px;

    /*background-color: #eee;*/

    padding:;

    margin: 0 0 20px 0;

    position: relative;

    border: 1px solid #eee;

}

#container .tour img {

    float: left;

}

#container .tour figcaption {

    width: 530px;

    height: 230px;

    /*background-color: red;*/

    float: right;

}

#container .tour hgroup {

    width: 300px;

}

#container .tour h2 {

    font-size: 24px;

    color: #333;

    font-weight: normal;

    padding: 10px 0 10px 25px;

}

#container .tour h3 {

    font-size: 16px;

    color: #666;

    line-height: 1.5;

    font-weight: normal;

    padding: 10px 0 10px 25px;

}

#container .tour ol {

    padding: 0 0 0 25px;

    color: #666;

    line-height:;

}

#container .tour mark {

    background-color: #fff;

    border: 1px solid #458b00;

    border-radius: 4px;

    padding: 0 4px;

    color: #458b00;

}

#container .tour .buy {

    position: absolute;

    top: 55px;

    right: 30px;

}

#container .tour .price {

    color: #f60;

    font-size: 20px;

}

#container .tour .price strong {

    font-size: 36px;

}

#container .tour s {

    font-size: 16px;

    color: #999;

}

#container .tour .reserve {

    margin: 10px 0 0 0;

}

#container .tour .reserve a {

    display: block;

    height: 40px;

    widows: 152px;

    font-size: 20px;

    line-height: 40px;

    border-radius: 4px;

    color: #fff;

    background-color: #f60;

    text-align: center;

}

#container .tour .type {

    width:90px;

    height: 25px;

    line-height: 25px;

    text-align: center;

    background-color: #59b200;

    position: absolute;

    color: white;

    font-size: 14px;

    top:;

    left:;

}

#container .tour .disc {

    position: absolute;

    right:;

    top:;

    width: 52px;

    height: 52px;

    background: url(../img/disc.png) no-repeat ;

}

#container .tour .disc span {

    /*折扣旋转45度 对内联没有用 只对区块有用*/

    display: block;

    transform: rotate(45deg);

    width: 52px;

    height: 52px;

    padding: 5px 0 0 0;

    text-indent: 7px;

    font-size: 14px;

    color: #ff7a4d;

}

#container .tour footer {

    width: 530px;

    height: 30px;

    line-height: 30px;

    letter-spacing: 1px;

    text-indent: 25px;

    background-color: #fafafa;

    position: absolute;

    bottom:;

}

#container .more {

    width: 200px;

    height: 50px;

    border-radius: 10px;

    line-height: 50px;

    margin: 0 auto;

    text-align: center;

    background-color: #fafafa;

    border: 1px solid #eee;

    cursor: pointer;

    font-size: 18px;

    color: #666;

}

#container .tour time {

    color: #458b00;

}

Html5 学习笔记【PC固定布局】实战6 咨询页面的更多相关文章

CSS学习笔记--Div+Css布局实战(入门)
基本页面布局本教程带着大家做一个简单的页面布局最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...
[html5] 学习笔记-响应式布局
1.响应式布局介绍响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
HTML5学习笔记（二）：用于构建页面的语义元素
1.语义元素大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事. 2.使用语义元素的原因容易修改和维护: 无障碍性(现代Web设计的一个重要主题) ...
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学习笔 ...

随机推荐

转义BABEL的POLYFILL和RUNTIME的区别
babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps.Proxy.Refl ...
stl（优先队列操作）
http://codeforces.com/gym/101911/problem/C Recently Monocarp has created his own mini-laboratory! Th ...
opencv视频流的读取和处理
Opencv提供一个简单易用的框架以提取视频文件和USB摄像头中的图像帧,如果只是想读取某个视频,你只需要创建一个VideoCapture实例,然后在循环中提取每一帧.下面是一个简单的代码 #incl ...
activiti 5.22 表结构解析及清空流程运行测试数据
1.结构设计 1.1. 逻辑结构设计 Activiti使用到的表都是ACT_开头的. ACT_RE_*: 'RE'表示repository(存储),RepositoryService接口所操作的 ...
一、Iframe
一.Iframe 自适应iframe的高 <!-- frameborder :设置iframe的边框 scrolling:设置iframe的滚动条 src:设置iframe的路径 onload: ...
Prometheus + Grafana
Prometheus ubuntu安装prometheus非常简单: apt update apt install prometheus systemctl enable prometheus sys ...
rabbitmq AmqpClient 使用Direct 交换机投递与接收消息，C++代码示例
// 以DIRECT 交换机和ROUTING_KEY的方式进行消息的发布与订阅 // send // strUri = "amqp://guest:guest@192.168.30.11:8 ...
【LeetCode】图论 graph（共20题）
[133]Clone Graph (2019年3月9日,复习) 给定一个图,返回它的深拷贝. 题解:dfs 或者 bfs 都可以 /* // Definition for a Node. class ...
Git最全总结
一个小时学会Git 目录一.版本控制概要工作区暂存区本地仓库远程仓库 1.1.什么是版本控制 1.2.常用术语 1.3.常见的版本控制器 1.4.版本控制分类 1.4.1.本地版本控制 ...
java正则表达式移除网页中注释代码
/** * 移除网页中注释掉的代码 * * @param str * @return */ public static String removedisablecode(String str) { P ...

Html5 学习笔记 【PC固定布局】 实战6 咨询页面

最终效果：

Html页面代码：

CSS 代码 内容：column.css

Html5 学习笔记 【PC固定布局】 实战6 咨询页面的更多相关文章

随机推荐

热门专题

Html5 学习笔记【PC固定布局】实战6 咨询页面

CSS 代码内容：column.css

Html5 学习笔记【PC固定布局】实战6 咨询页面的更多相关文章