admin管理员组文章数量:1794759
瓢城旅行社网页界面设计（HTML+CSS）
瓢城HTML style="color:#2aa0ea" target=_blank class=infotextkey>旅行社网页界面设计（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;"> ：春秋航空，杭州出发，无需转机</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;"> ：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> <span style="font-size: 10px;color: #999999;text-decoration:line-through"> ￥3980</span></span> <div class="bottons_one"><span style="margin: 7px 0px 0px 0px;display: block">立即抢购</span></div> </div> </div> <span> 本团游由瓢城旅行社赞助提供，截止于<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; }
版权声明：本文标题：瓢城旅行社网页界面设计（HTML+CSS） 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686936928a120176.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论