tml

tml

关注
发信
关注(28)粉丝(399)

Html5 学习笔记 【PC固定布局】 实战3 热门旅游展示区

最终效果图：

Html5 学习笔记 【PC固定布局】 实战3 热门旅游展示区-LMLPHP

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">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>
　　　　-----------------------后面重复----------------------

        <figure>

            <img src="img/tour2.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour3.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour4.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour5.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour6.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour7.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour8.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

        <figure>

            <img src="img/tour9.jpg" alt="热门旅游">

            <figcaption><strong class="title">&lt;曼谷-芭提雅6日游&gt;</strong> 报团特惠，超丰富景点，升级一晚国五，无自费，赠送600元/成人资费卷</figcaption>

            <div>

                <em class="sat">满意度77%</em>

                <span class="price">￥ <strong>2846</strong>起</span>

            </div>

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

        </figure>

    </div>

<!--

    <head>header</head>

    <section>

        <h2>bootstrap</h2>

        <p>一个html5 标准框架</p>

    </section>

    <footer>footer</footer>

-->

</body>

</html>

CSS式样：

@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: 1200px;

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

}
05-11 20:43
Powered by LMLPHP ©2024 tml 0.053887