第九十一节，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端固定布局来实现. 一．大纲算法 ...

随机推荐

Photoshop像素级画笔工具
1.直线工具 2.选择颜色,选择像素 dd
三界商城 ajax调用城市接口,竟然需要登录,调用的接口需要登录,如果不登录重定向到登录
现象商家入驻填写信息的 ajax请求没有数据 network->name-headers 返回302 发现调用的接口,需要登录,否则重定向登录 //初始化用户信息查询 public func ...
linux看代码方法和建议
http://blog.csdn.net/lxl584685501/article/details/46803077
centos安装ganttproject
官网下载 http://www.ganttproject.biz/ 我的JAVA早已经安装了. 问题:root #ganttproject 提示org.bardsoftware.eclipsito.B ...
必须掌握的Linux命令
章节简述: 本章节讲述系统内核.Bash解释器的关系与作用,教给读者如何正确的执行Linux命令以及常见排错方法. 经验丰富的运维人员可以恰当的组合命令与参数,使Linux字符命令更加的灵活且相对减少 ...
Html5移动端页面自适应布局详解(阿里rem布局)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后大概viewport可以理解为三种 1.layout viewport ...
改造jQuery-Tagit 插件支持中文全角的逗号和空格
jQuery 的 tagit 插件效果还是不错的,今天用到该插件但发现不能自定义标签分隔符,只能是英文半角逗号或空格,于是想改造下效果: 先研究了一番插件的代码,发现并不能通过插件自身的扩展方法来实 ...
Chrome 插件自定义博客编辑界面
总觉得博客园的编辑器太白了,特别是在晚上,太明亮了刺眼.在后台设置里面找不到任何可以修改UI的地方,考虑用浏览器插件自己改一下.要是做得好,可以给大家一起用. 新建目录 E:/cnblog.js,添加 ...
ES 6 : 变量的解构赋值
1. 数组的解构赋值 [ 基本用法 ] 按照一定的模式从数组或者对象中取值,对变量进行赋值的过程称为解构. 以前,为变量赋值只能直接指定值: 而ES 6 允许写成下面这样: 上面的代码表示,可以从数组 ...
Scala 类和对象
Scala class: Scala 源文件中可以有很多类(class),这些类默认都是Public的,public是Scala的默认访问级别.在Scala中,声明一个未用priavate修饰的字段 ...

第九十一节，html5+css3pc端固定布局，完成首页

第九十一节，html5+css3pc端固定布局，完成首页的更多相关文章

随机推荐

热门专题