仿站实例-驴妈妈——2018年3月29日

一、简单介绍

运用CSS/html来完成驴妈妈的仿站，以下为成果展示：

代码部分：common.css

// 公共样式
.header {
    width: 100%;
    height: 170px;
}

.header .tape {
    height: 28px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    background-color: #fbfbfb;
}

.info {
    width:1140px;
    margin:auto;
    overflow:hidden;
}

.header .tape .info .left {
    margin-left:20px;
    float:left;

}
.header .tape .info .right {
    float:right;

}
.tou {
    width:1140px;
    margin:auto;
}
.header .info .logo {
    width:175px;
    height:57px;
    float:left;
}
.header .info .search {
    float: right;
    height:88px;
    margin-right: 40%;
    margin-top:20px;
}
.header .info .search input{
    float: left;
    width:307px;
    height:34px;
    border: 2px solid #EE3388;
    // margin: 0 30% 0 0;
}
.header .info .search button {
    width:50px;
    height:40px;
    border:0;
    background-color:#EE3388;
    color: #fff;
    float: left;
}
.header .info .jiage  img {
    // margin-top:-20px;
    margin-right:-70%;
    float: right;
}

/*头部菜单*/
.header .menu {
    width: 100%;
    height: 50px;
    background-color: #DD3377;
}
.header .menu .info ul li{
    float: left;
    line-height:50px;
    padding:0 40px;
}

.header .menu .info ul li a{
    font-size:1.1em;
    color: #fff;
}

.header .menu .info ul li:hover{
    background-color:#FF4499;
    cursor: pointer;
}

.footer {
    text-align:center;
    width:100%;
    height:211px;
    background-color:#000;
}
.footer .footer_top {
    margin:auto;
    width:100%;
    height:30px;
    background-color:#2F3F4F;
}
.footer .footer_top ul{
    width:1140px;
    margin:auto;
}
.footer .footer_top ul li{
    text-align:center;
    line-height:30px;
    padding:0 50px;
    color:#fff;
    font-size:1em;
    float:left;
    margin:auto;
}
.footer .footer_bottom {
    text-align:center;
    margin-top:50px;
}

代码部分：index.css

/* 首页样式 */
.banner {
    // border:1px solid red;
}
.banner img {
    width:100%;
    height: 400px;
    /* 消除白格 */
    vertical-align: top;
}
.wrap {
    width:1140px;
    height:1400px;
    margin:auto;
    overflow: hidden;
}
.wrap .title_top {
    margin-top: 20px;
    width:1200px;
    height:42px;
    border-bottom: 2px solid #DDDDDD;
}
.wrap_top .wrap_box1 {
    width:1400px;
    height:260px;
    margin-top:20px;
}
.wrap_top .wrap_box1 li {
    width:212px;
    height:230px;
    margin-right:18px;

    float: left;
    // text-align: center;
    border:1px solid #DDDDDD;

}
.wrap_top .wrap_box1 p {
    padding:0 8px;
    border-bottom:1px solid #DDDDDD;

}

.wrap_top .wrap_box1 img {
    width:212px;
    height:150px;
    margin-right:10px;
    float: left;
    border-bottom:2px solid #DDDDDD;
}

.wrap_box1 .box1_price span{
    margin:6px 0 6px 15px;
    color:#FF6600;
    font-size: 1.2em;
}
.wrap_box1 .box1_price button{
    height:30px;
    margin:6px 0px 6px 35px;
    color:#fff;
    font-size: 1em;
    background-color: #FF8800;
    border:0;
    border-radius: 3px;

}
.wrap_box1 .box1_price button:hover {
    background-color:#FF6600;

}


.wrap .title_top ul li{
    font-size:1.5em;
    float: left;
    margin-right: 20px;
    color: #666666;
}
.wrap .product .title {
    margin:-30px 10px 30px 10px;
}
.wrap .product .title_left{
    width:240px;
    float: left;
}
.wrap .product .title_right{
    width:900px;
    position:relative;
    // float: left;
    left:0;
}
.wrap .product .title_right ul li{
    float: left;
    font-size: 1em;
    margin:5px 15px;
}

.product .box {
    border-top:1px solid #DDDDDD;
    border-to
    position:relative;
    top:49px;
    width:100%;
    height:475px;
    text-align: center;
    background-image: url('../images/box1.jpg');
    background-repeat: no-repeat;

}
.product .box_main {
    margin-top:-20px;
    margin-right: 10px;
    width:880px;
    height:440px;
    float: right;
    position:relative;
    top:0px;
    right: 0;
    background-color:#fff;
}

.product  img {
    width:206px;
    height:144px;
    // margin:20px 10px;

}
 .box_main li {
    width:214px;
    height:200px;
    // border:1px solid #DEDEDE;
    float: left;
    margin:10px 3px;

}
.box_main span{
    margin:6px 0 6px 15px;
    color:#FF6600;
    font-size: 1.2em;
}

.productt{
    // margin-top:100px;
}
.wrap .productt .product .title {
    margin:-30px 10px 30px 10px;
}
.wrap .productt  .product .title_left{
    margin-top:25px;
    width:240px;
    float: left;
}
.wrap .productt .product .title_right{
    width:900px;
    position:relative;
    // float: left;
    left:0;
}
.wrap .productt .product .title_right ul li{
    float: left;
    font-size: 1em;
    margin:25px 15px;
}

.boxg .box_left {
    // height:500px;
    position:relative;
    top:0;
    left:0;
}
.boxg .box_left img{
    height:370px;
    position:absolute;
    top:60px;
    width:244px;
    left:0;
    float:left;
}

代码部分：reset.css

代码部分：index.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <!-- 导入重置样式表 -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <!-- 导入公共样式表 -->
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <!-- 导入首页样式 -->
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>驴妈妈旅游</title>
</head>
<body>
    <!-- 公共头部 -->
    <div class="header">
        <div class="tape">
            <div class="info">
                <div class="left">
                <a href="#" title="">登录</a>|
                <a href="" title="">免费注册</a>
                </div>
                <div class="right">
                    <p><a href="" title="">我的信息</a>|
                    咨询电话：28762046636</p>
                </div>
            </div>
        </div>
            <div class="tou">
                <img src="images/tou.jpg" alt="头展示图">
            </div>

            <div class="info">
                <div class="logo"><img src="images/logo.png" alt="logo"></div>
                <div class="search">
                    <input type="text" name="" placeholder="请输入目的地.主题或关键字">
                    <button>搜索</button>
                </div>
                <div class="jiage">
                    <img src="images/jiage.jpg" alt="价格保障">
                </div>
            </div>

        <!-- 导航 -->
        <div class="menu">
            <div class="info">
                <ul>
                    <li><a href="">出境游</a></li>
                    <li><a href="">国内游</a></li>
                    <li><a href="">景点门票</a></li>
                    <li><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>
            </div>
        </div>
    </div>
    <!-- 首页banner -->
    <div class="banner">
        <img src="images/banner2.jpg" alt="banner图">
    </div>

    <!-- 产品列表 -->
    <div class="wrap">
        <div class="wrap_top">
            <div class="title_top">
                <ul>
                    <li>今日必抢</li>
                    <li>品质优选</li>
                    <li>新品速递</li>
                    <li>人文度假</li>
                </ul>
            </div>
            <div class="wrap_box1">
                <ul>
                    <li>
                        <a href=""><img src="images/t5.jpg" alt=""></a>
                        <p><a href="" title="">拉萨、林芝、大峡谷、日喀则12日双卧跟团游(【风行雪域】</a>
                        </p>
                        <div class="box1_price">
                           <span>￥4399</span>起
                           <button type="submit">立即抢购</button>
                        </div>
                    </li>
                    <li>
                        <a href=""><img src="images/t2.jpg" alt=""></a>
                        <p><a href="" title="">拉萨、林芝、大峡谷、日喀则12日双卧跟团游(【风行雪域】</a>
                        </p>
                        <div class="box1_price">
                           <span>￥4399</span>起
                           <button type="submit">立即抢购</button>
                        </div>
                    </li>
                    <li>
                        <a href=""><img src="images/t3.jpg" alt=""></a>
                        <p><a href="" title="">拉萨、林芝、大峡谷、日喀则12日双卧跟团游(【风行雪域】</a>
                        </p>
                        <div class="box1_price">
                           <span>￥4399</span>起
                           <button type="submit">立即抢购</button>
                        </div>
                    </li>
                    <li>
                        <a href=""><img src="images/t1.jpg" alt=""></a>
                        <p><a href="" title="">拉萨、林芝、大峡谷、日喀则12日双卧跟团游(【风行雪域】</a>
                        </p>
                        <div class="box1_price">
                           <span>￥4399</span>起
                           <button type="submit">立即抢购</button>
                        </div>
                    </li>
                     <li>
                        <a href=""><img src="images/t6.jpg" alt=""></a>
                        <p><a href="" title="">拉萨、林芝、大峡谷、日喀则12日双卧跟团游(【风行雪域】</a>
                        </p>
                        <div class="box1_price">
                           <span>￥4399</span>起
                           <button type="submit">立即抢购</button>
                        </div>
                    </li>



                </ul>
            </div>
        </div>
        <div class="product">
            <div class="title">
                <div class="title_left">
                    <h3>春日优选</h3>
                </div>
                <div class="title_right">
                    <ul>
                        <li><a href="">春游门票</a></li>
                        <li><a href="" title="">周边踏青</a></li>
                        <li><a href="" title="">新品速递</a></li>
                        <li><a href="" title="">人文度假</a></li>
                    </ul>
                </div>
            </div>
            <div class="box">
                <div class="box_main">
                    <ul>
                        <li>
                            <a href=""><img src="images/cj1.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="images/cj2.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="images/cj3.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="images/cj4.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <br>
                        <li>
                        <a href=""><img src="images/cj5.jpg" alt=""></a>
                        <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                         <li>
                        <a href=""><img src="images/cj6.jpg" alt=""></a>
                        <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                        <a href=""><img src="images/cj7.jpg" alt=""></a>
                       <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                        <a href=""><img src="images/c8.jpg" alt=""></a>
                       <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                    </ul>
                    </div>
            </div>
        </div>

        <!-- 出境游 -->
    <div class="productt">
        <div class="product">
            <div class="title">
                <div class="title_left">
                    <h3>出境游</h3>
                </div>
                <div class="title_right">
                    <ul>
                        <li><a href="">泰国</a></li>
                        <li><a href="" title="">日本</a></li>
                        <li><a href="" title="">东南亚</a></li>
                        <li><a href="" title="">港澳台</a></li>
                    </ul>
                </div>
            </div>
            <div class="boxg">
            <div class="box_left">
                <img src="images/cjl.jpg" alt="">
            </div>
                <div class="box_main">
                    <ul>
                        <li>
                            <a href=""><img src="images/c1.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="images/c2.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="images/c3.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                            <a href=""><img src="images/c4.jpg" alt=""></a>
                            <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <br>
                        <li>
                        <a href=""><img src="images/c5.jpg" alt=""></a>
                        <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                         <li>
                        <a href=""><img src="images/c6.jpg" alt=""></a>
                        <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                        <a href=""><img src="images/c7.jpg" alt=""></a>
                       <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                        <li>
                        <a href=""><img src="images/c8.jpg" alt=""></a>
                       <p><a href="" title="">【梦东方航天城＋晚餐】</a></p>
                            <div class="box1_price">
                               <span>￥4399</span>起
                            </div>
                        </li>
                    </ul>
                    </div>
            </div>
        </div>
    </div>


        <!-- 攻略 -->
        <div class="news">

        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer_top">
<!--             <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>订购指南</li>
                <li>支付方式</li>
                <li>特色服务</li>
                <li>售后服务</li>
            </ul> -->
        </div>
        <div class="footer_bottom">
            <p>上海驴妈妈兴旅国际旅行社有限公司。旅行社业务经营许可证编号：L-SH-CJ00056</p><br>
            <p>Copyright © 2018 www.lvmama.com. 上海景域文化传播股份有限公司版权所有　沪ICP备13011172号-3　增值电信业务经营许可证编号：沪B2-20100030</p>
        </div>
    </div>

</body>
</html>