瓢城旅行社网页界面设计（HTML+CSS）

瓢城旅行社网页界面设计（HTML+CSS）效果展示：首页图片

君诀

9618人浏览 · 2021-05-08 15:50:58

君诀 · 2021-05-08 15:50:58 发布

瓢城旅行社网页界面设计（HTML+CSS）

目录

瓢城旅行社网页界面设计（HTML+CSS）

效果展示：

一、布局分析

二、部分代码

1、导航栏的导航设计

2 、搜索栏的实现

3 、首页内容的实现

4 、旅游资讯内容左上角打折信息的实现

效果展示：

首页图片

旅游资讯

机票订购

风景欣赏

公司简介

一、布局分析

本次界面设计主要分为五个界面，主要以div盒子设计为主。五个界面布局主要分为两类（首页布局为一类如图1，其余四个页面布局相似所以归为一类如图2），图中一个矩形代表一个盒子。

图1

图2

二、部分代码

1、导航栏的导航设计

为了实现当前页面的导航背景色为黑色以及当鼠标放在任何一个导航其背景色也变成黑色实现。

效果如下：

  <!--html的代码内容通过设置id的鼠标悬浮变色的元素-->  
<div class="bar">
        <div class="bar_name" id="bar_name_one" style="background: black"><a href="index.html" target="_parent">首页</a></div>
        <div class="bar_name_right" id="bar_name_two"><a href="tourist_information.html" target="_parent">旅游咨询</a></div>
        <div class="bar_name_right" id="bar_name_three"><a href="order.html" target="_parent">机票订购</a></div>
        <div class="bar_name_right" id="bar_name_four"><a href="view.html" target="_parent">风景欣赏</a></div>
        <div class="bar_name_right" id="bar_name_five"><a href="company_profile.html" target="_parent">公司简介</a></div>
    
</div>

  <!--css的代码内容-->  
#bar_name_one:hover{
    background: black;
}

#bar_name_two:hover{
    background: black;
}
#bar_name_three:hover{
    background: black;
}
#bar_name_four:hover{
    background: black;
}
#bar_name_five:hover{
    background: black;
}

2 、搜索栏的实现

通过三个盒子来实现外面包装一个大的盒子里面设置两个盒子通过浮动完成效果.

效果图:

<!--html的代码-->
<div class="search">
            <div class="search_left"><span style="padding: 5px 10px 0px 10px;font-size: 28px;color:#757575;display: block">请输入旅游景点或城市</span></div>
            <div class="search_right"><span style="font-size: 25px; padding: 8px 20px;display: block;color: #666666">搜索</span></div>
</div>


<!--css的代码-->
.search{
    float: left;
    width: 600px;
    height: 60px;
    margin: 280px 20px 280px 650px;
    border-radius:10px;
    border: 2px solid gray;
    background: #2f2724;
}
.search_left{
    clear: both;
    float: left;
    width: 480px;
    height: 48px;
    margin: 4px;
    border: 2px solid #eeeeee;
    background: #eeeeee;
    border-radius: 10px;
}
.search_right{
    float: left;
    width: 90px;
    height: 48px;
    margin: 4px;
    border: 2px solid #eeeeee;
    background: #eeeeee;
    border-radius: 10px;
}

3 、首页内容的实现

效果如下:

<!--html的代码-->
<div class="box">
            <div class="box_picture">
                <div class="box_picture_text">
                    <span style="text-align: center;margin: 5px">国内长线</span>
                </div>
            </div>
            <span>< 曼谷-芭提雅6日游></span>
            <span style="color: #777777"> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费劵</span>
            <br>
            <span style="color: #ff6600;display: block;float: left">￥ <span style="font-weight: bold;font-size: 20px;">2 8 6 4</span> 起</span>
            <span style="display: block;float: right;font-size: 15px;color: #999999;margin: 5px">满意度 77%</span>
</div>

<!--css的代码-->
.box{
    width: 390px;
    height: 320px;
    margin: 10px 20px 10px 320px;
    border: 2px solid gainsboro;
    float: left;
}
.box_picture{
    width: 380px;
    height: 230px;
    margin: 5px 5px 10px 5px;
    background-image: url("../image/tour1.jpg");
    float: left;
}
.box_picture_text{
    width: 80px;
    height: 20px;
    background: #59b200;
    float: left;
    color: white;
}

4 、旅游资讯内容左上角打折信息的实现

为了是左上角的三角形,那么就要通过盒子来实现,我们可以把盒子看成是两个三角形组成,一个三角形让其拥有颜色一个三角形采用透明属性来是实现如图3,

其文字采用css的transform来实现翻转效果。

效果如下:

图3

<!--三角形的实现-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       .box{
           width: 0;
           height: 0;
           border-style: solid;
           border-width: 40px;
           border-color:#fff4d9 #fff4d9 transparent transparent;
       }
    </style>
</head>
<body>
<div class="box">
<!--    <span style="display: block;font-size: 20px;float: left">Hallo</span>-->
</div>
<!--1.宽度高度必须设置为0
2.边框必须有线性和宽度
3.边框颜色-->
</body>
</html>

<!--html的代码-->    
<div class="box_picture">
            <div class="box_picture_text">
                <span style="text-align: center;margin: 5px">国内长线</span>
            </div>
        </div>
        <div  class="box_picture_right">
            <span style="margin: 20px 0px 10px 20px;display: block;float: left;font-size: 20px">曼谷-芭提雅6日游</span>
            <div class="triangle"><span style="color:#ff7c68;display: block; transform: rotate(46deg);margin: 10px 0px 0px 12px">4.7折</span></div>
            <div class="boxs">
           <div class="box_left">
            <div class="box_picture_right_left">
                <span style="font-size: 14px;color: #666666">包团特惠，超丰富景点，升级1晚国五,无自费，赠送600元成人卷...</span>
            </div>
               <div class="box_picture_right_left_bottom">
                   <span style="display: block;float: left;margin: 2px 0px 0px 0px">1. </span>
                   <div class="buttons"><span style="margin: 0px 0px 0px 2px;float: left;display: block">交通</span></div>
                   <span style="font-size: 10px;">&nbsp;：春秋航空，杭州出发，无需转机</span>
                   <span style="clear: both;display: block;float: left;margin: 2px 0px 0px 0px">2. </span>
                   <div class="buttons"><span style="margin: 0px 0px 0px 2px;float: left;display: block">团期</span></div>
                   <span style="font-size: 10px;">&nbsp;：11/01、11/03、11/08...</span>
               </div>
           </div>
                <div class="box_right">
                    <span style="color: #ff6600;">￥<span style="font-size: 25px;font-weight: bold">2864</span>&nbsp;<span style="font-size: 10px;color: #999999;text-decoration:line-through">&nbsp;￥3980</span></span>
                    <div class="bottons_one"><span style="margin: 7px 0px 0px 0px;display: block">立即抢购</span></div>
                </div>
            </div>
            <span>&nbsp;&nbsp;&nbsp;本团游由瓢城旅行社赞助提供，截止于<span style="color: #458b00;font-weight: bold">2015-10-10</span></span>
        </div>

<!--css的代码段-->
.box_picture{
    width: 380px;
    height: 230px;
    margin: 5px 0px 10px 100px;
    background-image: url("../image/tour1.jpg");
    float: left;
}
.box_picture_text{
    width: 80px;
    height: 20px;
    background: #59b200;
    float: left;
    color: white;
}
.box_picture_right{
    float: left;
    width:516px;
    height: 226px;
    border: 2px solid #eeeeee;
    margin: 5px 0px 10px 0px ;
    color: #333333;
}
.triangle{
    width: 51px;
    height: 52px;
    float: right;
    background-image: url("../image/sanjiao.png");
}
.boxs{
    width: 516px;
    height: 150px;
    /*background: #eeeeee;*/
    margin: 50px 0px 0px 0px;
}
.box_left{
    clear: left;
    width: 260px;
    height: 140px;
    /*background: #0000ee;*/
    float: left;
}
.box_right{
    width: 180px;
    height: 140px;
    /*background: #00f0f0;*/
    float: left;
}
.box_picture_right_left{
    width: 220px;
    height: 60px;
    clear: both;
    float:left;
    margin: 0px 0px 0px 20px;
    /*background: red;*/
}
.box_picture_right_left_bottom{
    width: 250px;
    height: 80px;
    clear: left;
    /*background: #00f0f0;*/
}
.buttons{
    width: 40px;
    height: 20px;
    border:1px solid #458b00;
    border-radius:4px;
    float: left;
    color: #458b00;
}
.bottons_one{
    width: 115px;
    height: 35px;
    border-radius:4px;
    border:1px solid #ff6600;
    color: white;
    text-align: center;
    margin: 20px 0px 0px 0px;
    background: #ff6600;
}

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

华为云开发者联盟

cover

6个实例带你解读TinyVue 组件库跨框架技术

华为云开发者联盟

cover

GaussDB SQL查询语句执行过程解析

华为云开发者联盟

所有评论(0)

查看更多评论

君诀

已为社区贡献2条内容