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

最终效果图：

提出公共页脚和导航部分：

新建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: #fafafa

    color: #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:;

    padding:;

}

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;

}

#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:;

}

/*所有权*/

#footer .bottom {

    height: 80px;

    color: #777;

    text-align: center;

    line-height: 80px;

    background-color: #000;

    /*距上边框的一条线 好看*/

    border-top: 1px solid #444;

}

　　将style.css basic.css 抽取出来的部分进行删除

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

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

随机推荐

PHP开发环境搭建及开发工具
PHP服务器组件非常多有WampServer.XAMPP.AppServ.phpStudy.phpnow等. 菜鸟教程推荐: WampServer,这也是目前window平台上使用最广泛的,操作也非常 ...
luoguP1081 开车旅行题解(NOIP2012)
这道题是真滴火!(一晚上加一节信息课!) 先链接一下题目:luoguP1081 开车旅行首先,这个预处理就极其变态,要与处理出每一个点往后走A会去哪里,B会去哪里.而且还必须O(nlogn)给它跑出 ...
关于plt.imshow()显示彩图问题
https://blog.csdn.net/cnnmena/article/details/79613531
vue-cli3脚手架的安装
如果之前有安装过其他的版本的话,要先卸载卸载:npm uninstall vue-cli-g 或 yarn global remove vue-cli 安装:npm i @vue/cli -g ...
20180209-xml模块
xml的用法操作如下: xml格式如下: <?xml version="1.0"?> <data> <country name="Liech ...
CGAffineTransform 图像处理类
CGAffineTransform 介绍概述 CGAffineTransform是一个用于处理形变的类,其可以改变控件的平移.缩放.旋转等,其坐标系统采用的是二维坐标系,即向右为x轴正方向,向下为y ...
Error- spark streaming 打包将全部依赖打进去Invalid signature file digest for Manifest main attributes
spark streaming 打包将全部依赖打进去,运行jar包报错:如下 Exception in thread "main" java.lang.SecurityExcept ...
Java并发（基础知识）—— 阻塞队列和生产者消费者模式
1.阻塞队列 Blocki ...
VS基本教程
首先打开vs,点击工具栏,文件----新建----项目然后依次选择Visual C++----空项目-----命名---项目存放路径接下来在解决方案资源管理器中选中源文件,右键----添加---- ...
windows命令行运行mysql
在cmd中输入时一定要保证英文环境. 1. windows命令行运行mysql: 我是将MYSQL安装在C:\Program Files\MySQL所以 C:\Program Files\MySQL\ ...

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

提出公共页脚和导航部分：

页面column.css 内容：

抽取基础css文件内容 basic.css：

将style.css basic.css 抽取出来的部分进行删除

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

随机推荐

热门专题

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

　　将style.css basic.css 抽取出来的部分进行删除

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